Firebase for Web

Firebase for Web

GCPUG KOBE #6 ~GoogleファミリーのFirebaseで遊び倒す!~

52f95e52a6d71b67361ac179fb8405f4?s=128

chimame

June 19, 2019
Tweet

Transcript

  1. 3.

    自己紹介 名前: rito 職業: Webエンジニア (アプリケーションエンジニア) 分野: Ruby on Rails,

    Nodejs, React, Docker, AWS, GCP 所属: Ateam Finergy Inc. CTO コミュニティ: Rails follow-up Osaka Osaka Web Developers Meetup twitter: @chimame_rt GitHub: chimame 3
  2. 5.

    ベーシック構成 5 Cloud Load Balancing Cloud Storage Cloud DNS Compute

    Engine Cloud Datastore Cloud SQL Cloud Memorystore Cloud Functions Web http Cloud CDN
  3. 11.

    11

  4. 13.

    “ 13 Firebaseとは ◂ 2014年にGoogleが買収し、Google Cloud Platformの仲間入り ◂ FirebaseはmBaaS(mobile backend

    as a service)であり、名の通りモバイルアプリ ケーション向けのバックエンドサービス ◂ バックエンドサービスが高機能かつ多種存在
  5. 14.

    14 Cloud Load Balancing Cloud Storage Cloud DNS Compute Engine

    Cloud Datastore Cloud SQL Cloud Memorystore Cloud Functions Web http ベーシック構成 基本的な構成での カバー範囲はというと…
  6. 15.

    15 Cloud SQL Cloud Memorystore Web http ベーシック構成 Cloud Load

    Balancing Cloud Storage Cloud DNS Compute Engine Cloud Datastore Cloud Functions Cloud CDN
  7. 16.

    16 Cloud SQL Cloud Memorystore Web http ベーシック構成 Cloud Load

    Balancing Cloud Storage Cloud DNS Compute Engine Cloud Datastore Cloud Functions Cloud CDN Fireabaseが提供するバックエンド サービスでカバーできる範囲
  8. 17.

    17 Cloud SQL Cloud Memorystore Web http ベーシック構成 Cloud Load

    Balancing Cloud Storage Cloud DNS Compute Engine Cloud Datastore Cloud Functions Cloud CDN Google Cloud Next ‘19で発表されたCloud Runと連携することでカバー可能
  9. 21.

    21 Cloud Load Balancing Cloud Storage Cloud DNS Cloud Datastore

    Cloud SQL Cloud Memorystore Cloud Functions Web http Cloud CDN ベーシック構成 Compute Engine 各種SNS この部分を提供しているイメージ
  10. 23.

    クライアント 23 Hosting Firebase Authentication 各種SNS APIサーバ SNSログインボタン ID、パスワード入力 301

    redirect ユーザおよびtoken作成 ログイン画面 token付きリクエスト token 検証 処理の流れ ユーザ(token)返却
  11. 24.

    クライアント 24 Hosting Firebase Authentication 各種SNS APIサーバ SNSログインボタン ID、パスワード入力 301

    redirect ユーザおよびtoken作成 ユーザ(token)返却 ログイン画面 token付きリクエスト token 検証 処理の流れ
  12. 25.

    // GitHubアカウントでログイン const provider = new firebase.auth.GithubAuthProvider() const handleSignIn =

    async () => { try { await firebase.auth().signInWithPopup(provider) } catch (e) { console.log(e.message) } } <button onClick={handleSignIn}>SignIn</button> 25
  13. 26.

    クライアント 26 Hosting Firebase Authentication 各種SNS APIサーバ SNSログインボタン ID、パスワード入力 301

    redirect ユーザおよびtoken作成 ユーザ(token)返却 ログイン画面 token付きリクエスト token 検証 処理の流れ
  14. 27.

    let loginUser = null firebase.auth().onAuthStateChanged(user => { if (user) {

    // ログインされたユーザを保存 loginUser = user // token取得は以下 // loginUser.getIdTokenResult() } else { loginUser = null } }) 27
  15. 30.

    クライアント 30 Hosting Firebase Authentication 各種SNS APIサーバ SNSログインボタン ID、パスワード入力 301

    redirect ユーザおよびtoken作成 ユーザ(token)返却 ログイン画面 token付きリクエスト token 検証 処理の流れ
  16. 32.

    クライアント 32 Hosting Firebase Authentication 各種SNS APIサーバ SNSログインボタン ID、パスワード入力 301

    redirect ユーザおよびtoken作成 ユーザ(token)返却 ログイン画面 token付きリクエスト token 検証 処理の流れ
  17. 33.

    import * as admin from 'firebase-admin' // クライアントから送られてきた tokenを検証 admin.auth().verifyIdToken(token)

    .then(function(decodedToken) { var uid = decodedToken.uid; // ... }).catch(function(error) { // Handle error }) 33
  18. 37.

    37 Cloud Load Balancing Cloud Storage Cloud DNS Cloud SQL

    Cloud Memorystore Cloud Functions Web http Cloud CDN Compute Engine ベーシック構成 この部分を提供しているイメージ Cloud Datastore
  19. 42.
  20. 43.

    const db = firebase.firestore() let writing = false const handleMouseMoveWriting

    = (e) => { if (!writing) { writing = true setTimeout(() => { db.collection("lines").add({ x: e.clientX, y: e.clientY }) }, 100) } } 43
  21. 44.

    // onSnapshotでデータの変更を監視 db.collection('lines').onSnapshot(doc => { doc.docs.forEach(d => { const div

    = document.createElement('div') const { x, y } = d.data() div.style.left = x div.style.top = y element.appendChild(div) }) }) 44
  22. 47.

    47 Cloud Load Balancing Cloud SQL Cloud Memorystore Cloud Functions

    Web http Compute Engine Cloud Datastore Cloud DNS Cloud CDN ベーシック構成 この部分を提供しているイメージ Cloud Storage
  23. 50.

    50 Cloud Load Balancing Cloud SQL Cloud Memorystore Cloud Functions

    Web http Compute Engine Cloud Datastore ベーシック構成 この部分を提供しているイメージ Cloud DNS Cloud CDN Cloud Storage
  24. 53.

    $ npm install -g firebase-tool $ firebase login $ firebase

    init $ firebase deploy 53 これで作成される firebase.json が大事
  25. 54.

    // firebase.json { "hosting": { "public": "build", "ignore": [ "firebase.json",

    "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } } 54 create-react-appでの使用例
  26. 55.

    // firebase.json { "hosting": { "public": "build", "ignore": [ "firebase.json",

    "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } } 55 どのディレクトリを対象とするか
  27. 56.

    // firebase.json { "hosting": { "public": "build", "ignore": [ "firebase.json",

    "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } } 56 アップロード対象外とするファイル
  28. 57.

    // firebase.json { "hosting": { "public": "build", "ignore": [ "firebase.json",

    "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } } 57 特定ルーティング時の挙動 例はすべてのルーティングをindex.htmlへ react-router を使用していれば
  29. 59.

    // firebase.json { "hosting": { ..., "rewrites": [ { "source":

    "/api/**", "run": { "serviceId": "cloud-run-name", "region": "us-central1" } }, { "source": "**", "destination": "/index.html" } ] } } 59 /apiのルーティングはCloud RunというGoogle Cloud PlatformにデプロイされたDockerコンテ ナにリクエストされる
  30. 60.

    60 Cloud SQL Cloud Memorystore Cloud Functions Cloud Datastore ベーシック構成

    /apiはこっちのルートへ Cloud DNS Cloud CDN Cloud Storage Cloud Load Balancing Compute Engine Web http
  31. 61.

    61 Cloud SQL Cloud Memorystore Cloud Functions Cloud Datastore ベーシック構成

    /api以外はこっちのルートへ Cloud DNS Cloud CDN Cloud Storage Cloud Load Balancing Compute Engine Web http
  32. 66.

    66 Cloud Load Balancing Cloud SQL Cloud Functions Web http

    Cloud Datastore Cloud DNS Cloud CDN Cloud Storage ベーシック構成 この部分を提供しているイメージ (RedisをPub/Subで使用) Cloud Memorystore Compute Engine
  33. 70.

    // ここはアプリケーション内の JavaScript const messaging = firebase.messaging() // push通知許可 await

    messaging.requestPermission() // ここは /firebase-messaging-sw.js を用意して記述しておく importScripts('https://www.gstatic.com/firebasejs/5.7.3/firebas e-app.js') importScripts('https://www.gstatic.com/firebasejs/5.7.3/firebas e-messaging.js') firebase.initializeApp({ 'messagingSenderId': 'your project messaging send id' }) const messaging = firebase.messaging() 70
  34. 72.

    const messaging = firebase.messaging() // tokenを取得する const defaultToken = await

    messaging.getToken() // tokenは定期的に更新される messaging.onTokenRefresh(() => { messaging.getToken() .then((token) => { // サーバにtokenの変更を知らせる // fetch(‘http://example.com/answer’) }) .catch((err) => { console.error(err) }) }) 72
  35. 74.

    74

  36. 77.

    // /firebase-messaging-sw.js にsetBackgroundMessageHandler を書くパ ターン // これが呼ばれる条件「該当の Webアプリ(のページ)がアクティブでないこと and サーバPUSHのデータに`notification`が存在しないこと」

    messaging.setBackgroundMessageHandler ((payload) => { const notificationTitle = 'Background Message Title' const notificationOptions = { title: 'push-test-web', body: 'push-test-web: Background Message body' , icon: '/favicon.ico', } return self.registration.showNotification(notificationTitle, notificationOptions) }) 77
  37. 78.
  38. 84.
  39. 86.

    86

  40. 87.

    87