Contents
Nuxt 3で静的サイト生成する際のVercelデプロイ手順
Nuxt 3を使用して静的サイトを構築し、Vercelにデプロイする際は、nuxt.config.tsでのstatic generate設定や環境変数管理といった工程が不可欠です。本記事では、導入からCI/CDまでの一連の手順を具体的に解説します。
Nuxt 3の静的サイト生成設定
Nuxt 3で静的サイトを構築するには、nuxt.config.tsでのstatic generate設定が必須です。この工程を正しく行うことで、Vercelへのデプロイが円滑になります。
static generateの基本構成
Nuxt 3のプロジェクトでは、nuxt.config.tsに以下のようにstatic: trueを指定します。これにより、アプリケーション全体が静的ファイルとして生成されます。
|
1 2 3 4 5 6 7 8 9 10 |
export default defineNuxtConfig({ modules: ['@nuxtjs/robots', '@nuxt/image'], static: { generate: { fallback: false, routes: ['/about', '/contact'] } } }) |
注意点: fallbackは404ページの動作を制御し、routesで静的に生成するパスを指定します。
必要モジュールのインストール
静的サイト構築に必要なモジュールとしては、以下が挙げられます。
- @nuxtjs/robots: サイトマップやロボット.txtの自動生成
- @nuxt/image: 静的画像の最適化とCDN利用支援
インストールはnpmまたはyarnで行います。
|
1 2 |
npm install @nuxtjs/robots @nuxt/image |
Vercelプロジェクトの初期設定
Vercelへのデプロイには、プロジェクト作成時の設定項目が重要です。特にビルドコマンドと出力先指定を間違えるとエラーになるため、注意が必要です。
プロジェクト作成時の必須項目
Vercelのダッシュボードでプロジェクトを作成する際は、以下の情報を入力します。
- リポジトリ: GitHubやGitLabなどからコードを連携
- デプロイ環境: リアルタイムデプロイまたはCI/CDによる自動デプロイを選択
例: GitHubリポジトリと連携し、リアルタイムデプロイを有効にすると、プッシュ時に即座に反映されます。
ビルドコマンドと出力先指定
Vercelのプロジェクト設定で、ビルドコマンドと出力先ディレクトリを設定します。Nuxt 3では以下の設定が推奨です。
| 項目 | 値 | 補足 |
|---|---|---|
| Build command | npx nuxt build |
静的ファイルのビルドを実行 |
| Output directory | .output |
生成された静的ファイルが配置される場所 |
環境変数の統合方法
ローカル開発と本番環境で異なる環境変数を管理するには、.envファイルとVercelのSecrets設定が必要です。
.envファイルの構成ルール
Nuxt 3では.envファイルに環境変数を定義します。変数名はVITE_で始めることが推奨されます（クライアント側での利用可）。
|
1 2 |
VITE_API_URL=https://api.example.com |
Vercelでの環境変数設定
Vercelのプロジェクト設定画面からSecretsを登録します。サーバーサイドで使用する変数はVERCEL_で始めてください。
- Vercelダッシュボード → プロジェクト → Settings → Environment Variables
VITE_API_URLなど必要な変数を追加- 環境別に設定を切り替え（Production/Developmentなど）
デプロイ後のキャッシュ制御
Vercelでは、静的ファイルのEdge Cacheを設定することで、リソースの読み込み速度を向上させられます。
Edge Cacheの設定手順 (2023年10月版)
UIパス: Vercelダッシュボード → プロジェクト → Project Settings → Edge Functions にアクセスし、以下の操作を行います。
- キャッシュポリシーの選択:
Cache-Controlヘッダーをpublic, max-age=86400, immutableなど設定可能- キャッシュ有効期限:
- デフォルトでは24時間（1日）が推奨。必要に応じて変更
キャッシュ無効化の実装 (修正済み)
特定のページにキャッシュを適用しない場合、nuxt.config.tsで以下のように設定します。
注意: モジュール定義が重複していたため、
@nuxtjs/robotsは1回のみ記述しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
export default defineNuxtConfig({ modules: ['@nuxtjs/robots', '@nuxt/image'], // 重複を解消 static: { generate: { fallback: false, routes: ['/about', '/contact'] } }, vite: { define: { __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false, // Vueのhydration警告無効化 } } }) |
CI/CDによる自動デプロイ構成
リポジトリのプッシュ時に自動でVercelにデプロイするには、GitHub Actionsと連携させる必要があります。
GitHub Actionsとの連携 (v3.0.0推奨)
最新バージョン:
vercel-actions/deploy@v3.0.0を推奨（2023年10月時点の公式リポジトリ確認）
.github/workflows/deploy.ymlを作成し、以下の内容を記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
name: Deploy to Vercel on: push: branches: - main jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Install dependencies run: npm install - name: Build project run: npx nuxt build - name: Deploy to Vercel uses: vercel-actions/deploy@v3.0.0 # 更新されたバージョンを指定 with: token: ${{ secrets.VERCEL_TOKEN }} |
Vercel APIトークンの扱い
GitHub ActionsでVercelにデプロイするには、APIトークンをシークレットとして保存します。
- Vercelダッシュボード → Account Settings → API Tokens
- 新しいトークンを作成し、
VERCEL_TOKENと名前をつける - GitHubリポジトリのSettings → Secrets & variables → Actionsにトークンを登録
結論: 静的サイトデプロイの要点再確認
Nuxt 3による静的サイト生成とVercelとの連携は、以下のようなステップで実現されます。
- static generate設定:
nuxt.config.tsで静的ファイル出力を有効化 - モジュール管理: 必要なライブラリを適切にインストール・設定
- Vercel初期構成: ビルドコマンド・出力先ディレクトリの明確化
- 環境変数統合:
.envファイルとVercel Secretsによるセキュアな管理 - Edge Cache設定: パフォーマンス向上のためのキャッシュポリシー設計
- CI/CD自動化: GitHub Actionsで継続的デプロイを実装
上記手順は、ローカル開発から本番環境に至るまでの一貫性のあるワークフローを構築するために不可欠です。特にキャッシュ無効化やEdge Cacheの設定には注意が必要で、誤った配置はパフォーマンスやセキュリティに悪影響を及ぼします。