通过阿里云ECS部署个人vue-cli项目

目的

最近心血来潮，通过Vue搭建了一个单页面个人网站。完成代码编写后，自然就是迫不及待的把项目部署到云服务器。

部署步骤

1. 购买域名：在阿里云搜索你想要的域名。
2. 域名解析
3. 购买云服务器 ECS：购买的时候需要选择操作系统以及版本，我选择的是CentOS 7.5 64位版。
4. 购买完成后，需要下载 Xshell 以及 Xftp，用于操作云端服务器和文件传输。在安装好两个软件后，便可以开始我们的部署了。
5. 如果购买的是境内服务器，需要备案，具体步骤参考阿里云官方文档。

Xshell链接云服务器

1. 双击打开Xshell，新建一个会话

   

   公网IP地址可以在阿里云服务器管理控制台找到：

   

2. 配置好主机后点击连接，输入登录名和密码，登录名和密码对应阿里云网站的登录用户名和密码。注意：登录名默认为 root。

   

3. 连接成功后，便可以看到如下界面：

   

Vue项目打包

1. 打开WebStorm(在下铁粉)，通过命令 npm run build 打包我们的项目。
2. 打包完成后，我们的项目目录下会生成一个 dist 文件夹，这便是经过webpack打包后的项目代码。

   

3. 在Xshell界面点击新建文件传输图标，便可以打开已经安装完成的Xftp。

   

4. 在Xftp界面选中dist文件夹，点击向右传输按钮，就可以将本地的打包文件上传到云服务器。我是将dist文件传输到 /root 文件夹下的。

   

Nginx安装与配置

1. 在Xshell终端输入yum install nginx 安装Nginx。
2. 安装结束后，输入service nginx start 启动Nginx服务，因为Nginx不会自动启动。
3. 通过命令 nginx -t 查看Nginx的当前状态，会显示conf文件的状态以及路径。在配置完成conf文件后，依然可以通过这个命令验证配置是否成功。

   

4. 在命令行输入 cd /etc/nginx 切换到Nginx目录下。
5. 在Nginx目录下，输入vim nginx.conf进入配置编辑模式。按下键盘 “i” 键便可以编辑文件。

6. 修改完成后，按ESC键退出编辑模式，输入:wq 和回车保存刚才的修改并退出。 7. 需要输入nginx -s reload 重新启动Nginx。

配置ECS端口

1. 我们在Nginx配置中listen 服务器的80端口，但是我们ECS服务器的80端口并没有打开，因此需要进入阿里云控制台配置端口信息。

2. 在端口范围配置框中输入 80， 授权对象设置为 0.0.0.0/0， 这个地址表示允许所有IP地址访问。

可以遇到的问题

1. 在启动Nginx服务的时候可能会遇到端口被占用的问题

   

   具体解决方法可以参考 梦醒的猪 的文章。
2. 如果配置途中出现无法恢复的错误，可以通过 yum remove nginx 删除nginx，再重新安装。

收工

到此为止，已经可以通过公网IP访问我们的刚刚部署的前端项目。顺便吐槽一下，果然便宜无好货，618购买的ECS服务器只要89/年，1Mbps带宽属实有点慢。