シークレット管理と環境変数

Reactアプリケーションの環境変数は、サーバーサイド（ブラウザーには一切送信されません）とクライアントサイド（JavaScriptバンドルに埋め込まれます）の2種類に分類されます。変数がどちらに属するかを理解することが、シークレット管理の第一歩です。クライアントサイドの変数は、バンドルをデプロイした時点で実質的に公開情報になるためです。

Viteプロジェクトでは、VITE_で始まる変数だけがクライアントバンドルに含まれます。VITE_PUBLIC_API_URL=https://api.example.comは、ブラウザーコードからimport.meta.env.VITE_PUBLIC_API_URLを介して利用できます。それ以外の変数はビルド時にバンドルから除外され、サーバー専用のままになります。

Next.jsでは、NEXT_PUBLIC_プレフィックスを付けると、変数がブラウザーのJavaScriptに公開されます。NEXT_PUBLIC_ANALYTICS_ID=UA-123はクライアントバンドルに埋め込まれます。プレフィックスのない変数（DATABASE_URLなど）は、サーバーサイドのコード（Server Components、API routes、Server Actions）からのみアクセスでき、ブラウザーに送信されることはありません。

プレフィックスのない変数でも、誤ってシリアライズされるとアクセス可能になります。たとえば、Server Componentが完全な設定オブジェクトをClient Componentにpropsとして渡し、その設定にDATABASE_URLが含まれている場合、そのシークレットはブラウザーに送信されるHTMLに現れます。propsの受け渡しとシリアライズを注意深く監査することで、これを防げます。

次の情報は、クライアントバンドルに決して含めてはいけません。データベース接続文字列とパスワード、サードパーティAPIのシークレットキー（Stripe secret key、OpenAI API key）、RSA/ECの秘密鍵、JWT署名シークレット、内部サービスの認証トークンです。API呼び出しにこれらのいずれかが必要な場合は、その呼び出しをサーバーエンドポイント経由でプロキシしてください。

Backend for Frontend（BFF）パターンでは、Reactアプリケーションと機密性の高い外部サービスの間に薄いサーバーレイヤーを配置します。クライアントは/api/stripe/chargeを呼び出し、BFFサーバーがStripe secret keyを付けてStripe APIを呼び出し、BFFが必要なレスポンスデータだけを返します。シークレットは常にサーバー上に保持されます。

dotenv-vaultは.envファイルを暗号化し、平文のシークレットをバージョン管理に登録することなく、環境間で安全に共有およびデプロイできるようにします。本番環境の代替手段には、HashiCorp Vault（エンタープライズ）、AWS Parameter Store（SSM）、GCP Secret Managerがあります。いずれも、ビルド時ではなく実行時にAPI経由でシークレットを取得できます。

CI/CDプラットフォーム（GitHub Actions、GitLab CI）は、ビルド中に環境変数としてアクセスできる暗号化済みのシークレットストレージを提供します。シークレットはGitHub Secretsに保存し、ワークフローでは${{ secrets.STRIPE_SECRET_KEY }}として参照してください。シークレットはログでマスクされ、ビルド成果物に含まれることはありません。

Next.jsとViteは複数の.envファイルに対応しています。.env（すべての環境）、.env.local（ローカルでの上書き、gitignore対象）、.env.development、.env.productionです。ローカルファイルの値は共有ファイルの値より優先されるため、他の環境に影響を与えずに開発者ごとの設定を行えます。

ビルド後にJavaScriptバンドルを監査し、シークレットが誤って公開されていないか確認してください。grep -r "password|secret|api_key" dist/を実行するか、ビルド済みファイルに対してstrings分析などの専用ツールを使用します。誤って含まれたシークレットの中には、UUID、base64文字列、sk_live_のようなキーのプレフィックスなど、形式から明確に識別できるものがあります。

各環境と各サービスには、必要なシークレットだけへのアクセスを許可してください。Reactクライアントにはシークレットは一切必要なく、公開識別子だけを受け取るべきです。BFFサーバーに必要なのは、呼び出すAPIに必要なシークレットだけです。開発環境では、本番環境用ではないAPIキーを使用し、権限と利用額に上限を設けてください。

ViteはVITE_、Next.jsはNEXT_PUBLIC_を使用して、変数をブラウザーバンドルに公開します。それ以外の変数はすべてサーバーサイド専用です。データベースのパスワード、APIのシークレットキー、JWT署名シークレットをクライアントコードに決して含めないでください。機密性の高いAPI呼び出しをプロキシするには、BFFパターンを使用します。本番環境のシークレット管理には、dotenv-vault、AWS Parameter Store、GitHub Secretsを使用してください。ビルド済みバンドルを監査し、シークレットが誤って公開されていないか確認してください。