$30 off During Our Annual Pro Sale. View Details »

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

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

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

Keisuke69

July 08, 2018
Tweet

More Decks by Keisuke69

Other Decks in Programming

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