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常用命令
#启动单个应用
pm2 start app.js 或pm2 start ./node_modules/nuxt/bin/nuxt.js
#重启应用
pm2 reload appName
# 查看当前正在运行的进程
pm2 list
# 启动所有应用
pm2 start id|name|all
# 重启所有应用
pm2 restart id|name|all
# 停止所有的应用程序
pm2 stop id|name|all
# 关闭并删除所有应用
pm2 delete id|name|all
# 控制台显示所有日志
pm2 logs
# 控制台显示指定编号的日志
pm2 logs id
# 查看信息
pm2 show id|name
# 显示每个应用程序的CPU和内存占用情况
pm2 monit