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
フロントエンドでクラウドを いい感じに使う方法 / Using Cloud From Fron...
Search
Keisuke69
July 08, 2018
Programming
3
910
フロントエンドでクラウドを いい感じに使う方法 / Using Cloud From Frontend
2018/07/08に開催されたHTML5 APPS CONFERENCE 2018で発表した際の資料です。
Keisuke69
July 08, 2018
Tweet
Share
More Decks by Keisuke69
See All by Keisuke69
CTOから見た事業開発とプロダクト開発 / My Perspective on Business and Product Development as CTO
keisuke69
4
1.3k
波濤 / Surges
keisuke69
1
190
クロスプラットフォーム開発の真実
keisuke69
2
700
脱Firebase. 我々はどう生きるか/Migrate from Firebase
keisuke69
7
9.1k
AWSでISRの実現!その謎を解明すべくAmazonの奥地へと足を踏み入れる!! / Digging how to running ISR on AWS
keisuke69
4
9.4k
様式美と絵に書いた餅、そしてそこにあるリアル
keisuke69
0
5.6k
俺のJestが動かない 2021 Spring / My Jest does not work well 2021 Spring
keisuke69
0
7.7k
フロントエンド開発者も知っておきたいAWS Lambda とサーバーレス / Serverless for frontend developers
keisuke69
6
8k
Pythonistaに贈るAWS Lambda入門 / AWS Lambda Essentials for Pythonista
keisuke69
2
4.9k
Other Decks in Programming
See All in Programming
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
700
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
9k
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
4
6.4k
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
630
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
12k
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
980
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
230
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
110
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
How GitHub (no longer) Works
holman
314
140k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Navigating Team Friction
lara
187
15k
Done Done
chrislema
184
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Transcript
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Keisuke Nishitani, Specialist SA, AWS Japan K.K 8 July, 2018 ؿٗٝزؒٝسדؙٓؐس ְְ䠬ׄח⢪ֲ倯岀
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Who am I ? Keisuke Nishitani Specialist Solutions Architect Amazon Web Service Japan K.K @Keisuke69 Keisuke69 Keisuke69 Keisuke69 Keisuke69x
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. ➙傈ךֶ鑧 ؿٗٝزؒٝسַؙٓؐسְְ䠬ׄח⢪ֲ
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. ➙傈ךֶ鑧 ؿٗٝزؒٝسַؙٓؐسְְ䠬ׄח⢪ֲ
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. ➙傈ךֶ鑧 JavaScriptזWeb،فַٔAWSְְ䠬ׄח⢪ֲ
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. ➙傈ךֶ鑧 JavaScriptזWeb،فַٔAWSְְ䠬ׄח⢪ֲ SPA
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. ؿٗٝزؒٝسؒٝآص،ָؙٓؐسⵃ欽ׅ ꥷך铬겗 • ְז؟٦ؽأ֮גו⢪ִלְְַַזְ • 荈ⴓחꟼ⤘֮؟٦ؽأָ֮ךַ濼זְ • וֲװגفٗؽآّصؚׅٝלְְַַזְ • ؟٦غ٦גהַ״ַֻזְ׃ծ֮ת莆זְ • SDKך⢪ְ倯ַזְ • AWSך؟٦ؽأⵃ欽ׅ㜥さ醱侧ךJS铣鴥䗳銲䚍 • API GatewayךIAM钠鏾ך㜥さծؙٔؒأزך縭せָ醱꧟
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. AWS Amplify
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. AWS Amplify • ؿٗٝزؒٝسֶ״ןٌغ؎ٕ涪罏ぢֽךؔ٦فٝ ا٦أךJavaScriptٓ؎ـٓٔ • AWSך؟٦ؽأ⢪ג㹋鄲ׅꥷח״ֻⵃ欽ׁة أؙ،فٔ؛٦ءّٝח知⽃ח穈鴥 • https://github.com/aws/aws-amplify • ؎ٝأز٦ٕ $ npm install aws-amplify $ npm install aws-amplify-react
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. ⚺銲זJavaScriptؿٖ٦يٙ٦ؙ؟ه٦ز React Angular Vue.js (soon)
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. AWS Amplifyדדֹֿה Auth • Amazon Cognito User Poolⵃ欽׃♧菙涸ז؟؎ٝ؎ٝח䗳銲זⳢ椚؟؎ٝ ؎ٝծ؟؎ٝ،حفծػأٙ٦س䘌 • MFA Analytics • ،فٔךⴓ匿湡涸ה׃Amazon Pinpointפךر٦ة鷏⥋ • ؕأةي㾩䚍⦼װؕأةيًزؙٔأח㼎䘔 API • Amazon API GatewayפךؙٔؒأزⳢ椚 • AWS Signature Version 4欽ְؙٔؒأزפך縭せ
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Amazon Cognito ِ٦ؠ٦ך؟؎ٝ،حفծ؟؎ٝ؎ٝהؿؑرٖ٦ءّٝ Webֶ״ןٌغ؎ٕ،فٔぢֽ ِ٦ؠ؟؎ٝ،حفծ؟؎ٝ؎ٝ ぐ珏IDفٗغ؎تה鸬䵿׃ ؿؑرٖ٦ءّٝהAWSٔا٦أ פךإُؗ،ז،ؙإأ رغ؎أתָ ر٦ةךⰟ剣הず劍
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Amazon Pinpoint ٥ة٦حزׁفحءُ鸐濼ծٍؗٝل٦ٝךأ؛آُ٦ؚٔٝה粸鵤׃ ٥ؕأةي؎كٝز, ؕأةي㾩䚍ח״ِ٦ؠ٦䞔㜠ך ꧊ ٥A/Bذأز, م٦ٕس،ؐزذأز, إًؚٝزⴓ匿, ؿ؋طٕⴓ匿זו䲿⣘
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Amazon API Gateway 窟♧⻉ׁAPIך⡲䧭ה盖椚 APIך㹀纏הمأذ؍ؚٝ ؙٓؐس♳ךٔا٦أפך ،ؙإأ钠鏾 AWSךAuth崞欽 غحؙؒٝس⥂隊ךך DDoS㼎瘻װأٗحزؚٔٝ طحزٙ٦ؙزٓؿ؍حؙך盖椚
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. 2D:D* ' )%(&+=@0D3>B C AWS Lambda 157 ,B<? #!"$ (1D8* &(1D8* ;495A46/'<-D.5
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. AWS Amplifyדדֹֿה GraphQLؙٓ؎،ٝز • AWS AppSync׃ֻכך➭ךGraphQL؟٦غⵃ欽ׅꥷךؙٓ؎،ٝز Storage • Amazon S3ח㼎ِׅ٦ؠ؝ٝذٝخך،حفٗ٦سծتؐٝٗ٦سהְ 堣腉ךءٝفٕזㄎן⳿׃ • Public/Protected/Privateך3珏겲ך،ؙإأٖكٕך盖椚 Push鸐濼 • Amazon Pinpoint欽ְة٦ذ؍ֶؚٝ״ןٍؗٝل٦ٝفحءُ
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. AWS AppSync ؿٕوط٦آسזGraphQL ؟٦ؽأ ٔ،ٕة؎ي堣腉הؔؿٓ؎ٝ堣腉 • Ⱏ剣ر٦ةٔ،ٕة؎يח剑倜⻉ • ؔؿٓ؎ٝ儗ךر٦ة刿倜הؔٝٓ؎ٝ儗ךؙٓؐسפךず劍 醱侧ךر٦ةا٦أ؟ه٦ز • DynamoDB / Elastic Search / Lambda • Lambdaָ⢪ִךד㹋颵⡦דדֹկ㢩鿇APIOK
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. GraphQLהכ API 欽ךؙؒٔ鎉铂 • 㘗ءأذيחהבְؙؒٔ㹋遤ךך؟٦غ٦⩎ٓٝة ؎ي ؙٓ؎،ٝزָ؟٦غ٦ַر٦ة《䖤ծ㢌刿ծ飑铣דֹ ״ֲחׅךر٦ة鎉铂 GraphQLؙؒٔ • ؙٓ؎،ٝزָٖأهٝأך䕎䒭䭷㹀 • ؙٓ؎،ٝزכ䗳銲זر٦ةך䗳銲ז䕎䒭ד撑⠓〳腉
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. GraphQLהכ { "id": "1", "name": "Get Milk", “priority": "1" }, { "id": "2", "name": "Go to gym", "priority": "5" },… type Query { getTodos: [Todo] } type Todo { id: ID! name: String description: String priority: Int duedate: String } query { getTodos { id name priority } } ،فٔךأؗ٦وה ٌرٕر٦ة ؙٓ؎،ٝزָ䗳銲ז ךֽؙٔؒأز ؙٔؒأز׃ر٦ة ָֽ鵤ׁ
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. GraphQL Subscription קרٔ،ٕة؎يדر٦ة؟ـأؙٓ؎ـ Mutationزٔؖ٦ח׃؎كٝزك٦أٌ٦س AppSyncך⟣䠐ךر٦ةا٦أ⢪ִ • Lambda, DynamoDB, Elasticsearch mutation addPost( id:123 title: ”New post!” author:”Nadia”){ id title author } data: [{ id:123, title:”New Post!” author:”Nadia” }]
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. AWS Amplifyדדֹֿה ؎ٝةؙٓءّٝ • Amazon Lexⵃ欽׃堣唒㷕统ك٦أה׃⠓鑧䕎نحزך⡲䧭 PubSub • AWS IoT׃ֻכ♧菙涸זMQTT欽ְPubSubך㹋鄲 Caching • ر٦ةأز،欽ְ♧菙涸זLRUٍؗحءُ堣圓ך㹋鄲 㕂ꥷ⻉㼎䘔
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. AWS Amplify⢪涪ך䩛갫 AWSٔا٦أ ך鏣㹀 IAMך鏣㹀 Client SDK ך鏣㹀 ؝٦ر؍ؚٝ
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. AWS Amplify⢪涪ך䩛갫 AWSٔا٦أ ך鏣㹀 IAMך鏣㹀 Client SDK ך鏣㹀 ؝٦ر؍ؚٝ AWS Mobile Hub + AWS Mobile CLIד鏣㹀〳腉
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Demo
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved.
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. תה AWS Amplify • ؿٗٝزؒٝسؒٝآص،ךךٓ؎ـٓٔ • ぐ珏JSؿٖ٦يٙ٦ؙ؟ه٦ز ؟٦غ٦圓眠ׇ׆חⵃ欽דֹ䌴䎢ְ؟٦ؽأ纇 • AWS LambdaծAWS AppSyncծAmazon Pinpoint…
© 2018, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Let’s happy coding !
"84%FW%BZ 5PLZP⪵寸㹀 ⯓遤歍׃鴥㹋倵⚥ "84%FW%BZ כծ،فٔ؛٦ءّٝ涪遤ֲركٗحػ٦ך涺圫ךךծؚٗ٦غٕ ذؙظٗآ٦؎كٝزדׅկ،فٔ涪חꟼ鸬ׅ"84ך㹋騧涸ז䞔㜠כծ㕂ⰻ 㢩ך✲⢽鸐ׄكأزفؙٓذ؍أծذؙصٕؕإحءّٝծعٝؤؔٝծعحؕا ٝծٙ٦ؙءّحفծٓ؎زصؚٝز٦ؙזו圫ղז䕎דֶ㾈ֽ׃תׅկ 䎃 剢
傈 剢 ։ 剢 傈 ꆃ ،وبٝ ؐؑـ ؟٦ؽأ آٍػٝ 匌❨٥湡랲 أزٔ٦ىؚٝ⚥竰㹋倵✮㹀דׅ ⯓遤涫ꐮ갥ְ倯חכծ姻䒭歍鴥㨣儗חծְ傍ֻ ׀涫ꐮ갥ֽ״ֲ׀鸬窃ְ׃תׅկ IUUQTBN[OUPEFWEBZ DEV DAY "84%FW "84%FW%BZ