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
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.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
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
2
260
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
180
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
6
790
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
1
2k
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
980
Understanding Ruby Grammar Through Conflicts
yui_knk
1
120
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
180
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
380
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
150
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
650
🔨 小さなビルドシステムを作る
momeemt
1
410
CEDEC2025 長期運営ゲームをあと10年続けるための0から始める自動テスト ~4000項目を50%自動化し、月1→毎日実行にした3年間~
akatsukigames_tech
0
150
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
BBQ
matthewcrist
89
9.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
RailsConf 2023
tenderlove
30
1.2k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.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