Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8691

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

$
0
0

環境

  • サーバー: 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-postbuildnpm 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を実行します。


Viewing all articles
Browse latest Browse all 8691

Trending Articles