フロントエンドでクラウドを いい感じに使う方法 / 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
   ؿٗٝزؒٝسדؙٓؐس׾
   ְְ䠬ׄח⢪ֲ倯岀
   

   View Slide

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
   

   View Slide

3. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
   ➙傈ךֶ鑧
   ؿٗٝزؒٝسַ׵ؙٓؐس׾ְְ䠬ׄח⢪ֲ
   

   View Slide

4. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
   ➙傈ךֶ鑧
   ؿٗٝزؒٝسַ׵ؙٓؐس׾ְְ䠬ׄח⢪ֲ
   

   View Slide

5. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
   ➙傈ךֶ鑧
   JavaScriptזWeb،فַٔ׵AWS׾ְְ䠬ׄח⢪ֲ
   

   View Slide

6. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
   ➙傈ךֶ鑧
   JavaScriptזWeb،فַٔ׵AWS׾ְְ䠬ׄח⢪ֲ
   SPA
   

   View Slide

7. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
   ؿٗٝزؒٝسؒٝآص،ָؙٓؐس׾ⵃ欽ׅ׷
   ꥷך铬겗
   • ְ׹׿ז؟٦ؽأ֮׏גו׸⢪ִלְְַ׻ַ׵זְ
   • ׉׮׉׮荈ⴓ׋׍חꟼ⤘֮׷؟٦ؽأָ֮׷ךַ濼׵זְ
   • וֲװ׏גفٗؽآّصؚׅٝ׸לְְַ׻ַ׵זְ
   • ؟٦غ٦׋ג׷הַ״ֻ׻ַ׵זְ׃ծ֮ת׶莆㄂זְ
   • SDKך⢪ְ倯׻ַ׵זְ
   • AWSך؟٦ؽأ׾ⵃ欽ׅ׷㜥さ醱侧ךJS׾铣׫鴥׬䗳銲䚍
   • API GatewayךIAM钠鏾ך㜥さծؙٔؒأزך縭せָ醱꧟
   

   View Slide

8. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
   AWS Amplify
   

   View Slide

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
   

   View Slide

10. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
    ⚺銲זJavaScriptؿٖ٦يٙ٦ؙ׾؟ه٦ز
    React Angular Vue.js
    (soon)
    

    View Slide

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׾欽ְ׋ؙٔؒأزפך縭せ
    

    View Slide

12. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
    Amazon Cognito
    ِ٦ؠ٦ך؟؎ٝ،حفծ؟؎ٝ؎ٝהؿؑرٖ٦ءّٝ
    Webֶ״ןٌغ؎ٕ،فٔぢֽ
    ِ٦ؠ؟؎ٝ،حفծ؟؎ٝ؎ٝ
    ぐ珏IDفٗغ؎تה鸬䵿׃׋
    ؿؑرٖ٦ءّٝהAWSٔا٦أ
    פךإُؗ،ז،ؙإأ
    رغ؎أת׋ָ׏׋
    ر٦ةךⰟ剣הず劍
    

    View Slide

13. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
    Amazon Pinpoint
    ٥ة٦؜حزׁ׸׋فحءُ鸐濼ծٍؗٝل٦ٝךأ؛آُ٦ؚٔٝה粸׶鵤׃
    ٥ؕأةي؎كٝز, ؕأةي㾩䚍ח״׷ِ٦ؠ٦䞔㜠ך　꧊
    ٥A/Bذأز, م٦ٕس،ؐزذأز, إًؚٝزⴓ匿, ؿ؋طٕⴓ匿זו׾䲿⣘
    
    
    
    
    

    View Slide

14. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
    Amazon API Gateway
    窟♧⻉ׁ׸׋APIך⡲䧭ה盖椚
    APIך㹀纏הمأذ؍ؚٝ
    ؙٓؐس♳ךٔا٦أפך
    ،ؙإأ钠鏾
    AWSךAuth׾崞欽
    غحؙؒٝس⥂隊ך׋׭ך
    DDoS㼎瘻װأٗحزؚٔٝ
    طحزٙ٦ؙزٓؿ؍حؙך盖椚
    

    View Slide

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
    

    View Slide

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׾欽ְ׋ة٦؜ذ؍ֶؚٝ״ןٍؗٝل٦ٝفحءُ
    

    View Slide

17. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
    AWS AppSync
    ؿٕوط٦آسזGraphQL ؟٦ؽأ
    ٔ،ٕة؎ي堣腉הؔؿٓ؎ٝ堣腉
    • Ⱏ剣ر٦ة׾ٔ،ٕة؎يח剑倜⻉
    • ؔؿٓ؎ٝ儗ךر٦ة刿倜הؔٝٓ؎ٝ儗ךؙٓؐسפךず劍
    醱侧ךر٦ةا٦أ׾؟ه٦ز
    • DynamoDB / Elastic Search / Lambda
    • Lambdaָ⢪ִ׷ךד㹋颵⡦ד׮דֹ׷կ㢩鿇API׮OK
    

    View Slide

18. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
    GraphQLהכ
    API 欽ךؙؒٔ鎉铂
    • 㘗ءأذيח׮הבְ׋ؙؒٔ㹋遤ך׋׭ך؟٦غ٦⩎ٓٝة
    ؎ي
    ؙٓ؎،ٝزָ؟٦غ٦ַ׵ر٦ة׾《䖤ծ㢌刿ծ飑铣דֹ׷
    ״ֲחׅ׷׋׭ךر٦ة鎉铂
    GraphQLؙؒٔ
    • ؙٓ؎،ٝزָٖأهٝأך䕎䒭׾䭷㹀
    • ؙٓ؎،ٝزכ䗳銲זر٦ةך׫׾䗳銲ז䕎䒭ד撑⠓〳腉
    

    View Slide

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
    }
    }
    ،فٔךأؗ٦وה
    ٌرٕر٦ة
    ؙٓ؎،ٝزָ䗳銲ז
    ׮ך׌ֽ׾ؙٔؒأز
    ؙٔؒأز׃׋ر٦ة
    ׌ָֽ鵤ׁ׸׷
    

    View Slide

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”
    }]
    

    View Slide

21. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
    AWS Amplifyדדֹ׷ֿה
    ؎ٝةؙٓءّٝ
    • Amazon Lex׾ⵃ欽׃׋堣唒㷕统׾ك٦أה׃׋⠓鑧䕎نحزך⡲䧭
    PubSub
    • AWS IoT׮׃ֻכ♧菙涸זMQTT׾欽ְ׋PubSubך㹋鄲
    Caching
    • ر٦ةأز،׾欽ְ׋♧菙涸זLRUٍؗحءُ堣圓ך㹋鄲
    㕂ꥷ⻉㼎䘔
    

    View Slide

22. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
    AWS Amplify׾⢪׏׋Ꟛ涪ך䩛갫
    AWSٔا٦أ
    ך鏣㹀
    IAMך鏣㹀
    Client SDK
    ך鏣㹀
    ؝٦ر؍ؚٝ
    

    View Slide

23. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
    AWS Amplify׾⢪׏׋Ꟛ涪ך䩛갫
    AWSٔا٦أ
    ך鏣㹀
    IAMך鏣㹀
    Client SDK
    ך鏣㹀
    ؝٦ر؍ؚٝ
    AWS Mobile Hub + AWS Mobile CLIד鏣㹀〳腉
    

    View Slide

24. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
    Demo
    

    View Slide

25. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
    

    View Slide

26. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
    תה׭
    AWS Amplify
    • ؿٗٝزؒٝسؒٝآص،ך׋׭ךٓ؎ـٓٔ
    • ぐ珏JSؿٖ٦يٙ٦ؙ׾؟ه٦ز
    ؟٦غ٦׾圓眠ׇ׆חⵃ欽דֹ׷䌴䎢ְ؟٦ؽأ纇
    • AWS LambdaծAWS AppSyncծAmazon Pinpoint…
    

    View Slide

27. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
    Let’s happy coding !
    

    View Slide

28. "84%FW%BZ 5PLZPꟚ⪵寸㹀
    ⯓遤歍׃鴥׫㹋倵⚥
    "84%FW%BZ כծ،فٔ؛٦ءّٝꟚ涪׾遤ֲركٗحػ٦ך涺圫ך׋׭ךծؚٗ٦غٕ
    ذؙظٗآ٦؎كٝزדׅկ،فٔꟚ涪חꟼ鸬ׅ׷"84ך㹋騧涸ז䞔㜠כ׮׍׹׿ծ㕂ⰻ
    㢩ך✲⢽׾鸐ׄ׋كأزفؙٓذ؍أ׾ծذؙصٕؕإحءّٝծعٝؤؔٝծعحؕا
    ٝծٙ٦ؙءّحفծٓ؎زصؚٝز٦ؙזו圫ղז䕎דֶ㾈ֽ׃תׅկ
    䎃
    剢
    傈 剢
    ։
    剢
    傈 ꆃ
    
    ،وبٝ ؐؑـ ؟٦ؽأ آٍػٝ 匌❨٥湡랲
    
    أزٔ٦ىؚٝ⚥竰׮㹋倵✮㹀דׅ
    ⯓遤涫ꐮ갥ְ׋倯חכծ姻䒭歍鴥Ꟛ㨣儗חծְ׍傍ֻ
    ׀涫ꐮ갥ֽ׷״ֲ׀鸬窃׾ְ׋׃תׅկ
    IUUQTBN[OUPEFWEBZ
    DEV
    DAY
    "84%FW "84%FW%BZ
    

    View Slide