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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

© 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

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Slide 9

Slide 9 text

© 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

Slide 10

Slide 10 text

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

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