React x Firebase を用いた Web アプリケーション開発時のハマりどころと解決策 / React x Firebase tips

Firebase Meetup #15 Cloud Functions Day の LT 資料です。
https://firebase-community.connpass.com/event/154400/

Qiita 版は以下です。
https://qiita.com/tanabee/items/b2527deb3f2f4b87406b

Transcript

1. React x Firebase を用いた
   Web アプリケーション開発時の
   ハマりどころと解決策
   Vice President, RPG TEC
   tanabee
   

   View Slide

2. このスライドについて
   - Slide: http://bit.ly/slide1203
   - Qiita: http://bit.ly/qiita1203
   

   View Slide

3. 自己紹介
   - Name: Yuki Tanabe
   - Licenses
   - Google Developers Expert ( G Suite category )
   - Licensed Scrum Master
   - Social Accounts
   - GitHub: tanabee
   - Twitter: @_tanabee
   - Qiita: tanabee
   

   View Slide

4. 概要
   - これから React x Firebase の構成で Web アプリケーション
   開発を始める方が同じところでハマらないようにハマりどこ
   ろと解決策を 4 つ紹介します。
   

   View Slide

5. 1. Hosting と同じドメインで
   Cloud Functions の関数を
   呼び出す
   

   View Slide

6. Hosting と同じドメインで Cloud Functions の関数を呼び出す
   https://[region]-[project id].cloudfunctions.net/[function name]
   Cloud Functions でデフォルトで生成される URL
   - https://[project id].web.app/[function name]
   - https://[project id].firebaseapp.com/[function name]
   - https://[独自ドメイン]/[function name]
   以下のような URL で呼び出したい
   

   View Slide

7. Hosting と同じドメインで Cloud Functions の関数を呼び出す
   "hosting": {
   "rewrites": [
   {
   "source": "/notifications",
   "function": "notifications"
   },
   {
   "source": "**",
   "destination": "/index.html"
   }
   ]
   Hosting の設定ファイルで rewrites の設定をすれば OK
   https://firebase.google.com/docs/hosting/url-redirects-rewrites?hl=ja#section-rewrites
   firebase.json
   exports.notifications = functions
   .https
   .onRequest((req, res) => {
   // ...
   };
   functions/index.js
   

   View Slide

8. 2. ローカル環境の React から
   Emulator の Functions を
   呼び出す
   

   View Slide

9. ローカル環境の React から Emulator の Functions を呼び出す
   - やりたかったこと
   - Functions をいちいちデプロイして検証したくない
   - yarn start で React のホットリロードはそのまま使いたい
   

   View Slide

10. const app = firebase.initializeApp(config)
    if (process.env.NODE_ENV === 'development') {
    app.functions().useFunctionsEmulator('http://localhost:5001')
    }
    Emulator Suite で Functions を起動し src/index.js を更新
    src/index.js
    ローカル環境の React から Emulator の Functions を呼び出す
    https://firebase.google.com/docs/emulator-suite/connect_and_prototype?database=Firestore
    $ firebase emulators:start --only functions
    Command
    

    View Slide

11. 3. React と Functions で
    Firestore の参照先を
    合わせる
    

    View Slide

12. React と Functions で Firestore の参照先を合わせる
    - Firestore を使ったプロジェクトで 2 の設定を行った場合に
    以下のような状態になる
    - React: Cloud の Firestore を参照
    - Functions: Emulator の Firestore 参照
    > Cloud か Emulator か参照先を統一する必要がある
    

    View Slide

13. React と Functions で Firestore の参照先を合わせる
    - 構成 1. Cloud の Firestore を参照する
    - React: yarn start
    - Functions: Emulator
    - Firestore: Cloud
    - メリデメ
    - 開発時に Firebase console からデータを確認できる
    - Cloud のデータが更新されるため、複数人開発には不
    向き。リリース後は複数 PJ 構成などの工夫が必要
    

    View Slide

14. React と Functions で Firestore の参照先を合わせる
    https://firebase.google.com/docs/emulator-suite/connect_and_prototype?database=Firestore
    const Firestore = require('@google-cloud/firestore')
    const admin = require('firebase-admin')
    const db = (() => {
    if (process.env.FUNCTIONS_EMULATOR) {
    return new Firestore({ projectId: 'your project id' })
    } else {
    return admin.firestore()
    }
    })()
    functions/index.js
    $ npm install --save @google-cloud/firestore
    Command
    

    View Slide

15. React と Functions で Firestore の参照先を合わせる
    https://cloud.google.com/docs/authentication/getting-started?hl=ja
    サービスアカウントキーを作成してローカルに配置
    $ export GOOGLE_APPLICATION_CREDENTIALS="[PATH]"
    Command
    

    View Slide

16. React と Functions で Firestore の参照先を合わせる
    - 構成 2. Emulator の Firestore を参照する
    - React: yarn start
    - Functions: Emulator
    - Firestore: Emulator
    - メリデメ
    - ローカル環境に閉じてデータを変更できるので複数人開
    発やリリース後の運用にも向いている
    - データの確認が難しい（Firestore の CLI がない？）
    

    View Slide

17. const app = firebase.initializeApp(config)
    if (process.env.NODE_ENV === 'development') {
    app.functions().useFunctionsEmulator('http://localhost:5001')
    db.settings({
    host: "localhost:8081",
    ssl: false
    });
    }
    src/index.js
    React と Functions で Firestore の参照先を合わせる
    https://firebase.google.com/docs/emulator-suite/connect_and_prototype?database=Firestore
    $ firebase emulators:start --only functions,firestore
    Command
    

    View Slide

18. 4. Hosting から
    asia-northeast1 region の
    Functions を呼び出せない
    

    View Slide

19. Hosting から asia-northeast1 region の Functions を呼び出せない
    exports.getEvents = functions
    .region(‘asia-northeast1’)
    .https()
    .onCall((data) => {
    // ...
    });
    region 指定すると Hosting から呼べなくなる
    

    View Slide

20. Hosting から asia-northeast1 region の Functions を呼び出せない
    https://firebase.google.com/docs/hosting/functions?hl=ja
    

    View Slide

21. Hosting から asia-northeast1 region の Functions を呼び出せない
    - Hosting とつなぐものは、現状 region 指定しないで
    Functions を運用するしかなさそう
    

    View Slide

22. ありがとうございました！
    

    View Slide