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

Transcript

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

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

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

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

5. ߏ੒ਤ(؆қ)

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

7. ɾAPIʹΑΔಈతॲཧͷ࣮ߦ ɹ1. ͓໰͍߹Θͤػೳ
 ɹ2. ࠾༻Ԡืػೳ ɹ3. ࢿྉμ΢ϯϩʔυػೳ 
 ॲཧͷྲྀΕɿAPIͰPOST͞ΕͨσʔλΛLambdaͰDaynamoDBʹ อ؅/SESͰؔ܎ऀʹϝʔϧૹ৴/Slack࿈ܞ


   LambdaͰͷ࣮૷ํ๏͸Blogʹॻ͖·ͨ͠ɻ
 ( https://poriweb.hatenablog.com/entry/2018/12/14/073000 ) ಈతॲཧ

8. ΍ͬͯΈͨॴײ

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

10. ࠓޙ࣮૷͍ͨ͜͠ͱ

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

12. ͓·͚ɿAWS Amplifyͷεεϝ

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

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

15. ͓·͚2ɿDaynamoDB On-Demand

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