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

1f309786ce1b4b15b81d3945faea1739?s=47 tanabee
December 03, 2019

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

1f309786ce1b4b15b81d3945faea1739?s=128

tanabee

December 03, 2019
Tweet

Transcript

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

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

  3. 自己紹介 - Name: Yuki Tanabe - Licenses - Google Developers

    Expert ( G Suite category ) - Licensed Scrum Master - Social Accounts - GitHub: tanabee - Twitter: @_tanabee - Qiita: tanabee
  4. 概要 - これから React x Firebase の構成で Web アプリケーション 開発を始める方が同じところでハマらないようにハマりどこ

    ろと解決策を 4 つ紹介します。
  5. 1. Hosting と同じドメインで Cloud Functions の関数を 呼び出す

  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 で呼び出したい
  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
  8. 2. ローカル環境の React から Emulator の Functions を 呼び出す

  9. ローカル環境の React から Emulator の Functions を呼び出す - やりたかったこと -

    Functions をいちいちデプロイして検証したくない - yarn start で React のホットリロードはそのまま使いたい
  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
  11. 3. React と Functions で Firestore の参照先を 合わせる

  12. React と Functions で Firestore の参照先を合わせる - Firestore を使ったプロジェクトで 2

    の設定を行った場合に 以下のような状態になる - React: Cloud の Firestore を参照 - Functions: Emulator の Firestore 参照 > Cloud か Emulator か参照先を統一する必要がある
  13. React と Functions で Firestore の参照先を合わせる - 構成 1. Cloud

    の Firestore を参照する - React: yarn start - Functions: Emulator - Firestore: Cloud - メリデメ - 開発時に Firebase console からデータを確認できる - Cloud のデータが更新されるため、複数人開発には不 向き。リリース後は複数 PJ 構成などの工夫が必要
  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
  15. React と Functions で Firestore の参照先を合わせる https://cloud.google.com/docs/authentication/getting-started?hl=ja サービスアカウントキーを作成してローカルに配置 $ export

    GOOGLE_APPLICATION_CREDENTIALS="[PATH]" Command
  16. React と Functions で Firestore の参照先を合わせる - 構成 2. Emulator

    の Firestore を参照する - React: yarn start - Functions: Emulator - Firestore: Emulator - メリデメ - ローカル環境に閉じてデータを変更できるので複数人開 発やリリース後の運用にも向いている - データの確認が難しい(Firestore の CLI がない?)
  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
  18. 4. Hosting から asia-northeast1 region の Functions を呼び出せない

  19. Hosting から asia-northeast1 region の Functions を呼び出せない exports.getEvents = functions

    .region(‘asia-northeast1’) .https() .onCall((data) => { // ... }); region 指定すると Hosting から呼べなくなる
  20. Hosting から asia-northeast1 region の Functions を呼び出せない https://firebase.google.com/docs/hosting/functions?hl=ja

  21. Hosting から asia-northeast1 region の Functions を呼び出せない - Hosting とつなぐものは、現状

    region 指定しないで Functions を運用するしかなさそう
  22. ありがとうございました!