Slide 1

Slide 1 text

AWS Amplify Ͱ ര଎αʔόʔϨεΞϓϦέʔγϣϯ։ൃ 2019.7.6 Hamamatsu.js #7

Slide 2

Slide 2 text

Yuto Ogi Web Developper at AIRS @jacoyutorius Skill Ruby, Rails Javascript, Vue.js, React, AWS Alexa Skills Community Hamamatsu.rb, JAWS-UG, Hamamatsu.js

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Serverless

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Architecture

Slide 16

Slide 16 text

amplify hosting

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

$ 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

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

amplify storage

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

vue plugin

Slide 32

Slide 32 text

vue plugin

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Amplify Serverless CloudFormation S3