heroku環境でnuxtのバージョンアップ（2.0から2.14）

環境

• サーバー: heroku
• nuxtのバージョン: 2.0

概要

• nuxtを2.14にバージョンアップしたい
• nuxt 2.13からFull Static Generationが導入されたので試してみる

手順

基本的にnuxtの公式ドキュメントを参考にすれば上手く行くと思いますが、自分の環境での作業を備忘録として残します。
コマンドはnuxtのプロジェクト直下で叩く想定で記載しています。
かなりシンプルな開発環境なので、npmパッケージを色々インストールしていたりするとこう上手くは行かないかもしれません。

1. package.jsonに記述されているnuxtのバージョンを上げる

dependenciesが^2.0.0とかになっているのでバージョンの記載を変更します。
手動でやっても良いですが、他にもパッケージをインストールしていると大変なので、npm-check-updates（ncu）を使うと便利かもです。

$ npm install -g npm-check-updates
npm-check-updatesをグローバルにインストール済なら上記コマンドは不要

$ ncu
$ ncu -u

2. npmパッケージをバージョンアップ

古いnode_modulesを一旦全削除して入れ直す形です。

$ rm package-lock.json
$ rm -rf node_modules
$ npm i

3. nuxt.config.jsに以下記述を追加

Full Static Generationを利用するために記述を追加します。

nuxt.config.js

export default {
  target: 'static',
// 〜〜〜
// 省略
// 〜〜〜
}

4. package.jsonの記述変更

heroku-postbuildがnpm run buildになっている場合は、npm run generateに変更します。

package.json

{
  "name": "xxx",
  "version": "1.0.0",
  "description": "My ace Nuxt.js project",
  "author": "xxx",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "heroku-postbuild": "npm run generate"
  },
// 〜〜〜
// 省略
// 〜〜〜

5. 後はいつも通りherokuにデプロイ

環境によって変わりますが、gitでcommitした後にgit push heroku masterを実行します。