プロフィール

arismmn timeline blog

← ブログ一覧に戻る
2026年02月21日（土）

Cloudflare Pages環境変数のトラブルシューティング: 変数名の空白文字でundefinedになる問題

cloudflaretroubleshootingdebugging

🐛 発生した問題

イベント管理画面で目標値を変更した際に、Slackへ通知を送る機能を実装しました。
Cloudflare Pages Dashboardで環境変数EVENT_WORKER_BOT_TOKENを設定し、再デプロイも実施したのに、通知が届きません。

デバッグコードで確認したところ、以下のような状態でした：

Slack通知: 環境変数なし(token:false, channel:true)
  • SLACK_REPORT_CHANNELは正常に読み込まれている（channel:true）
  • EVENT_WORKER_BOT_TOKENだけが読み込まれていない（token:false）

🔍 診断プロセス

1. 環境変数の存在確認

まず、Cloudflare Pages Dashboardで以下を確認しました：

  • ✅ Settings → Environment variables にEVENT_WORKER_BOT_TOKENが存在
  • ✅ Production / Preview 両方に設定済み
  • ✅ Value欄にもトークン値を入力済み
  • ✅ タイプは「プレーンテキスト」で正しい
  • ✅ 再デプロイも実施済み

これらすべてが正しく設定されているにも関わらず、runtime.env.EVENT_WORKER_BOT_TOKENがundefinedになっていました。

2. デバッグコードの追加

環境変数が存在するかどうかを確認するため、以下のコードを一時的に追加しました：

// ⚠️ セキュリティ上、本番環境では削除すること！
const allEnvKeys = Object.keys(runtime.env);
console.log('[イベントWorker] 利用可能な環境変数キー:', allEnvKeys);
console.log('[イベントWorker] EVENT_WORKER_BOT_TOKENの型:', typeof runtime.env.EVENT_WORKER_BOT_TOKEN);

Cloudflare Pagesのログを確認したところ、驚くべき結果が：

[イベントWorker] 利用可能な環境変数キー: [
  " EVENT_WORKER_BOT_TOKEN",  // ← 先頭にスペース！
  "ASSETS",
  "BASIC_AUTH_PASS",
  "SLACK_REPORT_CHANNEL",
  ...
]

原因判明: 変数名の先頭にスペースが入っていました！

🔬 なぜundefinedになったのか？

JavaScriptのオブジェクトのキーは文字列として評価されます。
以下の2つは異なるキーとして扱われます：

const env = {
  " EVENT_WORKER_BOT_TOKEN": "xoxb-1234...",  // スペースあり
  "EVENT_WORKER_BOT_TOKEN": "xoxb-5678..."    // スペースなし
};

env.EVENT_WORKER_BOT_TOKEN;           // undefined（存在しない）
env[" EVENT_WORKER_BOT_TOKEN"];       // "xoxb-1234..." （存在する）

Cloudflare Pages Dashboardで変数名を入力する際、誤って先頭にスペースを入力していたため：

  • Dashboard: " EVENT_WORKER_BOT_TOKEN" （スペースあり）
  • コード: runtime.env.EVENT_WORKER_BOT_TOKEN （スペースなし）

この不一致により、変数が存在しないと判定されていました。

✅ 解決方法

手順

  1. Cloudflare Pages Dashboardを開く

    • Workers & Pages → あなたのプロジェクト → Settings → Environment variables

  2. 誤った変数を削除

    • " EVENT_WORKER_BOT_TOKEN" （先頭にスペースあり）を削除

  3. 正しい変数名で再登録

    • 変数名: EVENT_WORKER_BOT_TOKEN （スペースなし）
    • Value: xoxb-で始まるSlack Bot Token
    • タイプ: プレーンテキスト（またはシークレット）
    • 環境: Production / Preview 両方

  4. 再デプロイ

    • Deployments タブ → 最新のデプロイ → "Retry deployment"

  5. 動作確認

    • 目標値を変更してSlack通知が届くことを確認
    • デバッグコードでtoken:trueになることを確認

修正後の結果

Slack通知: 成功

無事にSlack通知が送信されました！✨

💡 今後の予防策

1. 変数名入力時の注意

Cloudflare Dashboard（または他のクラウドサービス）で環境変数を登録する際：

  • 前後のスペースに注意する
  • コピー＆ペーストする場合、余分な空白が含まれていないか確認
  • 特にMarkdownやドキュメントからコピーする際は要注意

2. トラブル時の診断コード

環境変数が読み込まれない場合、以下のコードで実際のキー名を確認できます：

// デバッグ用（本番環境では削除すること！）
const allEnvKeys = Object.keys(runtime.env);
console.log('環境変数キー一覧:', allEnvKeys);

// 特定のキーが存在するか確認
console.log('EVENT_WORKER_BOT_TOKEN exists:', 'EVENT_WORKER_BOT_TOKEN' in runtime.env);
console.log('Type:', typeof runtime.env.EVENT_WORKER_BOT_TOKEN);

⚠️ セキュリティ注意: このコードは環境変数のキー名を列挙するため、本番環境では必ず削除してください。デバッグ後は速やかに削除しましょう。

3. 変数名の検証

プログラム側で環境変数の存在チェックを追加するのも有効です：

const token = runtime.env.EVENT_WORKER_BOT_TOKEN;
if (!token) {
  console.error('❌ EVENT_WORKER_BOT_TOKEN が設定されていません');
  console.error('利用可能な環境変数:', Object.keys(runtime.env).filter(k => k.includes('TOKEN')));
}

📚 類似の問題

この問題は、Cloudflare Pagesに限らず、以下のような環境でも発生する可能性があります：

  • AWS Lambda: 環境変数の設定画面
  • Google Cloud Functions: 環境変数の管理
  • Azure Functions: アプリケーション設定
  • Vercel / Netlify: 環境変数の管理画面
  • .env ファイル: 直接編集時の入力ミス

いずれの場合も、変数名の前後に余分なスペースが入っていないかを最初に疑うべきです。

🎓 学んだこと

  1. 環境変数名は厳密比較される

    • スペース1つで別のキーとして扱われる
    • 大文字小文字も区別される

  2. 目視では気づきにくい

    • Dashboard上では見た目で区別がつかない
    • ログ出力やデバッグコードで確認する必要がある

  3. 基本に立ち返る

    • 「設定済みのはずなのに動かない」ときは、設定値そのものを疑う
    • 「変数名が正しい」前提を疑ってみる

🔗 関連記事

まとめ

Cloudflare Pagesで環境変数がundefinedになる場合：

  1. 変数名の前後にスペースが入っていないか確認
  2. デバッグコードでObject.keys(runtime.env)を出力
  3. 誤った変数名を削除し、正しい名前で再登録
  4. 再デプロイして反映

この記事が同じ問題で悩んでいる方の助けになれば幸いです。変数名の入力時は、前後のスペースに気をつけましょう！

Gemini
Powered by
Gemini
← ブログ一覧に戻る