AWSサーバーレスアーキテクチャでWebサイトを構築してみた

by thori

Embed

Start on current slide

Slide 1

Slide 1 text

AWSαʔόʔϨεΞʔΩςΫνϟͰ WebαΠτΛߏஙͯ͠Έͨ 2018/12/18 JAWS-UG Gunma #2 Hori Takashi

Slide 2

Slide 2 text

ɾງ وࢺɹɹ@t_pori418 ɾ܈അݝؗྛࢢࡏॅ ɾWebΤϯδχΞ ɾ޿͘ઙ͘ͳΜͰ΋΍Γ·͢  ɾϑϦʔϥϯεͱWebγεςϜ։ൃձࣾͷWϫʔΫ ࣗݾ঺հ

Slide 3

Slide 3 text

ʮاۀαΠτΛ৽͍ͨ͘͠͠ʯ ʮαΠτ؅ཧΛ಺੡Ͱ޷͖ʹ͍͡ΕΔΑ͏ʹ ͍ͨ͠ʢࠓ͸࣮૷΋؅ཧ΋֎஫ʣʯ ʮޙʑCMSԽ΍֎෦ͷ࿈ܞ΋΍Γ΍͘͢ʯ ʮ҆ͭ͘͘ͳΒ͍҆ํ͕͍͍ʯ ܦҢ

Slide 4

Slide 4 text

AWSΛϝΠϯϓϩμΫτʹ࢖ͬͯΔͷͰ  αʔόʔϨε͸Ͳ͏͔ʁ ɾ੩తαΠτ͸S3ͰϗεςΟϯά ɾಈతίϯςϯπ͸Lambda  ɾσʔλอ࣋͸DynamoDB/S3  ɾଞͷAWSαʔϏεͱ࿈ܞ͠΍͍҆͘͢(ଟ෼) ఏҊ

Slide 5

Slide 5 text

ߏ੒ਤ(؆қ)

Slide 6

Slide 6 text

ɾS3Λ࢖༻ ɾNuxt.js(Vue.jsͷϢχόʔαʔϧFW)ʹΑΔ  ɹ੩తϑΝΠϧgenerate  ɾCloudFrontʢCDNʣ ɾ໊͓લ.comͰ͍࣋ͬͯΔυϝΠϯΛ route53Ͱࢀর ੩తϑΝΠϧϗεςΟϯά

Slide 7

Slide 7 text

ɾAPIʹΑΔಈతॲཧͷ࣮ߦ ɹ1. ͓໰͍߹Θͤػೳ  ɹ2. ࠾༻Ԡืػೳ ɹ3. ࢿྉμ΢ϯϩʔυػೳ   ॲཧͷྲྀΕɿAPIͰPOST͞ΕͨσʔλΛLambdaͰDaynamoDBʹ อ؅/SESͰؔ܎ऀʹϝʔϧૹ৴/Slack࿈ܞ  LambdaͰͷ࣮૷ํ๏͸Blogʹॻ͖·ͨ͠ɻ  ( https://poriweb.hatenablog.com/entry/2018/12/14/073000 ) ಈతॲཧ

Slide 8

Slide 8 text

΍ͬͯΈͨॴײ

Slide 9

Slide 9 text

ɾόοΫΤϯυͷαʔόʔ؅ཧ͕ͳ͘ͳָͬͯ   ɾૄ݁߹ͰػೳΛ੾Γ෼͚΍͍͢ ɾDynamoDB͕ྑ͍  ɹ(ෳࡶͳ͜ͱΛ΍Γͩ͢ͱͭΒͦ͏)

Slide 10

Slide 10 text

ࠓޙ࣮૷͍ͨ͜͠ͱ

Slide 11

Slide 11 text

ɾ؅ཧػೳʢ؆୯ͳCMSʣ ɾσϓϩΠͷࣗಈԽ ɾΞΫηεղੳʹΑΔͳΜΒ͔ͷΞϓϩʔν

Slide 12

Slide 12 text

͓·͚ɿAWS Amplifyͷεεϝ

Slide 13

Slide 13 text

Amplifyͱ͸ʁ    ˠ΢Σϒ/ϞόΠϧϓϥοτϑΥʔϜ޲͚ͷ JavaScriptϥΠϒϥϦ AWSͰΞϓϦέʔγϣϯΛߏங͢Δͷʹศར ͳػೳΛඋ͍͑ͯΔ

Slide 14

Slide 14 text

re:InventͰAWS Amplify Consle͕ొ৔ Webίϯιʔϧը໘ϙνϙνͰAWS AmplifyΛ૊ΈࠐΜ ͩWebΞϓϦΛߏஙɺϏϧυɺϦϦʔε͕Ͱ͖Δʂʂ  (ͳ͓౦ژϦʔδϣϯ͸·ͩͷ໛༷)

Slide 15

Slide 15 text

͓·͚2ɿDaynamoDB On-Demand

Slide 16

Slide 16 text

re:InventͰDynamoDB On-Demandൃද ɾϦΫΤετʹԠͨ͡ैྔ՝ۚϓϥϯ ɾϚωʔδυʹΩϟύγςΟΛ؅ཧͯ͘͠ΕΔ ɾΩϟύγςΟλϒͰϦΫΤετຖͷࢧ෷͍Λબ΂͹OK