Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

tanabee

December 03, 2019
Tweet

More Decks by tanabee

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide