一、准备阶段:
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 nginxnginx -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.htmltry_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
如果能访问页面就大工告成,完结撒花!!!