AWS Amplify for Serverless apps

2019/7/6に開催された Hamamatsu.js #7での発表資料です。
https://connpass.com/event/132081/

Transcript

1. AWS Amplify Ͱ
   ര଎αʔόʔϨεΞϓϦέʔγϣϯ։ൃ 2019.7.6 Hamamatsu.js #7
2. Yuto Ogi Web Developper at AIRS @jacoyutorius Skill Ruby, Rails Javascript, Vue.js, React, AWS Alexa Skills Community Hamamatsu.rb, JAWS-UG, Hamamatsu.js
3. AWS Amplify is, "84্ʹߏங͢ΔϞόΠϧɾ8FCΞϓϦέʔγϣϯͷ όοΫΤϯυΛྑ͍ײ͡ʹߏஙͯ͘͠ΕΔ
   αʔόʔϨεΞϓϦέʔγϣϯ޲͚ϑϨʔϜϫʔΫ
4. Serverless
5. Serverless ? ίϯςφϕʔεͷίϯϐϡʔςΟϯάαʔϏε Ϋϥ΢υετϨʔδ +BWBTDSJQUϑϨʔϜϫʔΫ
6. why Serverless ? • Webαʔόʔཱͯͨ͘ͳ͍ • ҡ࣋අ͔͔Δ • ϝϯςφϯεΊΜͲ͏(ηΩϡϦςΟ, ߋ৽, etc) JavascriptͰॻ͍ͨΞϓϦέʔγϣϯΛಈ͔͢ʹ͸΄ͱΜͲͷ৔߹αʔόʔ͕ඞཁ
7. why Serverless ? ࡢࠓͷΫϥ΢υετϨʔδʹ͸ WebαΠτΛϗεςΟϯάͰ͖Δػೳ͕෇ ͍͍ͯΔ Ϋϥ΢υετϨʔδ •Amazon S3 (AWS) •Azure Storage (Microsofr Azure) •CloudStorage (GCP) •Object Storage Service (Alibaba Cloud)
8. why Serverless ? •AWS Lambda (AWS) •Azure Functions (Microsoft Azure) •Google Cloud Functions (GCP) •Function Compute (Alibaba Cloud) ίϯςφϕʔεͷίϯϐϡʔςΟϯάαʔϏε ϦΫΤετΛड͚ΔͱΫϥ΢υ্Ͱίϯςφ͕ىಈ͠ɺ͋Β͔͡Ίઃఆ͓͍ͯͨ͠ ίʔυ͕࣮ߦ͞ΕΔ
9. why Serverless ? ϑϨʔϜϫʔΫʹΑͬͯߏ଄Խ͞ΕͨσʔλͷऔΓճ͠΍Πϕϯτͷ࣮૷͕΍Γ΍͘͢ +BWBTDSJQU
   ϑϨʔϜϫʔΫ •Angular •React •Vue •Backbone •etc
10. why AWS ? αʔόʔϨεΞʔΩςΫνϟΛߏ੒͢Δཁૉͷ͏ͪɺΫϥ΢υଆͷϦιʔεߏ ங͕ߴ౓ʹ౷߹͞Ε͍ͯΔ
    4BB4ͱ͔40"ͱ͔͔ͳΓੲʹฉ͍ͨݴ༿Ͱ͕͢ɺ
    "84ͷ֤छαʔϏε͸୯ಠͷαʔϏε &$
    4
    3%4
    $MPVE'PSNBUJPO౳
    ͱͦΕΒΛ ૊Έ߹ΘͤͨϚωʔδυαʔϏε &MBTUJD#FBOTUBML
    $MPVE
    "NQMJGZ
    ʹେผͰ͖Δɻ
    
    
    
    ϚωʔδυαʔϏεͰ͸ରԠͰ͖ͳ͍ϫʔΫϑϩʔΛߏங͍ͨ͠৔߹ʹ͸
    ୯ಠͷαʔϏεΛ
    ಠࣗʹ૊Έ߹ΘͤΔ͜ͱͰಉ༷ͷ࢓૊ΈΛߏஙͰ͖Δɻ
