nginx部署nuxt多项目

一、背景：之前使用nginx部署了一个nuxt的项目，参考的是这篇文章Nuxt项目的部署，现在部署多项目，先参考的是这篇文章   nginx配置多个项目 ，使用Nginx要在同一个域名下配置多个项目有两种方式：

1. nginx按不同的目录分发给不同的项目
2. 启用二级域名，不同的项目分配不同的二级域名

采用：我现在是测试服，是IP，没有域名，所以选择第一种方式，创建不同项目。原本同一个IP+端口已经上线了一个项目，现在就在原本的基础上加一个目录就行。

二、具体步骤：

1、修改nginx.conf，第一新增反向代理ip:nodenuxtapp，第二新增新项目目录：app，这个命名随便取，我是因为之前发布的pc端，现在是移动端，所以用app相对应，具体写法：location /app。

        upstream nodenuxt {
	    server 127.0.0.1:3000; #nuxt项目 监听端口
	    keepalive 64;
	}
	upstream nodenuxtapp {
	    server 127.0.0.1:4000; #nuxt项目 监听端口
	    keepalive 64;
	}
	
	server {
	    listen  9098;
	    server_name testip;
	    location /app {
	        proxy_http_version 1.1;
	        proxy_set_header Upgrade $http_upgrade;  
	        proxy_set_header Connection "upgrade";
	        proxy_set_header Host $host;
	        proxy_set_header X-Nginx-Proxy true;
	        proxy_cache_bypass $http_upgrade;
	        proxy_pass http://nodenuxtapp; #反向代理
	    } 
	    location / {
	        proxy_http_version 1.1;
	        proxy_set_header Upgrade $http_upgrade;  
	        proxy_set_header Connection "upgrade";
	        proxy_set_header Host $host;
	        proxy_set_header X-Nginx-Proxy true;
	        proxy_cache_bypass $http_upgrade;
	        proxy_pass http://nodenuxt; #反向代理
	    }
	}

2、项目打包修改配置文件，这里参考了这篇文章如何在NGINX中部署多个前端项目 ，但是这篇文章讲的是vue单页面部署配置文件的修改，和nuxt部署配置文件不一样，但是提供了一个思路。那就是修改nuxt.config.js配置文件即可，参考官网nuxt-router 修改router参数即可：

module.exports = {
  router: {
    base: '/app/'
  }

注意：名称要与nginx.conf中目录同名，且此处名称前后要加 “/”。

3、npm run build打包项目，把.nuxt，server，nuxt.config.js，package.json，package-lock.json文件拷贝到服务器目录下，我看之前网上的.nuxt，nuxt.config.js，package.json，static这四个文件，但是我的static没东西，不需要拷贝，而拷贝server是因为打包后的start命令需要server下的index.js，package-lock.json是为了锁定版本，怕在服务器执行npm install下载版本和本地不一致，影响项目运行。执行npm install，npm run start，本地项目运行起来。

  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
  },

4、在nginx根目录打开cmd窗口，执行ngnix -t 测试配置文件是否有误，成功执行nginx -s reload。最后浏览器输入 testip:9098/app/，界面出来了。这里多说一句：我的服务器是windows的，之前不知不觉打开了好几个nginx.exe文件，导致运行了多个nginx进程，之前测试的时候只准备运行新项目，可是就算把原来的项目停了，testip:9098怎么打开都是原来的项目，把nginx进程都删除了之后重启，就可以访问新项目。

5、pm2进程守护，执行pm2 start npm --name "xxx" -- run buildd或者pm2 start npm --name "xxx" -- run start，status显示online,但是使用pm2 list,status显示errored，网上搜索了解决方案，没解决这个问题，这个解决方案待更新。

最后：笔记就记录到这。