linux系统部署express+vue项目

一、准备阶段： 

1、安装linux上所需要的环境：npm  nodejs  nginx   pm2

//安装 npm（Node 包管理器）
sudo apt install npm

//判断是否安装成功
npm -v


//安装 Node.js（可以根据需要选择版本）
sudo apt install nodejs

//判断是否安装成功
node-v

//安装pm2
sudo npm install -g pm2
pm2 -v

//安装nginx
sudo apt install nginx

nginx -v

2、准备vue的dist包（npm run build） 和 express后端服务包（不用打包可以直接运行在服务器）

3、把打好的前后端包上传至服务器对应的目录，我使用的连接工具是finalShell（无脑好操作）,如图所示我的前端包为dist后端包为backend，存放的文件路径是 /root/manager-web

二、启动后端服务： 

   1、进入backend目录，使用pm2命令启动（以下是pm2常见命令）

#启动
pm2 start server.js

#查看状态
pm2 list

#停止
pm2 stop server.js

#重启
pm2 restart server.js

#删除
pm2 delete server.js


#日志 
pm2 logs pm2 logs server.js

#性能监控
pm2 monit

三、开通防火墙：让用户可以访问 

#开通防火墙3000端口
sudo ufw allow 3000

#启用防火墙
sudo ufw enable

#禁用防火墙
sudo ufw disable

#拒绝端口
sudo ufw deny 8080

#删除规则
sudo ufw delete allow 8080

#运行特定ip访问
sudo ufw allow from 192.168.1.100


#查看已经配置的规则
sudo ufw status numbered

#启用防火墙的日志
sudo ufw logging on

四、配置nginx、访问前端页面

server {
    # 监听 IPv4 地址的 8086 端口
    listen       8086;

    # 监听 IPv6 地址的 8086 端口
    listen       [::]:8086;

    # 服务器名称，这里使用 _ 表示通配符，表示该配置适用于所有主机名
    server_name  _;

    # 设置 web 根目录为 /root/manager-web/dist 目录
    root         /root/manager-web/dist;

    # 尝试访问请求的文件，如果文件不存在，则尝试访问目录，如果目录也不存在，则返回 /index.html
    try_files $uri $uri/ /index.html;

    # 配置对 /api/ 路径的请求进行代理转发
    location /api/ {
        # 将请求转发到本地的 127.0.0.1:3001 地址，且保持 /api/ 路径
        proxy_pass http://127.0.0.1:3001/api/;
    }

    # 设置错误日志文件的位置
    error_log /var/log/nginx/manager-error.log;

    # 设置访问日志文件的位置
    access_log /var/log/nginx/manager-access.log;
}

 这里值得一提的是  前端的get、post的配置地址应该是 http://(ip地址):8086/api

如果能访问页面就大工告成，完结撒花！！！