Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Firebase for Web
Search
chimame
June 19, 2019
Programming
0
610
Firebase for Web
GCPUG KOBE #6 ~GoogleファミリーのFirebaseで遊び倒す!~
chimame
June 19, 2019
Tweet
Share
More Decks by chimame
See All by chimame
私がエッジを使う理由
chimame
9
3.7k
GraphQL Server on Edge after that
chimame
1
950
Accelerating App Dev with Cloudflare Workers
chimame
1
310
GraphQL Server on Edge
chimame
11
4.9k
エッジで輝くフロントエンド
chimame
11
6.1k
Cloudflare Workersと状態管理
chimame
4
1.2k
CSRなサイトを (疑似的な)ISRに変更した話
chimame
0
460
Cloud Runマネージドに適したアプリケーションを考える
chimame
1
240
RDS Proxyを使ってAuroraと仲良くなる
chimame
0
930
Other Decks in Programming
See All in Programming
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
180
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
[SF Ruby, March 2024] Rails on Wasm
palkan
0
380
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
330
puregoの活用例
aethiopicuschan
0
220
Build with AI 2024 Seoul - 제로부터 시작하는 Flutter with Gemini 생활 - 박제창
itsmedreamwalker
0
200
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
180
Ruby GitHub Packages
bkuhlmann
0
620
Folding Cheat Sheet #3
philipschwarz
PRO
0
120
ログラスを支える設計標準について / loglass-design-standards
urmot
10
2.1k
Java 22 Overview
kishida
1
170
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
321
20k
How to train your dragon (web standard)
notwaldorf
72
5.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Why Our Code Smells
bkeepers
PRO
331
56k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
Side Projects
sachag
451
41k
What’s in a name? Adding method to the madness
productmarketing
PRO
15
2.6k
Large-scale JavaScript Application Architecture
addyosmani
503
110k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.4k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Transcript
Firebase for Web 2019/06/19 GCPUG Kobe #6 rito
Agenda ❏ 自己紹介 ❏ Webアプリケーションに必要なインフラ達 ❏ Firebaseの特徴 ❏ Webアプリケーションを支えるFirebaseの機能 ❏
Authentication ❏ Cloud Firestore ❏ Cloud Storage ❏ Hosting ❏ Cloud Messaging ❏ まとめ 2
自己紹介 名前: 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
Webアプリケーションに 必要なインフラ達
ベーシック構成 5 Cloud Load Balancing Cloud Storage Cloud DNS Compute
Engine Cloud Datastore Cloud SQL Cloud Memorystore Cloud Functions Web http Cloud CDN
1から全て構築した経験がある人は❓ 6
7 経験者でもそこそこ 面倒 時間がかかる
Webアプリケーションインフラ構築の課題 ❏ Webアプリケーション全体としてはフロントだけで はなく、バックエンドやインフラも必要 ❏ フロントからバックエンドまで全部管理するにはな かなか大変 ❏ 仮にWebアプリケーションをオンプレで構築する と…
8
9 主要PaaS
フロントからバックエンドまで 全部構築するのはなかなかしんどい 10
11
Firebaseの特徴
“ 13 Firebaseとは ◂ 2014年にGoogleが買収し、Google Cloud Platformの仲間入り ◂ FirebaseはmBaaS(mobile backend
as a service)であり、名の通りモバイルアプリ ケーション向けのバックエンドサービス ◂ バックエンドサービスが高機能かつ多種存在
14 Cloud Load Balancing Cloud Storage Cloud DNS Compute Engine
Cloud Datastore Cloud SQL Cloud Memorystore Cloud Functions Web http ベーシック構成 基本的な構成での カバー範囲はというと…
15 Cloud SQL Cloud Memorystore Web http ベーシック構成 Cloud Load
Balancing Cloud Storage Cloud DNS Compute Engine Cloud Datastore Cloud Functions Cloud CDN
16 Cloud SQL Cloud Memorystore Web http ベーシック構成 Cloud Load
Balancing Cloud Storage Cloud DNS Compute Engine Cloud Datastore Cloud Functions Cloud CDN Fireabaseが提供するバックエンド サービスでカバーできる範囲
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と連携することでカバー可能
Webアプリケーションを 支えるFirebaseの機能
19 Authentication
概要 ◂ その名の通り認証(ログイン)機能を提供 ◂ SNS認証はもちろんメール、電話番号とこのサー ビス1つで 様々な認証 に対応 ◂ この機能を使うだけでもFirebaseを使用するとい
う価値有 20
21 Cloud Load Balancing Cloud Storage Cloud DNS Cloud Datastore
Cloud SQL Cloud Memorystore Cloud Functions Web http Cloud CDN ベーシック構成 Compute Engine 各種SNS この部分を提供しているイメージ
実装例 22
クライアント 23 Hosting Firebase Authentication 各種SNS APIサーバ SNSログインボタン ID、パスワード入力 301
redirect ユーザおよびtoken作成 ログイン画面 token付きリクエスト token 検証 処理の流れ ユーザ(token)返却
クライアント 24 Hosting Firebase Authentication 各種SNS APIサーバ SNSログインボタン ID、パスワード入力 301
redirect ユーザおよびtoken作成 ユーザ(token)返却 ログイン画面 token付きリクエスト token 検証 処理の流れ
// 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
クライアント 26 Hosting Firebase Authentication 各種SNS APIサーバ SNSログインボタン ID、パスワード入力 301
redirect ユーザおよびtoken作成 ユーザ(token)返却 ログイン画面 token付きリクエスト token 検証 処理の流れ
let loginUser = null firebase.auth().onAuthStateChanged(user => { if (user) {
// ログインされたユーザを保存 loginUser = user // token取得は以下 // loginUser.getIdTokenResult() } else { loginUser = null } }) 27
ログインだけならこれでOK 28
APIサーバも認証をかけたい 29
クライアント 30 Hosting Firebase Authentication 各種SNS APIサーバ SNSログインボタン ID、パスワード入力 301
redirect ユーザおよびtoken作成 ユーザ(token)返却 ログイン画面 token付きリクエスト token 検証 処理の流れ
// リクエストする毎にgetIdTokenResultする // なぜならtokenの有効期限はデフォルトで1時間のため、1時間毎に変わる fetch('https://example.com', { headers: { 'Authorization': `Bearer
${loginUser.getIdTokenResult()}` } }).then(function(response) { return response.json() }).then(function(json) { ... }) 31
クライアント 32 Hosting Firebase Authentication 各種SNS APIサーバ SNSログインボタン ID、パスワード入力 301
redirect ユーザおよびtoken作成 ユーザ(token)返却 ログイン画面 token付きリクエスト token 検証 処理の流れ
import * as admin from 'firebase-admin' // クライアントから送られてきた tokenを検証 admin.auth().verifyIdToken(token)
.then(function(decodedToken) { var uid = decodedToken.uid; // ... }).catch(function(error) { // Handle error }) 33
Nodejs、Java、Python、Go、C#なら Firebase-adminのライブラリが提供されている それ以外の言語は自分で検証ロジックを 実装すれば可能で、仕様は以下を参照 https://firebase.google.com/docs/auth/ad min/verify-id-tokens?hl=ja#verify_id_tok ens_using_a_third-party_jwt_library 34
35 Cloud Firestore
概要 ◂ NoSQLデータベースを提供 ◂ クライアントのデータベースに書き込みを行うこと で、オンライン時に同期 (なのでオフラインでも動作可能) ◂ Webに対応しているのはCloud Firestoreのみ
(Realtime Databaseは非対応) 36
37 Cloud Load Balancing Cloud Storage Cloud DNS Cloud SQL
Cloud Memorystore Cloud Functions Web http Cloud CDN Compute Engine ベーシック構成 この部分を提供しているイメージ Cloud Datastore
38 Server Client
39 Server Client ローカルに書き込む要領で データを保存
40 Server Client オンライン時に自動的に サーバに保存
41 Server Client オンライン時に自動的に サーバからデータを取得
DEMO 42
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
// 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
45 Cloud Storage
概要 ◂ その名の通りファイル保存サービス ◂ Authenticationと連携し、read(ダウンロード) とwrite(アップロード)を制御することが可能 46
47 Cloud Load Balancing Cloud SQL Cloud Memorystore Cloud Functions
Web http Compute Engine Cloud Datastore Cloud DNS Cloud CDN ベーシック構成 この部分を提供しているイメージ Cloud Storage
48 Hosting
概要 ◂ 静的なWebサイトを公開することが可能 (SPA向き) ◂ 配信にはグローバルなCDNのエッジサーバから SSLにて配信 ◂ APIが必要な場合もCloud Runを用いて容易に
構築が可能 new 49
50 Cloud Load Balancing Cloud SQL Cloud Memorystore Cloud Functions
Web http Compute Engine Cloud Datastore ベーシック構成 この部分を提供しているイメージ Cloud DNS Cloud CDN Cloud Storage
deploy方法 51
$ npm install -g firebase-tool $ firebase login $ firebase
init $ firebase deploy 52
$ npm install -g firebase-tool $ firebase login $ firebase
init $ firebase deploy 53 これで作成される firebase.json が大事
// firebase.json { "hosting": { "public": "build", "ignore": [ "firebase.json",
"**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } } 54 create-react-appでの使用例
// firebase.json { "hosting": { "public": "build", "ignore": [ "firebase.json",
"**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } } 55 どのディレクトリを対象とするか
// firebase.json { "hosting": { "public": "build", "ignore": [ "firebase.json",
"**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } } 56 アップロード対象外とするファイル
// firebase.json { "hosting": { "public": "build", "ignore": [ "firebase.json",
"**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } } 57 特定ルーティング時の挙動 例はすべてのルーティングをindex.htmlへ react-router を使用していれば
rewrite定義を こんな感じに変更すると… 58
// 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コンテ ナにリクエストされる
60 Cloud SQL Cloud Memorystore Cloud Functions Cloud Datastore ベーシック構成
/apiはこっちのルートへ Cloud DNS Cloud CDN Cloud Storage Cloud Load Balancing Compute Engine Web http
61 Cloud SQL Cloud Memorystore Cloud Functions Cloud Datastore ベーシック構成
/api以外はこっちのルートへ Cloud DNS Cloud CDN Cloud Storage Cloud Load Balancing Compute Engine Web http
Cloud Runとの連携メリット ◂ 同一ドメインでのアクセスなのでAPIをクロスドメイ ンで受ける必要はなくなる ◂ 設定次第ではあるが /(ルート) 以外はCloud Runに流して、Nextjs/Nuxtjs等のSSR実施のた
めのリクエストとするということも可能 62
Cloud Runとの連携デメリット ◂ GCP側のCloud Runを有効にするとFirebase のSparkプランからBlazeプランに自動的に変更 される 63
64 Cloud Messaging
概要 ◂ サーバからクライアントへデータを発信(PUSH通 知)するサービス ◂ PWAを用いて通知処理を実施 ◂ 発信(サーバ)と受信(クライント)には多少の実装 が必要 65
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
実装例 67
クライアント 68 Firebase Authentication APIサーバ token要求 tokenの通知 push通知 通知受信 処理の流れ
push通知の許可 tokenの保存
クライアント 69 Firebase Authentication APIサーバ token要求 tokenの通知 push通知 通知受信 処理の流れ
tokenの保存 push通知の許可
// ここはアプリケーション内の 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
クライアント 71 Firebase Authentication APIサーバ token要求 tokenの通知 push通知 通知受信 処理の流れ
tokenの保存 push通知の許可
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
クライアント 73 Firebase Authentication APIサーバ token要求 tokenの通知 push通知 通知受信 処理の流れ
tokenの保存 push通知の許可
74
クライアント 75 Firebase Authentication APIサーバ token要求 tokenの通知 push通知 通知受信 処理の流れ
tokenの保存 push通知の許可
const messaging = firebase.messaging() // アプリケーションのJavaScriptにonMessageを書くパターン // これが呼ばれる条件は「該当の Webアプリ(のページ)がアクティブであるこ と」
messaging.onMessage((payload) => { console.log(payload) }) 76
// /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
DEMO 78
ただ、こいつは若干クセがあります 79
【その1】 通知するためのサーバエンドポイントが 2種類ある 80
レガシーAPI: https://fcm.googleapis.com/fcm/send HTTP v1 API: https://fcm.googleapis.com/v1/projects/ <your sender id>/messages:send 81
【その2】 通知を受け取るパターンが 3パターンあり、1つは表示がプログラムで変 更できない 82
83 呼ばれるハンドラー条件 画面アクティブ notification有無 onMessage ◦ - setBackgroundMessageHandler ☓ ☓
非プログラミング ☓ ◦
まとめ
まとめ ◂ Firebaseを使用することでバックエンド、特にイン フラ構築コストを削減することが可能 ◂ ネイティブアプリだけでなく、Webでも活用するこ とが可能 ◂ Google Cloud
Platformと連携すれば更に便 利になる ◂ デモで使用したコードはこちら https://github.com/chimame/firebase-sample 85
86
87
88 Thanks! ご清聴ありがとうございました。 ◂ rito ◂ @chimame_rt