SPA on AWS - Speaker Deck

Slide 1

Slide 1 text

SPA on AWS - Free Web Site Hosting - 2019.01.18 Netadashi Meetup #8 @urmot

Slide 2

Slide 2 text

ಥવͰ͕͢ɺ

Slide 3

Slide 3 text

ݸਓ։ൃͯ͠·͔͢ʁ

Slide 4

Slide 4 text

ࠓ೔͓࿩͢Δ಺༰ • SPAͰαʔϏεӡ༻͢Δ͓࿩ • ߏ੒ͷ͝આ໌ • ྉۚͷ͓࿩

Slide 5

Slide 5 text

SPAͰαʔϏεӡ༻͢Δ࿩

Slide 6

Slide 6 text

Ұ೥લ͘Β͍͔Βɺ WebαʔϏεͷӡ༻Λ։࢝

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

WebອըΛ·ͱΊΔαΠτ • Webອըͷ࿩΁ͷ௚ϦϯΫΛ·ͱΊͨαΠτ • CrawlerΛ࢖ͬͯϦϯΫΛऩू • React + ReduxͰSPA • API͸ServerlessͰExpress

Slide 9

Slide 9 text

ߏ੒ͷ͝આ໌

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

SPA഑৴෦෼ • CloudFront + S3 • ಠࣗυϝΠϯͰSSLʹରԠ • CDNͰߴ଎ʹ҆ఆͯ͠഑৴ • SSR͸ະ࣮૷

Slide 13

Slide 13 text

SPA഑৴෦෼ • σϓϩΠ΋؆୯ 1. JSΛbuild 2. S3ʹΞοϓϩʔυ 3. CloudFrontͷΩϟογϡΛΫϦΞ

Slide 14

Slide 14 text

SPA+CloudFrontͷ஫ҙ఺ • ϧʔτύε(/)Ҏ֎ͰϦϩʔυ͞Εͨࡍʹ404 • 404ͷ࣌ʹindex.htmlΛฦ͢Α͏ʹ͢Δ • CloudFrontͷError PagesͰઃఆՄೳ

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

APIαʔό෦෼ • API Gateway + Lambda + DynamoDBͰߏ੒ • Lambda্ͰExpressΛ࣮ߦ • aws-serverless-expressͰ࣮૷ • ৄ͘͠͸ͪ͜ΒͷهࣄΛࢀর

Slide 17

Slide 17 text

SPA+Lambdaͷ஫ҙ఺ • Lambdaίʔϧυελʔτ໰୊ • ϦΫΤετ͕ͳ͍ͱίϯςφ͕མͪΔ • ίϯςφͳ͍৔߹ɺॳظԽॲཧ͕૸Δ • ॳظԽॲཧͷϨΠςϯγ͕൒୺ͳ͍

Slide 18

Slide 18 text

Lambdaίʔϧυελʔτରࡦ • LambdaΛϗοτελϯόΠ͓ͯ͘͠ • CloudWatch EventsͰLambdaΛఆظ࣮ߦ • (ϦΫΤετ్͕ઈ͑ͳ͍ఔΞΫηεΛՔ͙)

Slide 19

Slide 19 text

ྉۚͷ͓࿩

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

໊͓લ.comͷ1ԁυϝΠϯʂ

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

CloudFrontͷྉۚମܥ • Πϯλʔωοτ΁ͷσʔλసૹ (GB୯Ґ) • ΦϦδϯ΁ͷσʔλసૹ (GB୯Ґ) • HTTP/HTTPSϝιουϦΫΤετ (1ສ݅୯Ґ)

Slide 24

Slide 24 text

CloudFrontͷྉۚମܥ • Πϯλʔωοτ΁ͷσʔλసૹ (GB୯Ґ) • ΦϦδϯ΁ͷσʔλసૹ (GB୯Ґ) • HTTP/HTTPSϝιουϦΫΤετ (1ສ݅୯Ґ)

Slide 25

Slide 25 text

CloudFrontͷྉۚମܥ • HTTP/HTTPSϝιουϦΫΤετ (1ສ݅୯Ґ) ೔ຊ ؖࠃ ୆࿷ γϯΨϙʔϧ ถࠃ )551 )5514

Slide 26

Slide 26 text

CloudFrontͷྉۚମܥ • HTTP/HTTPSϝιουϦΫΤετ (1ສ݅୯Ґ) • ྫ: 100ສHTTPSϦΫΤετ (೔ຊ) • $0.012 * 100ສ / 1ສ = $1.2

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

DynamoDBͷྉۚମܥ • σʔλετϨʔδ (GB୯Ґ) • ಡΈࠐΈ/ॻ͖ࠐΈϦΫΤετ (1KB/sec)

Slide 29

Slide 29 text

DynamoDBͷྉۚମܥ • σʔλετϨʔδ (GB୯Ґ) • ຖ݄ɺ࠷ॳͷ25GBͷอ؅͸ແྉ • 25GBҎ߱͸$0.285/month

Slide 30

Slide 30 text

DynamoDBͷྉۚମܥ • ಡΈࠐΈ/ॻ͖ࠐΈϦΫΤετ (1KB/sec) ,#ͷ࣌ؒ͋ͨΓͷྉۚ ಡΈࠐΈ ॻ͖ࠐΈ

Slide 31

Slide 31 text

DynamoDBͷྉۚମܥ • ಡΈࠐΈ/ॻ͖ࠐΈϦΫΤετ (1KB/sec) • ຖ݄ɺ25[req/sec]͕ແྉ • 2ԯ݅ͷϦΫΤετॲཧʹे෼ͳ༰ྔ

Slide 32

Slide 32 text

·ͱΊ

Slide 33

Slide 33 text

؆୯ʹαʔϏεΛ࡞ΕΔ࣌୅ • εέʔϥϒϧ͔ͭ௿ίετ • NetlifyͳͲ੩త഑৴ಛԽαʔϏε΋ग़͍ͯΔ • AWS͸Ұ೥໨͸݁ߏແྉͰ࢖͑Δ

Slide 34

Slide 34 text

ཪٕ

Slide 35

Slide 35 text

AWS Promotional Credit for Alexa • Alexa SkillΛҰͭ࡞ͬͯެ։͢Δ • AWSͷ$100ͷΫϨδοτ͕໯͑Δ • ΫϨδοτ͸Ұ೥ؒ༗ޮ

Slide 36

Slide 36 text

͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