Nuxt.jsをVercelでデプロイする手順 | 初心者向けガイド

Nuxt.js デプロイ Vercel 手順：初心者向けのステップバイステップガイド

Nuxt.jsで構築したWebアプリをVercelにデプロイする際、具体的な手順と注意点を理解しておくことが重要です。本記事では、無料プランでのデプロイ方法や環境変数管理のコツなど、初心者でも実践できるステップバイステップガイドを解説します。読者の疑問に直接応える情報を提供し、スムーズなデプロイを目指しましょう。

Vercelアカウント作成でデプロイ準備を整える

Vercelの無料プランは個人や小規模プロジェクトでも十分活用でき、本番環境構築が可能です。アカウント登録からプロジェクト設定まで、以下のステップで進めましょう。

無料プランの利用方法

Vercelの無料プランでは、1つのプロジェクトに対して最大3つのデプロイ環境を提供し、静的生成（Static Generation）とSSR（Server-Side Rendering）どちらにも対応しています。

登録手順:

1. Vercel公式サイト（https://vercel.com/）にアクセスし、「Sign Up」を選択します。
2. GitHubやGoogleアカウントでログインします。
3. ユーザー名とパスワードを設定してアカウント作成を完了させます。

無料プランは、個人開発者向けに最適化されており、小規模なプロジェクトでもコストを気にせず本番環境構築が可能です。

GitHubとの連携で自動デプロイを実現する

GitHubとの連携を行うことで、コードのプッシュ時に自動でVercelへデプロイできるようになります。この設定はCI/CDの一環として非常に重要です。

デプロイ設定手順

1. Vercelダッシュボードの「New Project」を選択します。
2. GitHubリポジトリを検索し、対象プロジェクトを選択します。
3. 「Import」ボタンをクリックして連携を完了させます。

この設定により、git push後の自動デプロイが可能になります。

nuxt.config.tsでのビルド設定とSSRの有効化

Nuxt.jsアプリケーションをVercelにデプロイする際には、プロジェクトの構成ファイル nuxt.config.ts が正しく設定されている必要があります。特に、SSR対応やビルドターゲットの指定がエラーの原因となるケースがあります。

build.targetとssrの違い

SSRモードでの設定例

注意事項: target: 'static'でSSRを無効化した場合、VercelのSSR機能が動作しないため、動的ページでは404エラーになる可能性があります。

vercel.jsonファイルの作成と設定

Vercelはvercel.jsonというプロジェクト構成ファイルを読み取り、デプロイ時に適切な処理を行います。基本的な設定例を以下に示します。

最新バージョンに合わせたvercel.json設定

この設定は、Vercel CLIがNuxt.jsプロジェクトを正しく認識するために必要です。最新バージョンで問題が発生した場合は、公式ドキュメントを参照してください。

静的アセットの配置場所

静的ファイル（画像やCSS）はpublic/ディレクトリに格納する必要があります。このディレクトリ内のファイルはVercelによって自動的に配信されるため、URLで直接アクセス可能です。

publicディレクトリへの配置手順

1. public/フォルダを作成します（なければ作成）。
2. 静的アセットをpublic/に配置します（例: public/icon.png）。
3. デプロイ後、URLでアクセス可能です（例: https://your-domain.com/icon.png）。

vercel CLIとGitHub Actionsによる自動デプロイ

Vercel CLIを使用することで、ローカルから簡単にデプロイが可能です。また、GitHub Actionsを活用すれば、CI/CDによる自動化も実現できます。

vercel CLIの初期設定手順

1. npm install -g vercelでCLIをインストールします（※プロジェクト内での管理が望ましいため、npm install --save-dev vercelとすることも検討してください）。
2. vercel loginでアカウントにログインします。
3. vercelコマンドでプロジェクトをデプロイします。

GitHub Actionsのワークフロー設定

npm install -g vercelではなく、プロジェクト内にインストールし、npxで実行する方法が依存関係管理と整合性が高いです。

環境変数の安全な管理方法

本番環境では、シークレット情報（APIキーなど）の漏洩を防ぐ必要があります。Vercelには環境変数を管理する仕組みが用意されていますが、NEXT_PUBLIC_接頭語はNext.js特有であり、Nuxt.jsでは使用しないことが推奨されます。

環境変数設定手順

1. プロジェクトの「Settings」タブを開きます。
2. 「Environment Variables」セクションで、変数名と値を入力します（例: API_KEY=your-secret-key）。
3. 「Save Changes」をクリックして登録します。

NEXT_PUBLIC接頭語の注意点

• NEXT_PUBLIC_はNext.js向けであり、Nuxtでは使用しないことを強くお勧めします。
• 非常に重要ですが、公開するべきでない情報（APIキーなど）は決してNEXT_PUBLIC_に含めないでください。

よくあるエラーとその解決策

デプロイ時のエラーは、設定ミスやファイル構成の不備が原因である場合が多いです。代表的な例を解説します。

モジュール解決失敗

対処法:

1. npm install some-moduleで依存関係を確認します。
2. vercel.jsonのbuilds設定が正しいか再確認します。
3. 必要に応じて、Vercel CLIを使用してデプロイログを確認します（vercel logs）。

静的ファイル配信ミス

対処法:

1. public/ディレクトリ内のファイルが正しく配置されているか確認します。
2. vercel.jsonのroutes設定を再構成し、ルーティングミスを修正します。
3. デプロイ後も古いキャッシュが残っている場合は、Vercelダッシュボードで「Clear Cache」を使用します。

まとめ

• VercelとNuxt.jsの組み合わせは、無料プランでも簡単に本番環境構築が可能です。
• nuxt.config.tsや vercel.json の設定ミスは、エラーの主な原因となるため注意が必要です。
• 環境変数管理には シークレットの登録 と NEXT_PUBLIC接頭語の避ける が重要です。
• エラー対応では ロギング機能 や キャッシュクリア の活用が効果的です。

参考情報

• Vercel公式ドキュメント
• Nuxt.js公式サイト