Nuxt.js部署应用的方式

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Nuxt.js 提供了两种发布部署应用的方式：服务端渲染应用部署和静态应用部署。

静态应用部署就不说了，主要说说服务端渲染应用部署。

官方部署方式

关于服务端渲染应用部署，官方文档是这么写的：

部署 Nuxt.js 服务端渲染的应用不能直接使用 nuxt 命令，而应该先进行编译构建，然后再启动 Nuxt 服务，可通过以下两个命令来完成：

nuxt build

nuxt start

推荐的 package.json 配置如下：

{

  "name": "my-app",

  "dependencies": {

    "nuxt": "latest"

  },

  "scripts": {

    "dev": "nuxt",

    "build": "nuxt build",

    "start": "nuxt start"

  }

}

提示：建议将 .nuxt 加入 .npmignore 和 .gitignore 文件中。

意思是说 .nuxt 不加入到版本控制，每次服务器从gitlab上拉代码后先执行 nuxt build 生成 .nuxt 文件夹，然后再执行 nuxt start 来启动服务。

坑

每次在服务器上执行 nuxt build ，总是有如下报错，并且jenkins会随之挂掉。

error Command failed with signal "SIGKILL".

看了一下服务器监控发现 build 的时候cpu和内存飙升，尤其是内存。。。

好吧，我买的是阿里最低配的ECS，升级配置是最后的选择，在这之前只能另辟蹊径。

既然服务器上 `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 ，因此猜需要做出这里的修改。

我们使用pm2来部署nuxt。