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
   

   View Slide

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
   

   View Slide

3. AWS Amplify is,
   "84্ʹߏங͢ΔϞόΠϧɾ8FCΞϓϦέʔγϣϯͷ
   όοΫΤϯυΛྑ͍ײ͡ʹߏஙͯ͘͠ΕΔ
   αʔόʔϨεΞϓϦέʔγϣϯ޲͚ϑϨʔϜϫʔΫ
   

   View Slide

4. Serverless
   

   View Slide

5. Serverless ?
   ίϯςφϕʔεͷίϯϐϡʔςΟϯάαʔϏε
   Ϋϥ΢υετϨʔδ
   
   
   +BWBTDSJQUϑϨʔϜϫʔΫ
   

   View Slide

6. why Serverless ?
   • Webαʔόʔཱͯͨ͘ͳ͍
   • ҡ࣋අ͔͔Δ
   • ϝϯςφϯεΊΜͲ͏(ηΩϡϦςΟ, ߋ৽, etc)
   JavascriptͰॻ͍ͨΞϓϦέʔγϣϯΛಈ͔͢ʹ͸΄ͱΜͲͷ৔߹αʔόʔ͕ඞཁ
   

   View Slide

7. why Serverless ?
   ࡢࠓͷΫϥ΢υετϨʔδʹ͸ WebαΠτΛϗεςΟϯάͰ͖Δػೳ͕෇
   ͍͍ͯΔ
   Ϋϥ΢υετϨʔδ
   •Amazon S3 (AWS)
   •Azure Storage (Microsofr Azure)
   •CloudStorage (GCP)
   •Object Storage Service (Alibaba Cloud)
   

   View Slide

8. why Serverless ?
   •AWS Lambda (AWS)
   •Azure Functions (Microsoft Azure)
   •Google Cloud Functions (GCP)
   •Function Compute (Alibaba Cloud)
   ίϯςφϕʔεͷίϯϐϡʔςΟϯάαʔϏε
   ϦΫΤετΛड͚ΔͱΫϥ΢υ্Ͱίϯςφ͕ىಈ͠ɺ͋Β͔͡Ίઃఆ͓͍ͯͨ͠
   ίʔυ͕࣮ߦ͞ΕΔ
   

   View Slide

9. why Serverless ?
   ϑϨʔϜϫʔΫʹΑͬͯߏ଄Խ͞ΕͨσʔλͷऔΓճ͠΍Πϕϯτͷ࣮૷͕΍Γ΍͘͢
   +BWBTDSJQUϑϨʔϜϫʔΫ
   •Angular
   •React
   •Vue
   •Backbone
   •etc
   

   View Slide

10. why AWS ?
    αʔόʔϨεΞʔΩςΫνϟΛߏ੒͢Δཁૉͷ͏ͪɺΫϥ΢υଆͷϦιʔεߏ
    ங͕ߴ౓ʹ౷߹͞Ε͍ͯΔ
    4BB4ͱ͔40"ͱ͔͔ͳΓੲʹฉ͍ͨݴ༿Ͱ͕͢ɺ
    "84ͷ֤छαʔϏε͸୯ಠͷαʔϏε &$ 4 3%4 $MPVE'PSNBUJPO౳
    ͱͦΕΒΛ
    ૊Έ߹ΘͤͨϚωʔδυαʔϏε &MBTUJD#FBOTUBML $MPVE "NQMJGZ
    ʹେผͰ͖Δɻ
    
    ϚωʔδυαʔϏεͰ͸ରԠͰ͖ͳ͍ϫʔΫϑϩʔΛߏங͍ͨ͠৔߹ʹ͸୯ಠͷαʔϏεΛ
    ಠࣗʹ૊Έ߹ΘͤΔ͜ͱͰಉ༷ͷ࢓૊ΈΛߏஙͰ͖Δɻ
    

    View Slide

11. Amplify APIs
    •analytics
    •api
    •auth
    •function
    •hosting
    •interactions
    •notifications
    •storage
    •xr
    

    View Slide

12. Amplify for …
    •iOS
    •Android
    •Web (ES6, React, Vue, Angular)
    •React Native
    

    View Slide

