前端项目部署到服务器

article/2025/11/9 0:47:03

1.准备工具

服务器:阿里云 腾讯云 华为云都可以 我这里使用的是阿里云ECS共享型(推荐)

xshell:用于远程连接服务器,修改配置文件

xftp:用于连接远程服务器,将本地资源上传到远程服务器

2.服务器设置

1.第一次需重置实例密码

2.配置安全组规则

开启常用的端口

22必须要开 80是默认访问端口也打开

3.使用Xshell连接服务器

打开Xshell新建连接,名称自己起一个,主机写自己服务器的公网地址,协议不需要更改。端口选择22(默认的,所以刚刚需要开启22端口)

 点击连接

输入用户名root 密码是自己设置的密码

 4.使用xftp将dist文件上传到服务器

一样 新建会话 输入账号密码连接服务器

 进入下面的画面,左侧是本地的,右侧就是服务器的空间,可以在服务器的root文件夹下新建文件,将dist文件拷贝过去。拷贝完成之后就可以退出xftp了

 4.这个时候访问主机会提示网络错误,因为此时我们的主机相当于还只是一个电脑,需要安装nginx代理服务器

回到xshell面板 输入 yum install nginx 安装nginx服务器

linux常用指令:cd进入文件夹   /表示根目录  ls显示当前目录下所有文件 cd ../退回上一层目录 

linux中 蓝色的表示文件夹 白色的表示文件 vim xxx可以进入编辑文件

安装完成后 输入cd /进入根目录,nginx默认被安装到了根目录的etc文件下

 cd etc 里面有nginx文件夹

 cd nginx进入nginx文件夹

找到nginx.conf 是nginx的配置文件

 

vim nginx.conf编辑nginx的配置文件

修改user为root

在server中可以指定端口号文件路径,listen表示监听的端口号,默认是80 我们可以自己修改

root是访问改主机的这个端口的时候,会到哪个根目录下去找资源,这里就是将我们的dis文件的目录放进来就可以了。

index是在root指定的目录下去找哪个文件 

 修改完成之后保存退出 重启一下nginx服务器即可

nginx启动命令:nginx

nginx停止命令:nginx -s stop

vim用到的命令:q!不修改退出 wq保存退出

如果用到了代理已经history模式的话 还需要再location中去配置,这里暂时没有用到  后面会补充


http://chatgpt.dhexx.cn/article/hauQr538.shtml

相关文章

微服务前端部署

四.config机器前端部署 1.在config机器上安装jdk1.8,mysql,redis,nacos,nginx安装流程我就不一一解释了,大家可自行百度,后面我会贴上必要的配置信息 2.修改前端的vue.config.js的配置 配置修改:前端ui文件中的index.js文件、vue.config.js文件 如下图: 3.修改后在前端…

前端cookie详解

cookie在前端还是比较总重要的,接下来将总结一下cookie知识点。 将从以下方面去聊一聊cookie。 1、什么样的数据适合放到cookie中。 2、cookie是如何设置的。 3、cookie如何进行携带传送给服务器的。 4、cookie如何实现删除的。1、什么样的数据适合存放在cookie中?…

必背前端八股文

前端八股文 看到一篇特别好的前端八股文,强力推荐 🔥 连八股文都不懂还指望在前端混下去么 - 掘金 (juejin.cn)https://juejin.cn/post/7016593221815910408

纯前端导出表格

前端 excel 表格导出 我们习惯了后端去处理表格,直接接口返回 ,那前端如何轻松的导出表格呢? 文章目录 前端 excel 表格导出Ⅰ. 通过 js-xlsx ⭐⭐⭐⭐⭐安装① vue2 中使用② vue3 中使用③ react 中使用 Ⅲ. 通过 vue-json-excel ⭐⭐安装…

jquery form表单序列化注意事项

我们先来讲讲表单中 中readonly和disabled的区别: readonly只对input和textarea有效, 但是disabled对于所以的表单元素都是有效的,包括radio,checkbox等 如果表单中使用的disabled那么用户是不能选择的,也就是说这个文本框是无法获取到焦点…

jQuery实现表单序列化反序列化

js序列化反序列化参考: https://blog.csdn.net/zqtsx/article/details/17299087 涉及知识点:序列化:var serializeJson JSON.stringify($("#fiveLevelIndexForm").serializeArray());反序列化: var json $.parseJSO…

JQuery表单序列化

方式一&#xff1a;serialize() <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><script src"https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></sc…

自动阅读脚本源码

