nuxt.js 部署到服务器 + thinkphp5

首先，确保了服务器上面已经有了 node 和 npm 的环境，我这边用的是 ubuntu 的系统

其次，确保 node 的版本问题，我部署的时候就因为 node 版本太低，导致部署不成功，升级 node 的话，可以考虑一下 nvm 工具，具体可自行百度升级方法

下面开始：

1、nuxt 项目本地 npm run build 打包（本地打包）

2、把本地的几个文件，.nuxt\static\package.json\nuxt.config.js 这四个文件夹放到副武器的目录文件下（其实就是 thinkphp 的 public 文件下或者项目根目录下面建一个 nuxt 的文件夹放进去，代表这是前端的项目目录）

运行：

1	npm install -production

（这一步可能会出现缺少各种扩展，就安装就好，我的原因是因为这一步发现 node 版本太低，升级版本之后成功执行以上命令，平滑到下一步）

3、运行:

npm start

此时会出现 nuxt 项目部署成功的代码提示
4、然后是 nginx 的反向代理设置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

upstream web_name {
#nuxt项目监听端口与项目端口一致（76、251的docker环境要把127.0.0.1替换成服务器ip）
server 127.0.0.1:8011;
keepalive 64;
}

server {
listen 80;
server_name web.baidu.com;

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://web_name; #反向代理(这边的名字要和外面的反向代理名字一样)
}
}

监听的 8011 端口，在 package.json 可以设置，而且端口号一定要一样：

1
2
3
4
5
6

"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "8011"
}
}

我这里是 80 端口和 8011 端口反向代理的，

5、在上面第 3 步成功之后，能访问网站，关掉之后就不能访问了，是因为没有配置进程一直存在，这个时候需要 node 的进程管理工具 pm2 来管理此进程常驻内存

6、全局安装 pm2:

1	npm install -g pm2

7、pm2 启动 nuxt 项目：

1	pm2 start /node_modules/nuxt/bin/nuxt.js --name 项目名称 (项目目录的node_modules包)

注意：xxx 是项目名称，即 package.json 中的 name

8、启动完之后通过以下命令查看 pm2 启动的所有项目列表：

pm2 list

通过以下命令保存设置：

pm2 save

此时关闭 ssh 端，也能正常访问网站了～

=================================== 我是分割线，写在最后 ================================

有时候部署失败（比如我自己），会找别的方式，服务器上 build 失败，就在本地 build 再上传，在.gitignore 里把.nuxt 去掉、并把 dist 改为 /dist，然后本地执行 yarn build，成功之后再上传到 github 上，检查一下.nuxt 是否有上传上去。

之后在服务器上把代码拉下来、安装一下依赖，执行 nuxt start 就可以了。

这里还有个坑，就是为什么要把.gitignore 里的 dist 改为 /dist？

/dist 这个文件夹是执行 nuxt generate 后生成的，用来做静态应用部署的，这部分就跟通常情况下的.nuxt 一样是不应该加入到版本控制里的，但由于 nuxt build 之后，在.nuxt 里也会生成一个 dist 文件夹，我们希望 gitignore 的只有 /dist 而不是 /.nuxt/dist，因此猜需要做出这里的修改。

nuxt 部署
最后，我们使用 pm2 来部署 nuxt。