Vue 项目nginx部署流程

写在开头，单纯的做个记录，如有错误劳烦指正，谢谢。

前期准备工作：

云服务器，开启需要访问的端口号

1.先登录阿里云，找到云服务器ECS → 网络与安全 → 安全组

2. 点击安全组列表页面的配置规则进入安全组规则配置页面

   
   安全组规则配置页面
   

   3.配置安全组规则（设置服务器开放的端口号）

   
   
   配置好之后可以在Windows下cmd中 使用telnet命令测试端口号是否开启成功
   端口未开启
   image.png

安装Xshell 和 Xftp

也可选择不下载，直接在阿里云ECS实例控制台远程登陆

---

Xshell 和 Xftp家庭/学校免费版本下载地址
下载安装好之后打开Xshell，新建会话

打开Xshell
创建会话
点击连接后输入登录的账号（没额外创建就是用root账号）
输入默认的root账号
输入实例密码
如果忘记实例密码，在ECS实例控制面板重置密码

重置密码 连接成功

云服务器安装Nginx

1. 首先了解自己的云服务器是什么操作系统，大部分都是linux，然后了解属于哪个发行版。

   
   查看服务器的操作系统
2. 安装nginx（以CentOS 7为例），

sudo yum -y install nginx   # 命令行输入即可安装 nginx
systemctl start nginx  #启动 Nginx
systemctl enable nginx  #开机启动nginx

sudo yum remove nginx  # 卸载 nginx
systemctl stop nginx   #停止 Nginx
systemctl disable nginx  #禁用开机启动 nginx

有可能还要配置yum源，这里我也不是很了解，如果不能连接到nginx，原因很多，但是可以先检查 1,nginx服务是否真的起来了；2,linux服务器防火墙是否打开，建议直接百度一下云服务器安装nginx，都有很多很好的教程。

打包Vue项目

用脚手架构建的Vue项目打包只需要一行命令即可打包

npm run build 

package.json 文件下可以看见其对应的是vue-cli-service build命令
打包编译成功
打包成功的文件

将打包好的文件传输到服务器上去并配置好nginx即可访问

1. 使用Xshell 和 Xftp 工具传输打包好的文件

   
   先使用Xshell连接远程服务器
   使用Xftp即可便捷地使用图形化的操作方式将本地文件上传到远程服务器
   

   在远程服务器的窗口上进行操作，即可对远程服务器上的文件进行更改

   
   从本地服务器复制打包好的文件到远程服务器上
   这样就将打包好的项目放在服务器上了，最后写好nginx配置文件即可访问到dist下的index.html

Nginx 配置文件编辑

使用Xftp，可以很方便地直接用记事本编辑远程服务器上的配置文件，可以无需用linux的vim命令编辑。

先找到nginx配置文件

右键nginx.conf配置文件选择用记事本编辑
大体结构是这样的：

xxxxxxxxxxxxxxxxxx #一些配置代码
http {
  xxxxxxxxxxxxx #一些配置代码
  server {
      #这里就是我们进行配置文件编辑的地方
  }
}

给个简单的样例

server {
        listen       8083;  #监听的端口号为 8083
        server_name ;  #设置主机域名，最好别和其他server_name重复
        root         /home/test/dist; #访问的根目录
        index      index.html #访问8083端口时默认的主页
}

在Xshell中重启一下nginx 以便更新配置文件

nginx -s reload

没报错就是配置文件生效了

最后在浏览器输入远程服务器Ip地址/域名+指定的端口号即可访问自己的项目了

部署成功

总结

部署项目到远程服务器主要就是要配置好nginx文件，让nginx监听的端口对应上项目的入口index.html，因为有脚手架所以vue项目的打包也变得很简单，打包好即可直接上传使用。但是本文章只是介绍一个大概流程，配置文件的编写可以参考其他更详细的教程，我仅给出了一个最简单的样例。