Nuxt を Netlify でデプロイする

Nuxt を Netlify にどうやってデプロイするのか？

Netlify へのデプロイは、静的に生成された Nuxt サイトを素早くオンラインにするためのあつれきがないオプションです。

このプロセスでは、デプロイ時に nuxt generate(<= v2.12) コマンドを使用して、Nuxt アプリの静的バージョンを dist ディレクトリに構築します。このディレクトリの内容は、本番用のURLにデプロイされます。

はじめに

Netlify のダッシュボードにある "New site from Git" ボタンを押してください。リポジトリホストで認証し、デプロイするリポジトリを選択して、次に進みます。ステップ3の "Build options, and deploy!" が表示されます。

設定:

静的に生成されたサイト向け

nuxt.config に target: 'static' があることを確認してください。

1. デプロイするブランチ： main、または任意のブランチ
2. ビルドコマンド： npm run generate
3. 公開するディレクトリ： dist

クライアントサイドレンダリングのみ向け

nuxt.config に target: 'static' と ssr: false があることを確認してください。

1. デプロイするブランチ： main、または任意のブランチ
2. ビルドコマンド： npm run generate.
3. 公開するディレクトリ： dist

クライアント側のレンダリングについては、Netlify のデフォルトでは、サイトが "404 not found" にリダイレクトされるため、リフレッシュに問題があります。生成されていないページは、SPA モードにフォールバックされ、更新したりリンクを共有したりすると、Netlify の 404 ページが表示されます。これは、生成されなかったページが実際には存在しないためで、実際にはシングルページアプリケーションなので、このページを更新すると、そのページの URL が実際には存在しないため、404 が表示されます。404.html にリダイレクトすることで、Nuxt は SPA フォールバックで正しくページを再読み込みします。

この問題を解決する最も簡単な方法は、generate プロパティ を nuxt.config に追加して、fallback: true を設定することです。そうすると、SPA モードのときに、Netlify の 404 ページではなく、生成された 404.html にフォールバックされます。

export default {
  generate: {
    fallback: true
  }
}

しかし、アプリケーションのヘッダーやリダイレクトを自動的に適用したい場合は、そのためのモジュールがあります。これは、カスタムヘッダー/リダイレクト（_headers または _redirects ファイル）を使用している場合に特に便利です：

netlify-files-module

Netlify のリダイレクトについての詳細は、Netlify ドキュメント を参照してください。

Netlify のリダイレクトに関する簡単なリファレンスは、Divya Sasidharan 氏のブログ記事 をご覧ください。

オプションとして、"Advanced" ボタンで ENV 変数を追加することができます。これらは、別の API 認証情報を入れ替えたりするのに役立ちます。Netlify はまた、default ENV variables を提供しており、Nuxt アプリケーションがビルド時に読み取ることができます。

Deploy site" をクリックすると、すぐにデプロイが開始されます。あなたの Netlify サイトにはランダムな URL が割り当てられ、nuxt generate コマンドを使ってデプロイされます。

そうです！ あなたの Nuxt アプリケーションは、Netlify 上でホストされています！