Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AWS Amplify for Serverless apps

AWS Amplify for Serverless apps

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

jacoyutorius

July 06, 2019
Tweet

More Decks by jacoyutorius

Other Decks in Technology

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