# Vercel：Gitに.envを含めない場合の環境変数設定 > 環境変数、Development／Preview／Production、新しいデプロイメント、そしてNext.jsでブラウザーに秘密情報を渡さずにキーを安全に確認する方法。 Source: https://ailoot.ai/blog/ja/vercel-environment-variables/ Canonical: https://ailoot.ai/blog/ja/vercel-environment-variables/ Language: ja Publisher: Ailoot (https://ailoot.ai/) Translation: guide-229 Revision: sha256-ae9e44f88d97d0010f9b05efb3d69a7cd8ec953c4d4b0260c9b020d07178b29f
重要なポイント 秘密情報を含む`.env`ファイルがGitにない場合は、Vercelプロジェクトの**Environment Variables**セクションに必要な変数を追加します。環境を選択し、設定を保存して、新しいデプロイメントを作成してください。すでにデプロイ済みのバージョンは変更されません。Next.jsでは、秘密鍵に`NEXT_PUBLIC_`プレフィックスを付けないでください。ビルド時にその値がブラウザーコードに含まれてしまいます。
このガイドは、すでにVercelでホストされているプロジェクトを対象としています。プロジェクトの設定にアクセスでき、アプリケーションがどの変数を読み取るかを理解している必要があります。以下の例はNext.jsに適用されます。別のフレームワークの変数名をそのまま使えるとは限りません。このガイドは公式ドキュメントに基づいており、実際のアカウントではテストされていません。 [Ailootの実用的な利用情報はドキュメントで確認できます](https://ailoot.ai/docs/)。 ## .envをGitに追加する必要がない理由 環境変数とは、アプリケーションがソースコードとは別に受け取る、名前と値を持つ設定です。たとえば、`SERVICE_API_KEY`という名前を使うと、プログラムは外部サービスのキーの値にアクセスできます。キーそのものをガイドやエージェントとの会話、リポジトリに記載しないでください。 Next.jsは、ローカルの`.env*`ファイルから変数を読み込めます。ただし、ローカルファイルとVercelのプロジェクト設定は別々の場所です。ファイルをリポジトリにプッシュしない場合は、ホスティングプラットフォームにも別途値を設定してください。標準の`create-next-app`テンプレートでは、`.env`ファイルが`.gitignore`に追加されます。Next.jsのドキュメントも、それらをリポジトリにプッシュすることはほとんどの場合避けるべきだと警告しています。 ソースファイルに何を保存できるかまだ不明な場合は、[AIで構築したプロジェクトのセキュリティチェック](https://ailoot.ai/blog/ja/vibe-coding-security/)から始めてください。ここでは、特定のVercelデプロイメントの設定をどこに登録するかという、より限定された質問を扱います。 ## まず、アプリケーションが変数を読み取る場所を確認する 値を入力する前に、秘密情報そのものを含めず、**名前**の一覧を作成してください。各名前について、どの環境で使うか、変数を読み取るコードがどこで実行されるか、値がいつ必要になるかの3点を確認します。 | 確認する項目 | 選択肢の例 | 重要な理由 | |----|----|----| | Vercel環境 | Development、Preview、Production | 確認対象のバージョンに設定を適用する必要があるため | | 読み取り場所 | サーバーまたはブラウザー | 秘密鍵をクライアント側のコードに含めてはならないため | | 読み取り時点 | ビルド時またはサーバー関数の実行時 | Next.jsでは、公開値はビルド時に固定されるため | **Development**環境はローカル開発用です。**Preview**はプレビュー用デプロイメント、**Production**は公開中のメインバージョン用です。Previewでは、特定のGitブランチ向けに設定できます。同じ名前の一般的なPreview設定は、そのブランチ固有の設定で上書きされます。 Next.jsプロジェクトでは、`NEXT_PUBLIC_`が付いていない変数は、デフォルトでサーバーから利用できます。`NEXT_PUBLIC_`プレフィックスを付けると、その値をブラウザーに配信するJavaScriptに埋め込めます。秘密ではないバージョンラベルなど、明示的に公開する設定には適していますが、秘密のAPIキーには使えません。このプレフィックスがなくても、アプリケーションコードから秘密情報を手動でクライアントに返してはいけません。 フレームワークがまだ特定できていない場合は、プロジェクトファイルを確認して特定するようエージェントに依頼してください。[AstroとNext.jsの比較](https://ailoot.ai/blog/ja/astro-vs-nextjs-for-ai-built-sites/)は違いを理解する助けになります。`NEXT_PUBLIC_`のルールをすべてのReactアプリケーションに適用できるわけではありません。 ホスティングの設定は、AIエージェントを使ったアプリケーション開発に含まれる作業の一つです。 ## Vercelプロジェクトに変数を追加する方法 公式ダッシュボードで、手順を自分で行ってください。フォームに入力させるために、実際のキーをエージェントに渡さないでください。値が見えるスクリーンショットも添付しないでください。 1. Vercelダッシュボードを開き、**正しいプロジェクト**を選択します。リポジトリ名が一致することだけに頼らず、開く予定のアプリケーションを設定していることを確認してください。 2. プロジェクト設定のサイドバーで**Environment Variables**を開きます。 3. **Name**に、アプリケーションが読み取る名前を入力します（例：`SERVICE_API_KEY`）。これは名前の例です。コードが別の名前を想定している場合は、その名前を正確に入力してください。 4. **Value**に、認証情報の保管場所から値を入力します。ソースコード、チャット、確認ログには記載しないでください。 5. この設定が必要な環境を選択します。プレビュー版の確認には**Preview**、メインバージョンには**Production**を使います。一つの秘密情報をすべての環境に自動的に割り当てないでください。 6. Previewの設定が特定のブランチに適用される場合は、選択したブランチと、同じ名前の上書き設定を確認します。 7. **Save**をクリックします。 Vercelは、ビルド時とサーバー側でVercel Functionsを実行するときの両方で、プロジェクト変数を利用可能にします。ただし、Vercel内で利用できるからといって、ブラウザーに送信してよいとは限りません。それはアプリケーションコードとフレームワークのルールによって決まります。 ## Saveの後に新しいデプロイメントが必要な理由 変数を保存しても、既存のデプロイメントは変更されません。Vercelのドキュメントでは、新しい設定を使用中のバージョンに反映するには、プロジェクトを再デプロイする必要があるとされています。 Gitを使っている場合、**Production Branch**で指定されたブランチにコミットをプッシュすると、新しいProductionデプロイメントを作成できます。別のブランチにプッシュすれば、Previewデプロイメントを作成できます。メインブランチが常に`main`だとは限りません。プロジェクトの設定を確認してください。これは通常の合意済みプロジェクトリリースとして行い、秘密ファイルをコミットに追加しないでください。 デプロイメントを開始したら、ビルドが完了するまで待ち、**新しい**デプロイメントのURLを開きます。URL、環境、ブランチを記録してください。個別の古いデプロイメントのURLを確認しても、新しい設定は反映されません。 Next.jsには、もう一つ条件があります。`process.env.NEXT_PUBLIC_RELEASE_LABEL`のような参照は、`next build`の実行時に値へ置き換えられます。値はビルド後に固定されます。新しいビルドを行わずに設定を変更しても、すでに配信済みのクライアント側JavaScriptは書き換わりません。 ## キーを公開せずに結果を確認する方法 まず、`NEXT_PUBLIC_RELEASE_LABEL`という名前で、`preview-check`という値を持つ、明示的に秘密ではないラベルを例として使います。これらは名前とテキストの例であり、キーでも、ここで実施したテストでもありません。Next.jsアプリケーションがこの変数を`process.env.NEXT_PUBLIC_RELEASE_LABEL`で直接読み取る場合、新しいビルドの後、意図したインターフェースの場所にラベルを表示できます。この確認で分かるのは、公開設定が渡されたことだけです。 秘密鍵は別の方法で確認します。その値、一部、長さ、`process.env`全体を出力しないでください。変数の内容を返す公開URLも作成しないでください。まずサーバー上で設定が「存在／不在」かだけを確認し、その後、サービスを使うアプリケーション関数を別途確認します。設定が存在しても、キーが有効で、必要な権限を持っているとは限りません。 秘密情報を含めずに、次の結果を記録できます。 - プロジェクト、環境、ブランチが、設定時に選択したものと一致している。 - 変数を保存した後に作成された、新しいデプロイメントのURLを確認している。 - ビルドが完了し、必要なアプリケーション関数が安全なテストデータで実行された。 - 秘密情報がブラウザー、APIレスポンス、ログ、会話に露出していない。 関数が決済、メッセージ送信、または結果を伴うその他の処理を行う場合は、サービス指定のテストモードを使用してください。設定を確認しても、それだけで実際の処理が許可されるわけではありません。 ## 値がまだundefinedの場合に確認すること `undefined`は、そのアクセス箇所で値が取得できなかったことを意味します。すべての設定を一度に変更せず、名前、環境、バージョンの順に確認してください。 | 症状 | 確認すること | |----|----| | ローカルでは動くが、Previewでは動かない | プロジェクトのPreview設定にその名前があるか、別のブランチが選択されているか | | Previewでは動くが、Productionでは動かない | Productionにその名前が設定されているか、Saveの後に新しいメインバージョンが作成されたか | | Previewの特定ブランチだけ動作が異なる | 同じ名前の値がそのブランチに設定され、一般設定を上書きしているか | | サーバーでは変数を認識するが、ブラウザーでは認識しない | Next.jsでは、公開されていない変数なら想定どおりです。秘密鍵をブラウザーに移さないでください | | 公開用のNext.jsラベルに古い値が表示される | 必要な値で新しいビルドを行ったか、開いたURLがそのデプロイメントに属しているか | | 公開用の名前は正しいが、置換が機能しない | コードが`process.env[varName]`を使って動的に読み取っていないか。Next.jsはこの形式の参照をインライン化しません | 名前、環境、新しいバージョンを確認しても関数でエラーが出る場合、変数が原因だとは限りません。秘密情報を含む診断データを公開せず、サーバー側コードの具体的なエラーを調査してください。このガイドは、あらゆるHTTP 500レスポンスの解決を保証するものではありません。 自分のサーバーへの移行には別の手順が必要です。[Coolifyを使ったプロジェクトのデプロイガイド](https://ailoot.ai/blog/ja/coolify-claude-code-deploy/)を参照してください。Vercelのボタン名や設定手順は適用されません。
### 出典 - [Vercelの環境変数](https://vercel.com/docs/environment-variables) - [Vercel環境変数の追加と管理](https://vercel.com/docs/environment-variables/managing-environment-variables) - [Next.jsの環境変数](https://nextjs.org/docs/app/guides/environment-variables)
[Ailootに移動](https://ailoot.ai/)。 ## Vercel：Gitに.envを含めない場合の環境変数設定：よくある質問 ### Vercelで保存した環境変数がundefinedのままなのはなぜですか？ プロジェクト、環境、ブランチ限定の範囲を確認し、新しくデプロイします。設定を保存しただけで、既存のデプロイに変数が追加されるわけではありません。 ### 秘密情報にNEXT_PUBLIC_を付ければNext.jsから使えますか？ 秘密情報には付けないでください。その接頭辞は、ビルド時に値をブラウザー用コードへ入れます。サーバー側に保管し、キーそのものを出力せずに存在を確認してください。 ## Ailoot · 企業とそのプロジェクト群 Ailootは、蓄積した運営経験、幅広い顧客基盤、安定したサービス、継続的なKPI管理を基盤としています。 企業とそのプロジェクト群：数百万の顧客、毎月数十億規模の売上。 Ailootはこの運営経験を、お客様の製品、エージェント、アプリケーション、自動化でAI機能を利用するためのAPIアクセスに活かしています。