11. Amplify APIs •analytics •api •auth •function •hosting •interactions •notifications •storage •xr
12. Amplify for … •iOS •Android •Web (ES6, React, Vue, Angular) •React Native
13. Settings 1. install amplify 2. account setting $ npm install -g @aws-amplify/cli $ amplify configure
15. Architecture
16. amplify hosting
17. Amplify APIs •analytics •api •auth •function •hosting •interactions •notifications •storage •xr
18. amplify hosting •Amazon S3 ্ͰHTMLͷϗεςΟϯά •S3 ଆͷઃఆ͸CloudFormationͰશͯࣗಈԽ •amplify cli Λ࣮ߦ͢ΔͱCloudFormationఆٛϑΝΠϧ͕࡞੒͞ΕΔ
19. S3 ? •Ϋϥ΢υετϨʔδ •Route53(DNSαʔϏε) ΍ CloudFront(CDN) ͱͷ࿈ܞ΋༰қ •Amplify ͷΦϓγϣϯͰ S3 + CloudFront ͷߏங΋Ͱ͖Δ •Ξοϓϩʔυ͞ΕͨϑΝΠϧ͸ෳ਺ͷσʔληϯλʔʹόοΫΞοϓ͞ΕΔ •99.999999999 % ͷ଱ٱੑ •؆୯ͳWebαΠτͳΒֹ݄¥10ఔ౓Ͱӡ༻Ͱ͖Δ
20. CloudFormation ? •JSON·ͨ͸YAMLܗࣜͷϑΝΠϧʹ AWSͷϦιʔεఆٛΛهड़͠ɺϚωʔ δϝϯτίϯιʔϧ΍APIʹ࣮ͯߦ͢Δ •ΞʔΩςΫνϟͷ࠶ར༻ •ࣗಈԽ
21. amplify status $ amplify status Current Environment: dev | Category | Resource name | Operation | Provider plugin | | ——————— | ——————————— | -------————-- | -------------—————-- | amplify Ͱ༗ޮԽ͞Ε͍ͯΔAWSϦιʔεΛ֬ೝ͢Δ
22. initialize amplify with Vue apps $ amplify init Note: It is recommended to run this command from the root of your app directory ? Enter a name for the project amplify-storage ? Enter a name for the environment dev ? Choose your default editor: Visual Studio Code ? Choose the type of app that you're building javascript Please tell us about your project ? What javascript framework are you using vue ? Source Directory Path: src ? Distribution Directory Path: dist ? Build Command: yarn build ? Start Command: yarn serve
23. hosting 1. add hosting 2. deploy $ amplify add hosting $ amplify publish S3ͷ”੩తαΠτϗεςΟϯά” ΦϓγϣϯΛ༗ޮԽͨ͠όέοτΛ࡞੒ yarn build Ͱੜ੒͞Εͨ HTML/JS Λ S3όέοτ ΁Ξοϓϩʔυ
24. $ amplify status Current Environment: dev | Category | Resource name | Operation | Provider plugin | | Hosting | S3AndCloudFront | Create | awscloudformation | DONE Build complete. The dist directory is ready to be deployed. INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html ✨ Done in 11.75s. frontend build command exited with code 0 ✔ Uploaded files successfully. Your app is published successfully. http://amplify-storage-20190701225005-hostingbucket-dev.s3-website-ap- northeast-1.amazonaws.com
27. amplify storage
28. Amplify APIs •analytics •api •auth •function •hosting •interactions •notifications •storage •xr
29. Storage 1. add storage 2. push $ amplify add storage $ amplify push Ξοϓϩʔυ༻S3όέοτ͕࡞੒͞Εͯ src/ ʹઃఆϑΝΠϧ(aws-exports.js) ͕࡞੒͞ΕΔ
31. vue plugin
32. vue plugin
33. Storage 1. deploy $ amplify publish `publish` ͸2ͭͷಈ࡞ • amplify init ࣌ʹఆٛͨ͠ϏϧυίϚϯυ͕࣮ߦ͞ΕΔ(ࠓճ͸`yarn build`) •yarn build Ͱ࡞੒͞Εͨ HTML/JS/CSS ͕S3΁Ξοϓϩʔυ͞ΕΔ • AWS΁ͷϦιʔεมߋ
35. Demo Image Uploader http://amplify-storage-20190701225005-hostingbucket-dev.s3-website-ap- northeast-1.amazonaws.com/#/ Amplify + S3 + Vue http://amplify-appsync-chat-20190627232107-hostingbucket-dev.s3-website-ap- northeast-1.amazonaws.com/?#/ Amplify + AppSync + DynamoDB + Vue + Bulma Chat http://amplifyauth-20190616111939-hostingbucket-dev.s3-website-ap- northeast-1.amazonaws.com/#/signin?redirect=%2F Amplify + Cognite + Vue Sign In
36. clean up 1. remove resource $ amplify <category> remove $ amplify push `remove` ͰϩʔΧϧͷCloudFormationఆٛϑΝΠϧ͕มߋ͞Εɺ `push` ͰAWS΁ద༻ɻ
37. Amplify Serverless CloudFormation S3