Firebase

Firebaseのリアルタイムデータベースを試すまでにハマったこと

はじめに

• Firebaseの始め方 の写経チックなことをしている中でハマったこと＆対処法を記載しています。
• ので先に前述のQiitaを見て何かあったときだけ見れば十分な情報量です。

ローカルサーバ上でリアルタイムデータベースを使えるようになるまで

Firebaseのプロジェクト作成

• ここからログイン＆プロジェクト作成

Webアプリを選択。

画面に出てきた記述は一旦無視してOK。

Firebase CLI をインストール

• 下記をコマンドプロンプトから実行

npm install -g firebase-tools

Firebaseへログイン

firebase login

→ 「Already logged in as ほにゃほにゃ@gmail.com」 とのことだったので、このまま進める。

プロジェクトの初期化

プロジェクトフォルダに移動した後、下記コマンドを実施

firebase init

• Which Firebase CLI features → とりあえず全部
• Please select an option: Use an existing project
  ↓
  「FirebaseError: HTTP Error: 401, Request had invalid authentication credentials. Expected OAuth 2 access token, login cookie or other valid authentication credential.」
  というエラーが出る。
  認証に失敗？している臭いので、下記コマンドを実行しサイド認証

  firebase login --reauth
  

再度「firebase init」を実行

• Please select an option: Use an existing project は無事通る
• What file should be used for Database Rules?はデフォルトでOK（Enter押下）
• Select a default Firebase project for this directory: 作成したプロジェクトを選択
• 「 Database Rules はあるけど上書きする？」みたいなのはYesを選択
  ↓
  「Cloud resource location is not set for this project but the operation you are attempting to perform in Cloud Firestore requires it. Please see this documentation for more details: https://firebase.google.com/docs/projects/locations」 というエラー。。。
  • 言われたとおりドキュメントを見ることにする。
  • 何かしらのリソースを設定してないことが原因？？そう思ってプロジェクトのダッシュボードを見ると左ペインに「Databese」の文字が。クリックすると「データベースの作成」ってある。「そういえばデータベース作ってないのもんね。それなのに初期設定しようとしたのがだめなのかも」ってことで、作成する。
    • セキュリティ保護ルールはデフォルトのまま。
      • → 後でわかったけど緩めにしておけばよかった（第三者でもデータのRead/Writeができる）
    • リソースロケーションもデフォルトのまま。
  • Storageも同じだと思うので、左ペインのStorageを選択 → ストレージの作成も実行（ロケーションはデフォルトのまま）

再度「firebase init」を実行

• さっきコケたところは通った！
• 諸々の設定ファイルはデフォルトのままで進める。

無事 init が終わりました。長かった。。。

ローカルで起動

firebase serve

• http://localhost:5000/ をブラウザで表示 → サーバが起動していることを確認。

firebaseの機能を試す

Qiitaのページを参考にhtmlを変更。
プロジェクトフォルダ > public > index.htmlに下記を記述。

  
    
    
    

    
    

    
    
    
    
    
    
    

    


  
  

 

    
  
  
    

      

Firebaseてすと
文字を入れると更新されます


      



更新



    
    
    
  

が、エラーが3つ出ます。

• TypeError: firebase.database is not a function
  • npmで取得した「firebase-database.js」がダメっぽい？様でCDNから取得するようにしました。
    参考：firebaseのデータベースを使うときにUncaught TypeError: firebase.database is not a functionと吐かれた時の解決法

    -  
    -  
      
    +    
    +  
  

• innerHTML が見つからない的なものが2つ
  • TypeError: Cannot set property 'innerHTML' of null
  • Uncaught TypeError: Cannot set property 'innerHTML' of null
    ↓
    これはFirebaseのサンプルから持ってきたものをHTMLだけ変えてJSを変えてないことが原因。
    なので、JS側をまるっと消せばOK(「document.addEventListener('DOMContentLoaded', function() {」を消す)
• 最終的にこうなりました

  
    
    
    

    
    

    
    
    
    
    

    
    
    
      
    


    


  
  

 

    
  
  
    

      

Firebaseてすと
文字を入れると更新されます


      



更新



    
  

これで、devツールからエラーは消えました！

リアルタイムデータベースを使ってみる

• テキストを入力し更新ボタンを押しても何も起きません。。。
• 再びdevツールを開くと「Repo.ts:632 Uncaught (in promise) Error: PERMISSION_DENIED: Permission denied」とのこと。
  • Qiitaのページを参考に公開ルールを変更

  /* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
{
  "rules": {
    ".read": true,
    ".write": true
  }
}   

これで動くところまで行きました。いろんなところでハマった気がします。。