Smile Comfort

Vercel 環境変数とブランチごとのビルドコマンド設定：開発効率を最大化する秘訣

投稿日：
更新日：

1. Vercelの環境変数とは？なぜ重要なのか？

Vercelの環境変数（Environment Variables）とは、アプリケーションの設定値を外部から注入するための仕組みです。データベースの接続情報、APIキー、各種設定値などをコードに直接記述する代わりに、環境変数として定義することで、セキュリティの向上、設定変更の容易化、環境ごとの設定切り替えなどが可能になります。

1.1 環境変数のメリット

  • セキュリティの向上: APIキーやデータベースのパスワードなどの機密情報をコードに直接記述する必要がなくなるため、誤って公開してしまうリスクを軽減できます。
  • 設定変更の容易化: 環境変数を変更するだけで、アプリケーションの設定を簡単に変更できます。コードを修正して再デプロイする必要はありません。
  • 環境ごとの設定切り替え: 開発環境、ステージング環境、本番環境など、異なる環境に合わせて設定を切り替えることができます。

1.2 環境変数の設定方法

Vercelの環境変数は、Vercelのダッシュボードから設定できます。

  1. Vercelのプロジェクトにアクセスします。
  2. “Settings” > “Environment Variables” を選択します。
  3. “Add Variable” ボタンをクリックし、変数名と値を入力します。

2. ブランチごとのビルドコマンド設定：環境に合わせたデプロイを実現

Vercelでは、ブランチごとに異なるビルドコマンドを設定することができます。これにより、開発ブランチではデバッグモードでビルドし、本番ブランチでは最適化された状態でビルドするなど、環境に合わせたデプロイを実現できます。

2.1 ビルドコマンド設定のメリット

  • 開発効率の向上: 開発ブランチでは、ビルド時間を短縮するために、デバッグモードでビルドすることができます。
  • 本番環境の最適化: 本番ブランチでは、パフォーマンスを最大限に引き出すために、最適化された状態でビルドすることができます。
  • 環境ごとのカスタマイズ: ブランチごとに異なる環境変数を設定することで、環境に合わせたカスタマイズが可能です。

2.2 ビルドコマンドの設定方法

Vercelのビルドコマンドは、vercel.json ファイルまたは Vercel ダッシュボードから設定できます。

vercel.json を使用する場合:

プロジェクトのルートディレクトリに vercel.json ファイルを作成し、以下のように記述します。

{
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/node",
      "config": {
        "buildCommand": "npm run build" // デフォルトのビルドコマンド
      }
    }
  ],
  "routes": [
    { "src": "/(.*)", "dest": "/api/$1" }
  ],
  "env": {
    "NODE_ENV": "production" // デフォルトの環境変数
  },
  "overrides": [
    {
      "target": "production", // 本番環境の設定
      "env": {
        "NODE_ENV": "production",
        "DATABASE_URL": "本番環境のデータベースURL"
      }
    },
    {
      "target": "preview", // プレビュー環境の設定
      "env": {
        "NODE_ENV": "development",
        "DATABASE_URL": "プレビュー環境のデータベースURL"
      }
    }
  ]
}

Vercel ダッシュボードを使用する場合:

  1. Vercelのプロジェクトにアクセスします。
  2. “Settings” > “Git” を選択します。
  3. “Production Branch” を設定します。
  4. “Build & Development Settings” で、ブランチごとのビルドコマンドを設定します。

3. 環境変数とビルドコマンドの組み合わせ：実践的な活用例

環境変数とブランチごとのビルドコマンドを組み合わせることで、より柔軟な環境設定が可能になります。

3.1 開発環境、ステージング環境、本番環境の切り替え

例えば、開発環境ではデバッグモードでビルドし、ステージング環境ではテスト用のAPIエンドポイントを使用し、本番環境では最適化された状態でビルドし、本番用のAPIエンドポイントを使用するといった設定が可能です。

{
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/node",
      "config": {
        "buildCommand": "npm run build"
      }
    }
  ],
  "routes": [
    { "src": "/(.*)", "dest": "/api/$1" }
  ],
  "env": {
    "NODE_ENV": "production",
    "API_ENDPOINT": "https://api.example.com/prod" // 本番環境のAPIエンドポイント
  },
  "overrides": [
    {
      "target": "preview", // プレビュー環境の設定
      "env": {
        "NODE_ENV": "development",
        "API_ENDPOINT": "https://api.example.com/staging" // ステージング環境のAPIエンドポイント
      }
    },
    {
      "target": "development", // 開発環境の設定
      "env": {
        "NODE_ENV": "development",
        "API_ENDPOINT": "http://localhost:3000/api" // 開発環境のAPIエンドポイント
      },
      "config": {
        "buildCommand": "npm run dev" // 開発環境では `npm run dev` を実行
      }
    }
  ]
}

3.2 環境変数を使った動的な設定

環境変数を使って、アプリケーションの挙動を動的に変更することも可能です。例えば、環境変数 FEATURE_FLAG_A が true の場合にのみ、特定の機能を有効にするといった設定ができます。

// 環境変数を参照して機能を切り替える例
const featureFlagA = process.env.FEATURE_FLAG_A === 'true';

if (featureFlagA) {
  // FEATURE_FLAG_A が true の場合に実行する処理
  console.log('Feature A is enabled!');
} else {
  // FEATURE_FLAG_A が false の場合に実行する処理
  console.log('Feature A is disabled!');
}

4. トラブルシューティング：よくある問題と解決策

  • 環境変数が反映されない: Vercelのダッシュボードで環境変数を変更した後、デプロイを再実行する必要があります。
  • ビルドコマンドが実行されない: vercel.json ファイルの構文が正しいか確認してください。また、ビルドコマンドが実行可能な状態になっているか確認してください。
  • 環境変数の優先順位: 環境変数の優先順位は、Vercelダッシュボード > vercel.json > コード内のデフォルト値 となります。

5. まとめ：Vercelの環境設定をマスターして開発効率を向上させよう！

この記事では、Vercelの環境変数とブランチごとのビルドコマンド設定について解説しました。

  • 環境変数は、アプリケーションの設定値を外部から注入するための仕組みです。
  • ブランチごとのビルドコマンドを設定することで、環境に合わせたデプロイを実現できます。
  • 環境変数とビルドコマンドを組み合わせることで、より柔軟な環境設定が可能になります。

Vercelの環境設定をマスターすることで、開発効率を大幅に向上させることができます。ぜひ、この記事を参考に、Vercelの環境設定を自由自在に操り、より快適な開発ライフを実現してください！

次のステップ:

  • Vercelの公式ドキュメントを読んで、さらに深く理解を深めましょう。
  • 実際にVercelで環境変数とビルドコマンドを設定して、動作を確認してみましょう。
  • Vercelのコミュニティに参加して、他の開発者と情報交換をしましょう。

関連リソース: