需求:部署测试环境
工具:阿里云安全规则开启端口(后端20001)、transmit(连接器)
参考:针对vue项目-连接器使用参考(所有的文件都压缩为zip放在服务目录下)
准备:先运行本地项目,查看项目本身是否可以启动
服务上的项目
- 项目中所有文件打包压缩一个zip,放在你自己在服务下新建的目录文件夹下
- 命令解压:
unzip 文件名称
(要进入该服务目录下再进行该命令解压) - 初始化项目:
npm install
(安装项目插件) - 运行项目:
npm start
(启动服务上的项目)
nuxt项目配置
- 本地端口(解决本地运行时默认3000端口被占用问题)
//package.json配置本地接口
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "20001" //写与冲突的端口号不同的端口
}
}
- 服务指定端口(解决服务运行时端口冲突问题)
//nuxt.config.js配置服务接口
export default {
server: {
port: 20001, // default: 3000
host: '0.0.0.0', // default: localhost
},
// other configs
}
-
nginx服务的配置文件
- 启动服务
cd /usr/local/nginx/ //这个是默认路径/usr/local/nginx/ service nginx restart (reload)//重新启动(重新加载) killall -9 nginx //杀死所有nginx进程
- 配置全局的nginx.conf配置文件(一般不在全局配置需要新建一个nginx配置文件:/usr/local/nginx/conf.d文件夹下创建web.conf配置文件)
//nginx.conf配置文件默认路径 : /usr/local/nginx/conf http { //有可能有多个项目,所以不建议在全局服务的配置文件配置,可以在全局中如下方式配置多个分支文件 include /usr/local/nginx/conf.d/advert.conf; include /usr/local/nginx/conf.d/web.conf; }
- 配置nginx配置分支文件web.conf
server { listen 20001; //这个是监听端口(可以和服务端口不一致) server_name 127.0.0.1; root /home/advert/web_test; //项目在服务目录的路径 location / { proxy_pass http://127.0.0.1:20001; //反向代理端口(服务端口) } //静态文件处理 location ~ ^/(images|javascript|js|css|flash|media|static)/ { expires 30d; } //错误页面处理 error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }
//修改nginx配置文件需要重新运行nginx
/usr/local/nginx/sbin/nginx -s reload
pm2监控后端进程,如果报错会自动终止进程
就算是停止项目也可以访问网址:避免是窗口直接启动命令,关闭窗口就会断开远程访问
1.在服务器中安装 pm2:npm i pm2 -g(全局安装,只要安装了node环境便可直接运行该命令)
2.启动项目:pm2 start npm --name "web_test" -- run start
3.查看运行项目:pm2 ls
4.重启项目:pm2 restart ip名称
5.停止项目:pm2 stop ip名称
6.删除项目:pm2 delete ip名称