FIREBASE FATAL ERROR: Can't determine Firebase Database URL.の対処法

はじめに

firebaseに接続しようとしてハマったので、トラブルシューティングメモ。

エラーメッセージ

Error: FIREBASE FATAL ERROR: Can't determine Firebase Database URL. Be sure to include databaseURL option when calling firebase.initializeApp().

エラーになるコード

import React from 'react';
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';

const config = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  databaseUrl: process.env.REACT_APP_DATABASE_URL
};

firebase.initializeApp(config);

REACT_APP_API_KEY=xxxxxx
REACT_APP_AUTH_DOMAIN=xxxxx
REACT_APP_PROJECT_ID=xxxxxx
REACT_APP_DATABASE_URL=xxxxx

対応内容

WebUIからwebアプリ用の設定ファイルを入手。
見比べて気づいたけど、configのキー名が間違っていた。

const config = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
    // URLは大文字
  databaseURL: process.env.REACT_APP_DATABASE_URL
};

firebase.initializeApp(config);

よくよく見たらBe sure to include databaseURL optionって書いてあるので、ちゃんとエラーメッセージ読めばよかった。。。

参考リンク

• 設定ファイルをダウンロードする - Firebase ヘルプ