フロントエンドでクラウドを いい感じに使う方法 / Using Cloud From Frontend

2018/07/08に開催されたHTML5 APPS CONFERENCE 2018で発表した際の資料です。

Transcript

1. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Keisuke Nishitani, Specialist SA, AWS Japan K.K 8 July, 2018 ؿٗٝزؒٝسדؙٓؐس׾ ְְ䠬ׄח⢪ֲ倯岀
2. © 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
3. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. ➙傈ךֶ鑧 ؿٗٝزؒٝسַ׵ؙٓؐس׾ְְ䠬ׄח⢪ֲ
4. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. ➙傈ךֶ鑧 ؿٗٝزؒٝسַ׵ؙٓؐس׾ְְ䠬ׄח⢪ֲ
5. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. ➙傈ךֶ鑧 JavaScriptזWeb،فַٔ׵AWS׾ְְ䠬ׄח⢪ֲ
6. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. ➙傈ךֶ鑧 JavaScriptזWeb،فַٔ׵AWS׾ְְ䠬ׄח⢪ֲ SPA
7. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. ؿٗٝزؒٝسؒٝآص،ָؙٓؐس׾ⵃ欽ׅ׷ ꥷך铬겗 • ְ׹׿ז؟٦ؽأ֮׏גו׸⢪ִלְְַ׻ַ׵זְ • ׉׮׉׮荈ⴓ׋׍חꟼ⤘֮׷؟٦ؽأָ֮׷ךַ濼׵זְ • וֲװ׏גفٗؽآّصؚׅٝ׸לְְַ׻ַ׵זְ • ؟٦غ٦׋ג׷הַ״ֻ׻ַ׵זְ׃ծ֮ת׶莆㄂זְ • SDKך⢪ְ倯׻ַ׵זְ • AWSך؟٦ؽأ׾ⵃ欽ׅ׷㜥さ醱侧ךJS׾铣׫鴥׬䗳銲䚍 • API GatewayךIAM钠鏾ך㜥さծؙٔؒأزך縭せָ醱꧟
8. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify
9. © 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
10. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. ⚺銲זJavaScriptؿٖ٦يٙ٦ؙ׾؟ه٦ز React Angular Vue.js (soon)
11. © 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׾欽ְ׋ؙٔؒأزפך縭せ
12. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Cognito ِ٦ؠ٦ך؟؎ٝ،حفծ؟؎ٝ؎ٝהؿؑرٖ٦ءّٝ Webֶ״ןٌغ؎ٕ،فٔぢֽ ِ٦ؠ؟؎ٝ،حفծ؟؎ٝ؎ٝ ぐ珏IDفٗغ؎تה鸬䵿׃׋ ؿؑرٖ٦ءّٝהAWSٔا٦أ פךإُؗ،ז،ؙإأ رغ؎أת׋ָ׏׋ ر٦ةךⰟ剣הず劍
13. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Pinpoint ٥ة٦؜حزׁ׸׋فحءُ鸐濼ծٍؗٝل٦ٝךأ؛آُ٦ؚٔٝה粸׶鵤׃ ٥ؕأةي؎كٝز, ؕأةي㾩䚍ח״׷ِ٦ؠ٦䞔㜠ך　꧊ ٥A/Bذأز, م٦ٕس،ؐزذأز, إًؚٝزⴓ匿, ؿ؋طٕⴓ匿זו׾䲿⣘ 
    
       
    
    
     
14. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon API Gateway 窟♧⻉ׁ׸׋APIך⡲䧭ה盖椚 APIך㹀纏הمأذ؍ؚٝ ؙٓؐس♳ךٔا٦أפך ،ؙإأ钠鏾 AWSךAuth׾崞欽 غحؙؒٝس⥂隊ך׋׭ך DDoS㼎瘻װأٗحزؚٔٝ طحزٙ٦ؙزٓؿ؍حؙך盖椚
15. © 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
16. © 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׾欽ְ׋ة٦؜ذ؍ֶؚٝ״ןٍؗٝل٦ٝفحءُ
17. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS AppSync ؿٕوط٦آسזGraphQL ؟٦ؽأ ٔ،ٕة؎ي堣腉הؔؿٓ؎ٝ堣腉 • Ⱏ剣ر٦ة׾ٔ،ٕة؎يח剑倜⻉ • ؔؿٓ؎ٝ儗ךر٦ة刿倜הؔٝٓ؎ٝ儗ךؙٓؐسפךず劍 醱侧ךر٦ةا٦أ׾؟ه٦ز • DynamoDB / Elastic Search / Lambda • Lambdaָ⢪ִ׷ךד㹋颵⡦ד׮דֹ׷կ㢩鿇API׮OK
18. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. GraphQLהכ API 欽ךؙؒٔ鎉铂 • 㘗ءأذيח׮הבְ׋ؙؒٔ㹋遤ך׋׭ך؟٦غ٦⩎ٓٝة ؎ي ؙٓ؎،ٝزָ؟٦غ٦ַ׵ر٦ة׾《䖤ծ㢌刿ծ飑铣דֹ׷ ״ֲחׅ׷׋׭ךر٦ة鎉铂 GraphQLؙؒٔ • ؙٓ؎،ٝزָٖأهٝأך䕎䒭׾䭷㹀 • ؙٓ؎،ٝزכ䗳銲זر٦ةך׫׾䗳銲ז䕎䒭ד撑⠓〳腉
19. © 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 } } ،فٔךأؗ٦وה ٌرٕر٦ة ؙٓ؎،ٝزָ䗳銲ז ׮ך׌ֽ׾ؙٔؒأز ؙٔؒأز׃׋ر٦ة ׌ָֽ鵤ׁ׸׷
20. © 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” }]
21. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplifyדדֹ׷ֿה ؎ٝةؙٓءّٝ • Amazon Lex׾ⵃ欽׃׋堣唒㷕统׾ك٦أה׃׋⠓鑧䕎نحزך⡲䧭 PubSub • AWS IoT׮׃ֻכ♧菙涸זMQTT׾欽ְ׋PubSubך㹋鄲 Caching • ر٦ةأز،׾欽ְ׋♧菙涸זLRUٍؗحءُ堣圓ך㹋鄲 㕂ꥷ⻉㼎䘔
22. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify׾⢪׏׋Ꟛ涪ך䩛갫 AWSٔا٦أ ך鏣㹀 IAMך鏣㹀 Client SDK ך鏣㹀 ؝٦ر؍ؚٝ
23. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify׾⢪׏׋Ꟛ涪ך䩛갫 AWSٔا٦أ ך鏣㹀 IAMך鏣㹀 Client SDK ך鏣㹀 ؝٦ر؍ؚٝ AWS Mobile Hub + AWS Mobile CLIד鏣㹀〳腉
24. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Demo
25. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
26. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. תה׭ AWS Amplify • ؿٗٝزؒٝسؒٝآص،ך׋׭ךٓ؎ـٓٔ • ぐ珏JSؿٖ٦يٙ٦ؙ׾؟ه٦ز ؟٦غ٦׾圓眠ׇ׆חⵃ欽דֹ׷䌴䎢ְ؟٦ؽأ纇 • AWS LambdaծAWS AppSyncծAmazon Pinpoint…
27. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Let’s happy coding !
28. "84
    %FW%BZ 5PLZP
    
    Ꟛ⪵寸㹀 ⯓遤歍׃鴥׫㹋倵⚥ "84
    %FW%BZ כծ،فٔ؛٦ءّٝꟚ涪׾遤ֲركٗحػ٦ך涺圫ך׋׭ךծؚٗ٦غٕ ذؙظٗآ٦؎كٝزדׅկ،فٔꟚ涪חꟼ鸬ׅ׷"84ך㹋騧涸ז䞔㜠כ׮׍׹׿ծ㕂ⰻ 㢩ך✲⢽׾鸐ׄ׋كأزفؙٓذ؍أ׾ծذؙصٕؕإحءّٝծعٝؤؔٝծعحؕا ٝծٙ٦ؙءّحفծٓ؎زصؚٝز٦ؙזו圫ղז䕎דֶ㾈ֽ׃תׅկ 䎃 剢 傈 剢
    ։ 剢 傈 ꆃ ،وبٝ ؐؑـ ؟٦ؽأ آٍػٝ 匌❨٥湡랲 أزٔ٦ىؚٝ⚥竰׮㹋倵✮㹀דׅ ⯓遤涫ꐮ갥ְ׋倯חכծ姻䒭歍鴥Ꟛ㨣儗חծְ׍傍ֻ ׀涫ꐮ갥ֽ׷״ֲ׀鸬窃׾ְ׋׃תׅկ IUUQTBN[OUPEFWEBZ DEV DAY "84%FW "84%FW%BZ