项目上传部署

说明

• 这里使用的项目是用 vue-cli 为脚手架，npm run build 编译的静态文件为前端
• 使用纯 node.js 做 API 接口的后端
• 安装配置好nginx服务器后默认目录是 /usr/share/nginx/html
• nginx 的配置文件目录一般是 /etc/nginx
• 使用 nginx -t 即可以查看 nginx 配置文件的位置，可以进行跨域访问设置
  • 域名自行到云平台进行解析，另外为 node.js 文件使用的是 8082 端口，所以需要到阿里云开放一个安全组端口
• 文件上传方式，可以使用 git 方式进行clone，也可以使用 ftp 上传

前端代码上传

将编译成功的 dist 文件夹上传到 /usr/share/nginx/ 目录下

编写 nginx 配置文件

cd /etc/nginx/cd conf.t
vi dist-html.conf

server{
 listen 80;
 server_name [域名];
 location / {
  root  dist;
  index  index.html;
  try_files $uri $uri/ /index.html; # vue的项目为单页应用，如果不配置这个选项，会导致路由找不到，刷新页面将为404
}
 error_page  500 502 503 504 /50x.html;
 location = /50x.html {
  root html;
 }
}

重载 nginx 配置

sudo nginx -t //检测nginx配置文件是否成功
sudo nginx -s reload

• 设置完后，可以直接通过域名来访问 dist/index.html 文件
• 详情可以搜索“vue-cli打包之后的项目在nginx的部署”

后端代码上传

将 api.js 上传到 /usr/share/nginx/dist/api 目录下

node api.js

编写 nginx 配置文件

cd /etc/nginx/conf.t
vi api-8082.conf

upstream msgboard{
 server 127.0.0.1:8082;
}
server{
 listen 80;
 server_name [域名];
 location / {
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
  proxy_set_header Host $http_host;
  proxy_set_header X-Nignx-Proxy true;
  proxy_pass http://msgboard;
  proxy_redirect off;
 }
}

配置 iptables

编写 iptables 规则

#允许8082端口
-A INPUT -p tcp --dport 8082 -j ACCEPT

重载 iptables

sudo iptables-restore < /etc/iptables/iptables.up.rules
sudo ufw enable

重载 nginx

sudo nginx -t
sudo nginx -s reload

pm2 部署

cd /usr/share/nginx/dist/api
pm2 start api.js

遇到的问题

The 'Access-Control-Allow-Origin' header contains multiple values '*, *'

可能是服务器端配置了跨域选项，在代码端也指定了跨域设置导致冲突，去掉一边的配置即可

基本的 linux 指令

• 返回上级目录 cd ..
• 删除文件夹及其所有文件 rm -rf [目录]
• 查看程序进程 ps -ef | grep [程序名]