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
2018 年は Firebase を使ったけど 2019 年は AWS Amplify を使お...
Search
potato4d(Takuma HANATANI)
January 12, 2019
Programming
24
17k
2018 年は Firebase を使ったけど 2019 年は AWS Amplify を使おうと思う / AWS Amplify 2019 #kyotojs
2019/01/12 に #kyotojs で発表したスライドです
potato4d(Takuma HANATANI)
January 12, 2019
Tweet
Share
More Decks by potato4d(Takuma HANATANI)
See All by potato4d(Takuma HANATANI)
どうせキレイに書けない処理は逆にAIに書いてもらうほうが良い説 / #kyotojs 22
potato4d
3
410
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.3k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.9k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
7k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.3k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.7k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
4.2k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
27k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.6k
Other Decks in Programming
See All in Programming
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
250
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.3k
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
1k
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
520
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
380
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
570
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
670
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
1.3k
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
160
チームの境界をブチ抜いていけ
tokai235
0
170
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.3k
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
130
Featured
See All Featured
How to Ace a Technical Interview
jacobian
280
24k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
Context Engineering - Making Every Token Count
addyosmani
5
230
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Optimizing for Happiness
mojombo
379
70k
How STYLIGHT went responsive
nonsquared
100
5.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Fireside Chat
paigeccino
40
3.7k
Transcript
2018 Firebase Λ͚ͬͨͲ 2019 AWS Amplify Λ͓͏ͱࢥ͏ 2019.01.12
#kyotojs HANATANI Takuma(@potato4d)
HANATANI Takuma (@potato4d) • p. at Elevenback / engineer at
LINE corp. • Maintainer at • Vue.js JP Docs (Core maintainer) / Nuxt.js JP Docs (maintainer) • Web Application Developer • — Vue.js, Nuxt.js, Node.js(with TypeScript), Serverless • — User Interface, Micro Interaction, Product Development
ࠓ͍ͨ͜͠ͱ
Firebase ศར
Firebase ؆୯
Firebase ָ .
Firebase ࠷ߴ
ेମݧ͔ͨ͠Βࠓ AWS Amplify Ͱ࠷ߴʹͳΖ͏
Agenda 1. جຊ࠷ߴͳ Firebase ͷ࠷ߴ͡Όͳ͍ͱ͜Ζ 2. AWS ͷ Firebase ର߅അͱͳΔ
"AWS Amplify" 3. Ұ൪खܰʹ͑Δ Amplify Console ͚ͩͰಋೖͯ͠ΈΑ͏
جຊ࠷ߴͳ Firebase ͷ ࠷ߴ͡Όͳ͍ͱ͜Ζ
Firebase ͷࠔͬͨ • ෳڥͷαϙʔτ໘͕Ͳ͏ͯ͠ऑ͍ • ϗεςΟϯάຊ൪ڥͱͯ͠ Fastly Ͱศར͚ͩͲ Deploy Preview
͕ͳ͔ͬͨΓͱෆศ • ͦͦෳͷ environment Λཧ͢ΔͨΊʹϓϩδΣΫτ Λ environment ͷ͚ͩ༻ҙ͢Δඞཁ͕͋Δ • RTDB / Firestore Λ dev ڥͰςετϞʔυʹͰ͖ͨΓศར ͳ෦ଟগ͋Δ͕……ɻ
Firebase ͷࠔͬͨ • Dev ͷαϙʔτखް͍ͷͷ Ops पΓ͕Ͳ͏ͯ͠ශऑ • CI /
CD ڥଘࡏ͠ͳ͍(ࣗ CircleCI ʹҕͶ͍ͯΔ) • গ͠લ·Ͱ Firestore ͷόοΫΞοϓػೳ͕ͳ͔ͬͨ • ͦͷଞӡ༻্ͷ͕ੜͨ͡߹ͷରॲࡦ͕ऑ͔ͬͨ • ࠷ۙೝূใు͖ग़ͤΔΑ͏ʹͳ͓ͬͯΓվળͷ༗
Firebase ͷࠔͬͨ
Firebase ͷࠔͬͨ https://medium.com/google-cloud-jp/firestore-backup-67327a74cd54
Firebase ͷࠔͬͨ • Cloud Functions Ͱ͑ͳ͍ʗΓͨ͘ͳ͍ͷͷಀ͛ઌ͕ͳ͍ • ࣮ Cloud Functions
࠷Ұճ ࣮ߦ͞ΕΔ • ೋճ࣮ߦ͞ΕΔՄೳੑ͕͋Δ͜ͱΛߟ͑ͯΔඞཁੑ • (جຊBlazeϓϥϯͩͱࢥ͏͕) Blaze Ҏ֎ͩͱ OutBound ੍ݶ • Node ͔ͭ FaaS or Express ίʔυʹݶఆ • Google Β͘͠ Custom Runtime ͓Ζ͔ 1 ݴޠ
Firebase ͷࠔͬͨ • ͱͱ Mobile App ٭ͳͷͰ Web ͚ऑ͍ •
ΞφϦςΟΫεܥͯ͢ / ML Kit / ςεςΟϯά / ϨϙʔςΟϯ ά / Ad ͳͲ • શମͰ͍͏ͱఔͷػೳ͕ Web ʹͳ͍ • ϝΠϯػೳ͋Δ͕ɺϫϯετοϓͱݴ͑ͳ͍
खૣ͘࡞Δͱ͖ʹ͏ͪΐͬͱॊೈͳ Alternative ͕΄͍͠
AWS ͷ Firebase ର߅അͱͳΔ "AWS Amplify"
AWS Amplify • AWS ϞόΠϧ͚ϓϥοτϑΥʔϜͱɺͦͷͨΊͷ։ൃϑϨʔϜϫʔΫ • ͱͱ aws-sdk(2MB) + Cognito
SDK Έ͍ͨʹཚཱ & ංେԽ͢ Δ AWS ͷ JavaScript SDK Λ౷߹͢ΔͨΊʹ͡·ͬͨ JavaScript ϥΠϒϥϦͱͯ͠ͷϓϩδΣΫτ • ϥΠϒϥϦݱࡏͰ Web / React Native / iOS / Android ʹରԠ͢ ΔϚϧνϓϥοτϑΥʔϜͳ Amplify Framework ͱมԽͨ͠ • ͦͷޙखΛ͛ɺݱࡏͰ AWS ͷϞόΠϧ͚ϓϥοτϑΥʔϜશ ମΛࢦ͢Α͏ʹมԽ͍ͯ͘͠
AWS Amplify • ఏڙ͍ͯ͠Δػೳ܈ʢҰྫʣ • API ࿈ܞ(AppSync GraphQL / REST
API Gateway) • Authentification (Cognito) • Hosting (CloudFront / S3) • File Storage (S3) • Analytics (Pinpoint & Kinesiss) • etc ...
AWS Amplify ͍͍ͩͨ Firebase ͷϑϧ൛ + α
AWS Amplify ͷྑ͞ • JavaScript ϑϨʔϜϫʔΫͱͷγʔϜϨεͳ࿈ܞ • React / Vue
/ Angular ͦΕͧΕͷઐ༻ SDK ͕ଘࡏ • ͦΕͧΕͷจԽʹ߹Θͤͨ API ͷެࣜͰͷఏڙ • SDK Λ৮ͬͯͰ͖Δ͜ͱશ࣮ͯݱՄೳ • αʔυύʔςΟϑϨʔϜϫʔΫଆͷ࿈ܞϥΠϒϥϦශऑͳ ͜ͱׂ͕ͱଟ͍தɺAWSଆ͔ΒدΓఴ͍ͬͯΔͷͰڠྗ
AWS Amplify ͷྑ͞
AWS Amplify ͷྑ͞
AWS Amplify ͷྑ͞
AWS Amplify ͷྑ͞ • DynamoDB On-Demand ͷొʹΑΔ࿈ܞͷ͢͠͞ • ͜Ε·ͰAWS ಠࣗͷࢼࢉ(ಛʹDynamo)͕Ͳ͏ͯ͠ωοΫ
• Φʔτεέʔϧ͋Δ͕ίετ໘ʗظͰΞΫηε͕Ͷͨ࣌ ͷ͜ͱͳͲ • ڈͷय़͜ΕͰۤ࿑ͯ͠ Firebase Ͱྑ͔ͬͨࣄ͋ͬͨ • 2018 ͷ re:invent Ͱ͚ͬͨͩͷ DynamoDB ͕ొ • Firebase ϨϕϧͷϥΠτ͞Ͱ AWS Πϯϑϥͱͷଓ͕༰қʹ
AWS Amplify ͷྑ͞ https://aws.amazon.com/jp/blogs/news/amazon-dynamodb-on-demand-no-capacity-planning-and-pay-per-request-pricing/
AWS Amplify ͷྑ͞ • ޙΖ͕ී௨ͷ AWS ͳͷͰॊೈੑ͕͋Δ • Amplify Framework
͔Βଓ͍ͯ͠Δͷ࠷ऴతʹͲ͜ʹଐ ͢Δ͔͕໌ه͞Ε͍ͯΔ • (ಛʹAPIͳͲ) Amplify ͔ͩΒͱ͍ͬͯಛʹԿ੍͔ݶ͕͋ΔΘ ͚Ͱͳ͍ͷͰ෯Λͨͤͨ͘ͳͬͨ࣌ʹศར • ͦͷ Firebase ΑΓ͕ࣝඞཁͳؾ͕͢Δ
AWS Amplify ͷྑ͞ https://aws-amplify.github.io/docs/js/analytics
AWS Amplify ͷྑ͞ https://aws-amplify.github.io/docs/js/analytics
AWS Amplify ͷྑ͞ • ࠷ۙ CI / CD ͱϗεςΟϯά͕Ͱ͖Δ Amplify
Console ͕Ͱͨ • Amplify Framework Λར༻͍ͯ͠Δ͔Ͳ͏͔ʹؔΘΒͣ͑Δ • Ϗϧυ → σϓϩΠ → ͕͋Εࠩ͠͠ͷجຊ͕Մೳ • Route 53 > CloudFront (w/ ACM) > S3 ͷఆܗ࡞ۀ͕Ϙλϯ1ͭ • ϒϥϯν͝ͱͷෳڥσϓϩΠΛαϙʔτ(ڥม) • ೝূΛ༩͢Δ͜ͱ͕Ͱ͖ɺ2019/01࣌Ͱ Basic ೝূΛαϙʔτ
AWS Amplify ͷྑ͞ https://aws-amplify.github.io/docs/js/analytics
AWS Amplify ͷྑ͞ • Multi Environment ͷରԠ • શମతʹෳڥʹྗ͕ೖ͍ͬͯΔ •
Console ɺ Amplify Framework ϕʔλͰ͋Δ͕ෳ ڥΛҙࣝͨ͠มߋ͕ಋೖ͞Ε͍ͯΔ • ॳճϦϦʔεΑΓઌ͔ͬ͠Γͱߟ͑ͭͭ։ൃ͢ΔͨΊͷ ͕ Firebase ൺͰἧ͍ͬͯΔҹ
ମݧ Amplify Console
Amplify Console ͓͞Β͍ • Amplify αʔϏεͷதͷҰͭͰ͋ΓɺσϓϩΠपΓ • ݱঢ় CI /
CD ࣮ߦͱϗεςΟϯά͕ҰͭʹͳͬͨαʔϏε • Circle CI + Firebase ͋Δ͍ Netlify ͷڧԽ൛ • ϒϥϯνࢦఆͰͷσϓϩΠϓϨϏϡʔ • 1ͰͰ͖Δ TLS ରԠ / CloudFront ʹΑΔΤοδΩϟογϡ • σϓϩΠϓϨϏϡʔ͝ͱͷΞΫηεೝূ༩
खॱ 1. AWS ΞΧϯτͰϩάΠϯ ← ࠓ͙͢։ઃʂʂʂʂʂʂʂ 2. https://aws.amazon.com/jp/amplify/console/ ʹΞΫηε 3.
ΞϝϦΧਓʹͳΔʢຊʹϦʔδϣϯ͕ͳ͍ͷͰʣ 4. దʹαΠτΛ্ཱͪ͛ͯదͳ Git ϒϥϯνʹ push ͢Δ 5. CI / CD ͕উखʹߦΘΕͯϒϥϯν͝ͱʹσϓϩΠ͞ΕΔ 6. ϕʔγοΫೝূͳͲΛؾܰʹ༩Ͱ͖Δ(ϒϥϯν͝ͱՄ)
σϞͯ͠ΈΔ
Α͋͘Δ࣭ • ๚ऀΞϝϦΧਓ͡Όͳ͍Μ͚ͩͲ • ࡞Δਓ͕ΞϝϦΧਓͳΒ CloudFront ͕ࣗಈͰט·͞ΕΔͷ Ͱɺຊਓ͚ʹշదʹίϯςϯπΛఏڙͰ͖Δ • Netlify
ͰΑ͘ͳ͍ʁ • Deploy Preview ʹ҆ՁͰϕʔγοΫೝূ΄͘͠ͳ͍……ʁ • ͦΕҎલʹ Production ͳΒ࠷େݶ҆ఆͯ͠΄͘͠ͳ͍……ʁ
Α͋͘Δ࣭ • Firebase Hosting Fastly ͚ͩͲ • Θ͔Δ •
͜Ε͋Μ·Γ Amplify ຊମͱؔͳ͘ͳ͍ʁ • AWS ͷϞόΠϧ(Web)ΞϓϦέʔγϣϯ͚ͷαʔϏεू߹ମ ͕ͦ͜ Amplify ͳͷͰ…… • Ұ൪͙͢ʹҠߦͰ͖ͦ͏ͳ෦ͱͯ͠ɺ·ͨ Amplify ʹೖͬͯ Β͏ͱ͖ͬͭʹҰ൪ྑ͍ͱࢥ͏
Α͋͘Δ࣭ • ݁ہ Amplify ࣗମීஈͬͯΔͷʁ • ϑϧ Amplify ΞϓϦέʔγϣϯͷ Production-in
·ͩɻ Console ୯ମ͙͢ಋೖͰ͖ΔͷͰ Production ͍ͬͯ·͢ɻ • Hobby Use ͩͱׂͱ͍ͬͯΔͷͰ 2019 ಋೖ͍ͨ͠ • AmplifyɺFirebase ͰΑ͘ͳ͍ʁ • FirebaseͰ͍͍ͳΒFirebaseͰྑ͍ɻΑ͘ͳ͍࣌ͷબࢶͱͯ͠ॏཁ • AWS ͷձࣾʗGCP ͷձࣾ໌֬ʹ͋ΔͷͰɺͦͷҙຯͰ
Α͋͘Δ࣭ • Firebase ΛΘͳ͘ͳΓͦ͏ʁ • ͦΜͳ͜ͱͳ͍ɻґવͱͯܰ͠ྔͳ Web ΞϓϦέʔγϣϯ ͷ։ൃ Firebase
Λ͍͍ͨ͠ɺ DB Firestore ͕༏ल • ҎԼͷγνϡΤʔγϣϯͰ͍͍ͨ • େ͖Ίͷ API Λ։ൃͯ͠ΨοπϦ࡞ΓࠐΈ͍ͨͱ͖ • Firebase Hosting ࣺͯͯ Amplify Console ʹ͍ͨ͠ • Firebase Auth MFA ͕ͳ͍ͷͰηΩϡΞͳೝূ Amplify
ઈର͏ͧ AWS Amplify 2019