NuxtJS 部署

最近接手一个 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;

如果这篇文章对你有用,可以点击下面的按钮告诉我

0

发表回复