13. Settings
    1. install amplify
    2. account setting
    $ npm install -g @aws-amplify/cli
    $ amplify configure
    

    View Slide

14. View Slide

15. Architecture
    

    View Slide

16. amplify hosting
    

    View Slide

17. Amplify APIs
    •analytics
    •api
    •auth
    •function
    •hosting
    •interactions
    •notifications
    •storage
    •xr
    

    View Slide

18. amplify hosting
    •Amazon S3 ্ͰHTMLͷϗεςΟϯά
    •S3 ଆͷઃఆ͸CloudFormationͰશͯࣗಈԽ
    •amplify cli Λ࣮ߦ͢ΔͱCloudFormationఆٛϑΝΠϧ͕࡞੒͞ΕΔ
    

    View Slide

19. S3 ?
    •Ϋϥ΢υετϨʔδ
    •Route53(DNSαʔϏε) ΍ CloudFront(CDN) ͱͷ࿈ܞ΋༰қ
    •Amplify ͷΦϓγϣϯͰ S3 + CloudFront ͷߏங΋Ͱ͖Δ
    •Ξοϓϩʔυ͞ΕͨϑΝΠϧ͸ෳ਺ͷσʔληϯλʔʹόοΫΞοϓ͞ΕΔ
    •99.999999999 % ͷ଱ٱੑ
    •؆୯ͳWebαΠτͳΒֹ݄¥10ఔ౓Ͱӡ༻Ͱ͖Δ
    

    View Slide

20. CloudFormation ?
    •JSON·ͨ͸YAMLܗࣜͷϑΝΠϧʹ AWSͷϦιʔεఆٛΛهड़͠ɺϚωʔ
    δϝϯτίϯιʔϧ΍APIʹ࣮ͯߦ͢Δ
    •ΞʔΩςΫνϟͷ࠶ར༻
    •ࣗಈԽ
    

    View Slide

21. amplify status
    $ amplify status
    Current Environment: dev
    | Category | Resource name | Operation | Provider plugin |
    | ——————— | ——————————— | -------————-- | -------------—————-- |
    amplify Ͱ༗ޮԽ͞Ε͍ͯΔAWSϦιʔεΛ֬ೝ͢Δ
    

    View Slide

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
    

    View Slide

23. hosting
    1. add hosting
    2. deploy
    $ amplify add hosting
    $ amplify publish
    S3ͷ”੩తαΠτϗεςΟϯά” ΦϓγϣϯΛ༗ޮԽͨ͠όέοτΛ࡞੒
    yarn build Ͱੜ੒͞Εͨ HTML/JS Λ S3όέοτ ΁Ξοϓϩʔυ
    

    View Slide

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
    

    View Slide

25. View Slide

26. View Slide

27. amplify storage
    

    View Slide

28. Amplify APIs
    •analytics
    •api
    •auth
    •function
    •hosting
    •interactions
    •notifications
    •storage
    •xr
    

    View Slide

29. Storage
    1. add storage
    2. push
    $ amplify add storage
    $ amplify push
    Ξοϓϩʔυ༻S3όέοτ͕࡞੒͞Εͯ src/ ʹઃఆϑΝΠϧ(aws-exports.js)
    ͕࡞੒͞ΕΔ
    

    View Slide

30. View Slide

31. vue plugin
    

    View Slide

32. vue plugin
    

    View Slide

33. Storage
    1. deploy
    $ amplify publish
    `publish` ͸2ͭͷಈ࡞
    • amplify init ࣌ʹఆٛͨ͠ϏϧυίϚϯυ͕࣮ߦ͞ΕΔ(ࠓճ͸`yarn build`)
    •yarn build Ͱ࡞੒͞Εͨ HTML/JS/CSS ͕S3΁Ξοϓϩʔυ͞ΕΔ
    • AWS΁ͷϦιʔεมߋ
    

    View Slide

34. View Slide

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
    

    View Slide

36. clean up
    1. remove resource
    $ amplify remove
    $ amplify push
    `remove` ͰϩʔΧϧͷCloudFormationఆٛϑΝΠϧ͕มߋ͞Εɺ
    `push` ͰAWS΁ద༻ɻ
    

    View Slide

37. Amplify
    Serverless
    CloudFormation
    S3
    

    View Slide