Netlify へデプロイするには？

Netlify へのデプロイは 静的に生成された Nuxt.js サイトを迅速にオンライン化するための低摩擦オプションです。

このプロセスの中核は、デプロイ中に Nuxt.js アプリケーションの静的なバージョンを dist ディレクトリ内にビルドする nuxt generate コマンドです。 このディレクトリの内容は、プロダクション URL にデプロイされます。

はじめに

Netlify ダッシュボードの "New site from Git" ボタンを押下します。レポジトリホストで認証を行い、デプロイするレポジトリを選択、続行します。ステップ 3 : "ビルドオプションとデプロイ！" に進んでください。

操作：

静的に生成されたサイトの場合

1. ブランチをデプロイする： master もしくはデプロイしたいブランチ
2. ビルドコマンド： npm run generate
3. 公開ディレクトリ： dist

SPA モードで生成されたサイトの場合

1. ブランチをデプロイする: master もしくはデプロイしたいブランチ
2. ビルドコマンド: npm run build
3. 公開ディレクトリ: dist

シングルページアプリケーションの場合、Netlify は再読み込み時にデフォルトで *"404 not found"* にリダイレクトしますが、リダイレクト設定 を行う事で防げます。 また、シングルページアプリケーションのヘッダーとリダイレクト両方の設定をサポートする nuxt-netlify モジュールを利用する事もできます。

Divya Sasidharan が、Netlify のリダイレクトに関するリファレンスを blog に公開しているので参考にしてください。

オプションで、"Advanced" ボタンを使用して ENV 変数を追加することができます。これらは代替 API 資格情報などを交換する際に役立ちます。Netlify はまた、ビルド時に Nuxt.js アプリケーションで読み取れる デフォルトの ENV 変数 を提供します。

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

やりました！これで Nuxt.js アプリケーションは Netlify でホストされるようになりました！