概要：Cloudflare Pagesで環境変数を設定したにもかかわらず、デプロイ後に反映されない。そんな時に見落としがちな「Production」と「Preview」環境の設定の落とし穴と解決策について解説します。

ローカルで動くのに本番で動かない絶望

個人開発をしていると必ずぶち当たる壁、「ローカル環境では動くのに、デプロイすると動かない」現象。 今回はOpenWeather APIを使って現在地の天気を取得する機能を実装したのですが、Cloudflare Pagesにデプロイした途端、「APIキーが設定されていません」という非情なエラーに遭遇しました。

犯人は「Preview」環境の設定漏れ

Cloudflareのダッシュボードから確実にAPIキーを環境変数として登録したはずでした。しかし、よく見るとCloudflareの環境変数設定には2つのタブが存在していたのです。

• Production（本番環境）： メインのブランチにデプロイされた時に使われる変数。
• Preview（プレビュー環境）： テスト用のブランチや、プレビューURLが発行された時に使われる変数。

私は「Production」側にしかキーを設定していませんでした。 Cloudflare Pagesはデプロイのたびにプレビュー環境を構築することがあり、その際にプレビュー側の変数が空っぽだったため、システムが迷子になっていたのです。

解決策：環境変数は「両面待ち」にする

対策は非常にシンプルです。 Cloudflareのダッシュボードで環境変数を設定する際は、「Production」と「Preview」の両方に同じキーをセットしておきましょう。 これで、どの環境が立ち上がっても確実にAPIキーを読み込んでくれるようになります。インフラ設定の「お作法」を学んだ貴重な経験でした。

（執筆協力：VS Codeの守護神のAI）