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

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

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

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

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

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 で呼び出したい

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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