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
920
フロントエンドでクラウドを いい感じに使う方法 / 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
200
クロスプラットフォーム開発の真実
keisuke69
2
710
脱Firebase. 我々はどう生きるか/Migrate from Firebase
keisuke69
7
9.2k
AWSでISRの実現!その謎を解明すべくAmazonの奥地へと足を踏み入れる!! / Digging how to running ISR on AWS
keisuke69
4
9.6k
様式美と絵に書いた餅、そしてそこにあるリアル
keisuke69
0
5.7k
俺の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
5k
Other Decks in Programming
See All in Programming
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
400
Six and a half ridiculous things to do with Quarkus
hollycummins
0
170
CSC509 Lecture 06
javiergs
PRO
0
260
CSC305 Lecture 05
javiergs
PRO
0
210
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
9
1.7k
Software Architecture
hschwentner
6
2.3k
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
1k
All About Angular's New Signal Forms
manfredsteyer
PRO
0
160
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
1.3k
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2.5k
dynamic!
moro
10
7.9k
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
420
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Embracing the Ebb and Flow
colly
88
4.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
It's Worth the Effort
3n
187
28k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Site-Speed That Sticks
csswizardry
12
900
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
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