環境
- サーバー: 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
exportdefault{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
を実行します。