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
700
脱Firebase. 我々はどう生きるか/Migrate from Firebase
keisuke69
7
9.1k
AWSでISRの実現!その謎を解明すべくAmazonの奥地へと足を踏み入れる!! / Digging how to running ISR on AWS
keisuke69
4
9.5k
様式美と絵に書いた餅、そしてそこにあるリアル
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
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
430
CSC305 Summer Lecture 12
javiergs
PRO
0
130
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
1
570
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
440
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
110
個人軟體時代
ethanhuang13
0
310
複雑なドメインに挑む.pdf
yukisakai1225
5
980
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
160
Honoアップデート 2025年夏
yusukebe
1
920
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
220
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
380
アセットのコンパイルについて
ojun9
0
110
Featured
See All Featured
Facilitating Awesome Meetings
lara
55
6.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
A designer walks into a library…
pauljervisheath
207
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Thoughts on Productivity
jonyablonski
70
4.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Embracing the Ebb and Flow
colly
87
4.8k
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