如题,提供源码也可以提供技术支持 以下是界面截图和部分脚本源码 使用按键精灵手机版开发的,目前支持十多个主流平台 以下是少量源码截图 有疑问可以加V:848312526

自动阅读,这些坑你都知道吗?

我应该选择一个怎样的脚本&#xff1f; 现在市面上什么样的脚本都有&#xff0c;有免费的&#xff0c;有10块钱的&#xff0c;什么脚本都有。如果你只是想玩玩而已&#xff0c;那你大可随意选择。如果你想要长期稳定的使用&#xff0c;那你就要把眼睛睁大&#xff01;&#xf…

自动阅读专业版第六次更新

源代码下载地址&#xff1a;https://pan.baidu.com/s/1WvhpA-9fhSJOqdVUX6E7jw 提取码&#xff1a;w301 原贴&#xff1a;https://blog.csdn.net/zy0412326/article/details/106297472 第一次更新贴&#xff1a;https://blog.csdn.net/zy0412326/article/details/106421444 …

autojs自动阅读脚本源代码免费分享

autojs上一篇文章讲过了&#xff0c;这篇来实践一下。 一、工具下载安装 手机端&#xff1a;auto.js&#xff08;百度即可&#xff09; PC端&#xff1a; VS Code JDK SDK Tools&#xff08;定位工具: Uiautomatorviewer&#xff09; 注&#xff1a; VS Code 用于代…

Adobe Acrobat Pro DC 2022:专业高效的PDF阅读和编辑利器!

Adobe Acrobat Pro DC 2022是一款功能强大的PDF阅读和编辑软件&#xff0c;是Adobe公司的旗舰产品之一&#xff0c;广泛应用于商业、教育、行政和政府等领域。该软件具有众多高级功能&#xff0c;能够满足各种高级用户的需求。 首先&#xff0c;Adobe Acrobat Pro DC 2022能够快…

畅想阅读自动翻页

畅想阅读自动翻页JavaScript实现 打开相应的阅读书籍通过检查&#xff0c;查找下一页的类名通过F12调出控制台&#xff0c;点击此按钮 然后点击下一页按钮&#xff0c;会出现下面的结果, 选择class里的类名在console中输入以下代码 setInterval(function(){document.getEleme…

博客自动增加阅读量

博客自动增加阅读量 目的步骤准备条件编写基础类注意解决后续 目的 用HttpClient包进行Get请求&#xff0c;从而增加博客的阅读量 步骤 1 拿到所有博客的URL&#xff1a; 我们的博客都是 https://blog.csdn.net/用户ID/article/details/ 文章ID&#xff08;8位&#xff09; …

实现自动阅读的功能

var start document.getElementsByTagName(div)[0]; var stop document.getElementsByTagName(div)[1]; var speed document.getElementsByTagName(div)[2]; var timer 0; var num 10; //多次点击start按钮会产生多个定时器&#xff08;加锁——操作系统学过&#xff09; …

PDF如何自动滚动阅读

PDF如何自动滚动阅读 视图---页面显示---自动滚动 快捷键 Ctrl shiftH

html 自动阅读,自动阅读软件脚本

自动阅读软件脚本是一款非常实用的帮助大家可以自动阅读挂机的软件&#xff0c;生活中多种场景下都可以使用这款软件快速完成任务&#xff0c;自动阅读、自动点赞评论以及刷视频等等的功能一应俱全&#xff0c;支持多个平台上的自阅服务满足大家的需求&#xff0c;想要了解这款…

自动阅读教程--五条app

下面介绍实现五条自动阅读的步骤。&#xff08;只介绍android手机的情况&#xff09; 一、手机连接电脑 首先用usb线将手机连接到电脑上&#xff0c;然后开始菜单中&#xff0c;cmd打开控制台&#xff0c;输入adb devices&#xff0c;会出现如下页面&#xff1a; 这是要记住…

【新】CSDN文章一键打印、输出PDF(自动阅读全文、全清爽模式)

版权声明&#xff1a;本文为丨匿名用户丨原创文章&#xff0c;转载请注明出处&#xff1a;【新】CSDN文章一键打印、输出PDF&#xff08;自动阅读全文、全清爽模式&#xff09;_丨晋丨-CSDN博客_csdn打印https://blog.csdn.net/p1279030826/article/details/106602341 该方法在…

自动阅读专业版

APK链接&#xff1a;https://pan.baidu.com/s/1TH52xDhDS0GX7fOnwh9Ghw 提取码&#xff1a;tpkr 专业版可以自动阅读&#xff1a; "微视", "快音", "快7浏览器", "天天爱清理", "趣铃声", "火火视频极速版", &q…