vue+nodejs项目在云服务器上的简单部署

1、背景描述

1.1、项目描述

包含了一个前端项目（Vue）和一个后端项目（nodejs），项目使用轻服务，不需用到数据库；

1.2、服务器描述

在腾讯云注册了域名，租了一台云服务器，服务器操作系统为CentOs 7；
在腾讯云官网的控制台上可以使用webshell操作服务器，在本地（Windows）可以使用WinSCP实现文件的上传和下载；
在域名管理中，添加一个解析映射到云服务器的ip地址上，需要进行网站备案；

2、服务器环境搭建

2.1、安装node、npm

为了避免版本不兼容，可通过node -v命令查看原先使用的node版本，在linux服务器中安装相同版本的node，我的是v12.16.1；
获取安装包，我选择的方式是在https://developer.aliyun.com/mirror/NPM?from=tnpm（阿里镜像）中可以下载node-v12.16.1-linux-x64.tar.gz，然后通过WinSCP上传到我的服务器上；
通过命令tar -zxvf node-v12.16.1.tar.gz进行解压；
现在安装node，会自动安装npm；
然后通过命令ln -s /node-v12.16.1-linux-x64/bin/node /usr/local/bin/node和ln -s /node-v12.16.1-linux-x64/bin/npm /usr/local/bin/npm建立软链接；
接着下来可以通过命令node -v和npm -v查看版本，验证安装结果；

2.2、安装cnpm

使用淘宝镜像cnpm，不然很慢；
通过npm install -g cnpm --registry=https://registry.npm.taobao.org下载；
安装完成后也要创建一个软链接ln -s /node-v12.16.1-linux-x64/bin/cnpm /usr/local/bin/cnpm；
通过cnpm -v验证安装结果；

2.3、安装pm2

通过cnpm install -g pm2进行安装；
建立软链接ln -s /node-v12.16.1-linux-x64/bin/pm2 /usr/local/bin/pm2；
几个pm2常用命令：pm2 start "…"、pm2 stop "…"、pm2 list、pm2 logs；

2.4、安装nginx

（参考https://www.cnblogs.com/xxoome/p/5866475.html）
在安装nginx前需要安装gcc、pcre-devel、zlib-devel、openssl-devel，yum -y install gcc pcre-devel zlib-devel openssl openssl-devel；
下载nginx-1.9.9.tar.gz，移动到/usr/local/下，下载地址：https://nginx.org/download/（我没找到国内镜像）；
解压：tar -zxvf nginx-1.9.9.tar.gz，进入nginx目录：cd nginx-1.9.9，配置：./configure --prefix=/usr/local/nginx，make：make、make install；
启动nginx，cd /usr/local/nginx/sbin/、./nginx；
在浏览器输入服务器ip地址，测试安装结果；

3、防火墙的问题

刚买的服务器应该是没有启动防火墙服务的，但为了安全，应该打开；
通过systemctl status firewalld查看防火墙状态，发现是dead状态，即未开启；
通过systemctl start firewalld开启防火墙；
通过systemctl status firewalld查看状态，显示running即开启成功；
通过firewall -cmd --query-port=80/tcp查看80端口状态，显示为no，即没有开启；
通过firewall -cmd --add-port=80/tcp --permanent和firewall -cmd --add-port=3000/tcp --permanent开启80和3000（后端项目）端口，–permanent表示永久生效，没有此参数重启后失效；
通过systemctl restart firewalld重启防火墙服务；

4、部署后端项目

通过pm2进行部署，pm2 start "项目程序"；
可在项目中写一个测试接口，用浏览器向该接口发起http请求用于测试项目部署结果；
将前端项目中的请求url改为 “服务器ip地址：3000” ；
在本地启动前端项目，测试能否正常运行；

5、部署前端项目

vue项目通过cnpm run build打包，获得一个index.html文件和一个资源包；
将这两个上传至服务器的指定文件夹下（假设为/workspace/chat）；
修改nginx的配置文件（默认为nginx文件夹下的conf/nignx.conf），因为对nginx配置文件不是很了解，所以照葫芦画瓢，将原映射修改为自己指定的文件夹

6、效果

项目部署完，可在浏览器上通过域名或ip地址访问网站。