フルスタックエンジニア目指して

エンジニアリングのことはもちろん、全然関係無い話もします。

Nuxt.jsプロジェクトのデプロイ方法について

最近、Nuxt.jsを趣味でよく触るのですが、いざデプロイしてみようと思ったらいろいろと考えることがあったのでまとめてみます。

デプロイの選択肢

Nuxtのデプロイ方法は、以下の2つがあります。

  • nuxt generateで静的ファイルを生成してデプロイする方法
  • Node.jsアプリとしてデプロイする方法

静的ファイルを生成してデプロイ

すべてのルートをプレレンダリングして予め静的ファイルを生成するため、SEOやページ表示速度面で有利な他、nuxt generateコマンドによって生成されたdistディレクトリをアップロードするだけで配信を開始できます。

また、NetlifyFirebase Hostingといった静的コンテンツ、動的コンテンツ向けの高速で安全性の高いホスティングサービスを利用することができます。

デプロイの作業としては、以下のコマンドでdistディレクトリに静的ファイルを出力して、distディレクトリの中身をドキュメントルートに配置するだけで完了です。

# nuxt generateをyarn経由で実行
$ yarn run generate

Netlifyを使用する場合は、GitHubと連携し、上記の作業をいとも簡単に自動化できます。

Netlify を使ったデプロイ - Nuxt.js

静的ファイルを生成してデプロイする方法の問題点

このデプロイ方法の問題点の1つは、動的なルーティングに対応できないことです。

例えば、ブログアプリにて、投稿ごとにposts/:idというようなページが欲しい場合は、nuxt.config.jsにて、あらかじめ投稿ごとにプリレンダする処理を書く必要があります*1

module.exports = {
  generate: {
    routes () {
      return axios.get(apiBaseUrl + "posts")
        .then((response) => {
          return response.data.map((post) => {
            return '/posts/' + post.id
          })
        })
    }
  },

デプロイ時から投稿が増えても、nuxt generateコマンドが実行されない限りルートは追加されません。

よって、ブログのようにルートが動的に増えるタイプのサービスには不向きなデプロイ方法となります。

Node.jsアプリとしてデプロイする

こちらの方法では、動的ルーティングにも対応することができます。

簡単なデプロイ方法としてはHerokuGoogle App EngineといったNode.jsを使用できるPaaSにデプロイする方法が挙げられます。

Herokuにデプロイ

Herokuにサインアップ後、Heroku CLIをインストールして、以下を実行します。

$ cd /path/to/workspace
$ heroku login
$ heroku git:remote -a <Project Name>

ここまできたら続きはNuxt公式がまとめてくれています。

Heroku へデプロイ - Nuxt.js

まとめ

  • 動的ルート無し => 静的ファイル生成後デプロイ
  • 動的ルート有り => Node.jsアプリとしてデプロイ

静的ファイルとしてデプロイできることの恩恵はでかいので、動的ルートはできるだけ使用しないでアプリを構築できると良いかもしれません。

*1:詳細はhttps://ja.nuxtjs.org/api/configuration-generate/#routesにて解説されています。