Nuxt.js项目部署——nuxt+node+pm2+nginx_小伍同学吖

大大的周 02-07 7733

1、安装nuxt.js

npm安装或npx（npx 在 NPM 版本 5.2.0 默认安装了，npm安装node.js默认安装了）

$ npn create-nuxt-app <项目名>

?或者用 yarn ：

$ yarn create nuxt-app <项目名>

细节可以参考官方文档?Nuxt.js 中文网?

2、部署（重点）

nuxt.js部署方式根据官方有分服务端渲染部署、静态部署、单页面部署；

本次主要讲的是服务端渲染部署（静态部署没搞明白，单页面部署跟vue一样）?

?（1）服务器环境配置

a、安装node.js(根据服务器环境选择安装包)?下载 | Node.js 中文网

b、安装nginx（这个可以自行百度安装方式）nginx: download?（Stable version 是稳定版，一般选择这个下载，mac下载可以直接用brew安装）

c、全局安装pm2

npm install -g pm2 或 yarn install -g pm2

（2）项目打包

npm run build

打包完成后将 .nuxt static nuxt.config.js package.json 放到服务器中（放哪里自己定，方便自己访问就行了）?

（3）在服务器中进入到项目

cd 项目文件夹

初始化项目安装依赖包（个人觉得使用yarn会比npm快）

npm install 或 yarn install

运行项目（查看是否正常运行，如果正常，就下一步开启pm2守护，如果不正常，查看错误原因并解决，我运行的时候是没有错的，所以暂时还不知道会出现什么错误）

npm start

?（4）开启pm2（这个是重点，因为正常npm start的话窗口是不能关的，开启pm2的话就可以关闭窗口在后台运行）

这里我踩了个很大的坑，我本地mac环境部署的话是可以直接用命令?pm2 start npm -- run start 来启动，但是到了服务器上就不行，查了很多资料，都没搞明白什么回事，后面了解到 pm2 satrt 是执行路径./node_modules/nuxt/bin/nuxt.js，所以就有如下启动方式

pm2 start ./node_modules/nuxt/bin/nuxt.js -- start

还有一种就是配置ecosystem.config.js启动配置（在项目根目录上新建?ecosystem.config.js，然后配置如下）

// ecosystem.config.js module.exports = { apps: [ { name: 'NuxtAppName', exec_mode: 'cluster',//零停机部署就是使用 PM2 的 cluster模式 instances: 'max', // Or a number of instances script: './node_modules/nuxt/bin/nuxt.js',//nuxt start的执行路径 args: 'start', }, ], }

配置好直接启动?ecosystem.config.js

pm2 start ecosystem.config.js

?查看进程看看当前进程是否正常

pm2 list

更新程序的时候用?pm2 reload [appName]或者直接使用watch监听（--watch：监听应用目录的变化，一旦发生变化，自动重启。如果要精确监听、不监听的目录，最好通过配置文件,具体配置文件还在研究当中）

pm2 start NuxtAPPName --watch

重启停止

pm2 restart NuxtAPPName pm2 stop NuxtAPPName

（4）配置nginx反向代理

nginx安装好打开文件nginx.conf进行配置

upstream nodenuxt { server 127.0.0.1:3000; #nuxt项目监听端口 keepalive 64; } server { listen 80; server_name yoursite.com; location / { root html; index index.html index.htm; proxy_pass http://nodenuxt; } }

保存配置启动nginx这样子就可以用yoursite.com访问你的nuxt项目了

这样子整个nuxt.js项目就部署完成了。

附上nginx多端口反向代理

server { listen 80; server_name yoursite.com; location /a { proxy_pass http://127.0.0.1:8001/; } location /b { proxy_pass http://127.0.0.1:8002/; } location /c { proxy_pass http://127.0.0.1:8003/; } }

按上面的配置，输入?yoursite.com/a?的确看到成功代理了?ip:8001?的应用，/b就是8082 ?

pm2常用命令