Cloudflare Pages × Firebase × GraphQLで「いいね」機能が壊れた話

未分類

🐞 問題

Cloudflare Pages にデプロイしたところ、Next.js アプリの「いいね」ボタンが機能しなくなりました。
ブラウザのコンソールには以下のようなエラーが表示されていました。

database=projects/undefined/databases/(default)
SyntaxError: "undefined" is not valid JSON

なお、ローカル環境（npm run dev や npx serve）では正常に動作していました。

🔍 原因

  • Cloudflare Pages の 本番環境に Firebase 関連の環境変数が設定されていなかった
  • そのため、Firestore の接続先 projectId が undefined となり、Firebase 初期化に失敗
  • GraphQL 側もレスポンスが空になり、JSON.parse(undefined) が発生

✅ 解決策

  1. Cloudflare Pages のダッシュボードから：
    • Settings > Environment Variables に移動
    • 上部で Production（本番環境） を選択
  2. 以下の環境変数を追加：NEXT_PUBLIC_FIREBASE_API_KEY=... NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=... NEXT_PUBLIC_FIREBASE_PROJECT_ID=... ← これが特に重要！ NEXT_PUBLIC_FIREBASE_APP_ID=...
  3. 保存後、再デプロイを行う：
    • 「Retry Deployment」ボタンを使う
    • または git commit --allow-empty -m "trigger redeploy" → git push でもOK

💡 補足Tips

  • プレビュー環境（develop など）でも同様の変数を別途設定する必要があります
  • process.env.NEXT_PUBLIC_... の形式で設定しないと Next.js のクライアント側に反映されません
  • GraphQL の where: { in: [...] } が使えない場合は、getSlideById() をループで呼び出す構成で回避できます

✍️ まとめ

Cloudflare Pages は非常に便利ですが、本番・プレビューそれぞれに環境変数を明示的に設定する必要があります。

特に Firebase や GraphQL のように環境変数で初期化する構成の場合は：

  • "undefined" といったエラーが出たら、まず process.env を疑おう
  • 変数を変更したら再ビルドが必要

という点を意識しておくとトラブル回避になります！