最近接手一个 NuxtJS 项目,目前是打包成静态页面上线的(generate命令),没有用到 node server(但项目中引用了 Koa 框架),现在要从其他系动态统获取数据,需要 node server 环境,于是研究了一下部署的流程;
1、打包
本地打包,要先执行下面的命令
yarn build
// 或
npm run build
2、上传文件到服务器
将 .nuxt文件夹、nuxt.config.js、package.json、static文件夹、server文件夹 传到服务器的发布目录下;
其中 server文件夹 不一定有,如果创建项目时选择了服务端框架,比如 Koa、Express,会自动生成 sever 文件夹,package.json 中的 dev 和 start 命令有调用 server/index.js 的入口,这时候就要带着;
3、安装依赖并启动
npm install // 或 yarn install
npm run start // 或 yarn start
执行上面两句代码,服务器就启动了,实际生产环境中,安装完依赖,不可能直接 npm run start 启动服务,肯定会用 pm2 等服务管理工具来启动;
pm2 支持 npm 启动脚本,“npm run js脚本名称”的命令,用 pm2 启动,格式为:
pm2 start npm -- run js脚本名称
所以如果想用 PM2 来管理 node 服务,则安装完依赖后执行下面的代码(此时不需执行 npm run start 这句)
pm2 start npm --name app-name -- run start
// 或
pm2 start --name app-name npm -- run start // 这样写更清楚一些
注意 run 前有空格,name 前没空格;
其中,- -name 是 pm2 的参数,指定服务名称,app-name 是实际的名称;
*命令中的 npm — run start 不能换成 yarn — start
*4、其他
上面只是一种部署方案,还有一种比较常用的是利用 Git Hooks 添加自动化编译部署操作:
大体流程是这样:在项目的其他分支开发完新功能,测试没问题,上线时,不在本地 build,直接将代码合并到 master 分支,然后 push 到 origin,这时会触发 Git Hooks 事件,系统自动执行 npm run build,然后再用 pm2 启动;
不管哪种方式,整个流程中只 build 一次,特别是第一种方案中,build 好的代码传到服务器,千万不要再执行 npm run build;.nuxt 文件夹中有一个 dist 文件夹,build 之后,里边的文件就清空了,此时 pm2 能正常启动,访问页面才报 server error;