どんな話？
ファイルに直接書かれた鍵（APIキー）を外して、Vercel の環境変数にしまう回。Environment Variables に鍵の名前と値を入れ（秘密なら Secret）、ファイルから鍵を消して裏側の処理で名前から呼び出す形にし、保存して出し直します。金庫にしまっても、ブラウザ側で使えば見える。一度 GitHub に保存した鍵は、作り直します。手順は公式ドキュメントに沿っていて、鍵を保存するところまでは試していません。
この記事でわかること
- STEPは3つ。Vercel の Environment Variables に鍵の名前と値を入れる・ファイルから鍵を消して、裏側の処理で名前から呼び出す形にする・保存して出し直す。黒い画面（ターミナル）は使わない
- 金庫（環境変数）にしまっても、ブラウザ側で使えば見える。Next.js では、名前が NEXT_PUBLIC_ で始まる環境変数はブラウザ側に渡すための印なので、秘密の鍵には付けない
- 2026年8月24日の公式のお知らせで、環境変数は Config と Secret の2つの型に分かれた。APIキーやパスワードのような鍵は Secret に入れる。画面に Sensitive と出ていたら、Secret と同じものと読みかえる
- 環境変数への変更は、前のデプロイには反映されない。金庫の中身だけを変えたときは、Deployments から Redeploy を選び、Use existing Build Cache のチェックを外す
- 一度でも GitHub に保存した鍵は、もう漏れたものとして扱う。発行元で新しい鍵を作る。すでに使われていそうなら、止まる時間が出ても、古い鍵を先に止めるほうが安全
- 環境変数は、無料プランでも追加料金なしで使える。1回のデプロイで使える環境変数は、合わせて64KBまで（Node.js などの場合）
こんな人に
- AIに作ってもらったコードに、APIキーがそのまま書かれている人
- 「環境変数」「.env」という言葉で手が止まった人
- 鍵を GitHub に保存してしまったかもしれない人
この話のTIPS
- 注意金庫（環境変数）にしまっても、鍵をブラウザ側で使えば、中身は誰でも見られます。しまう場所と一緒に、「鍵を使う場所」も変える必要があります。
- コツ公式の説明では、古いデプロイのURLは、古い鍵を使い続けます。古い鍵を止めたあとに古いURLを開くと、鍵を使う部分は動かなくなります。