nuxt前端部署

需求：部署测试环境
工具：阿里云安全规则开启端口（后端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名称