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
680
脱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.6k
フロントエンド開発者も知っておきたい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
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
660
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.2k
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
100
Effect の双対、Coeffect
yukikurage
5
1.4k
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
技術同人誌をMCP Serverにしてみた
74th
0
270
CursorはMCPを使った方が良いぞ
taigakono
1
170
Claude Codeの使い方
ttnyt8701
1
130
関数型まつりレポート for JuliaTokai #22
antimon2
0
150
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
120
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
170
Featured
See All Featured
Producing Creativity
orderedlist
PRO
346
40k
Unsuck your backbone
ammeep
671
58k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Statistics for Hackers
jakevdp
799
220k
Designing for humans not robots
tammielis
253
25k
Done Done
chrislema
184
16k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Embracing the Ebb and Flow
colly
86
4.7k
GraphQLとの向き合い方2022年版
quramy
47
14k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Code Reviewing Like a Champion
maltzj
524
40k
Balancing Empowerment & Direction
lara
1
360
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