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

JAWS-UG 群馬 #2のLT資料です。

Transcript

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

   View Slide

2. ɾງ وࢺɹɹ@t_pori418
   ɾ܈അݝؗྛࢢࡏॅ
   ɾWebΤϯδχΞ
   ɾ޿͘ઙ͘ͳΜͰ΋΍Γ·͢

   ɾϑϦʔϥϯεͱWebγεςϜ։ൃձࣾͷWϫʔΫ
   ࣗݾ঺հ
   

   View Slide

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

   View Slide

4. AWSΛϝΠϯϓϩμΫτʹ࢖ͬͯΔͷͰ

   αʔόʔϨε͸Ͳ͏͔ʁ
   ɾ੩తαΠτ͸S3ͰϗεςΟϯά
   ɾಈతίϯςϯπ͸Lambda

   ɾσʔλอ࣋͸DynamoDB/S3

   ɾଞͷAWSαʔϏεͱ࿈ܞ͠΍͍҆͘͢(ଟ෼)
   ఏҊ
   

   View Slide

5. ߏ੒ਤ(؆қ)
   

   View Slide

6. ɾS3Λ࢖༻
   ɾNuxt.js(Vue.jsͷϢχόʔαʔϧFW)ʹΑΔ

   ɹ੩తϑΝΠϧgenerate

   ɾCloudFrontʢCDNʣ
   ɾ໊͓લ.comͰ͍࣋ͬͯΔυϝΠϯΛ
   route53Ͱࢀর
   ੩తϑΝΠϧϗεςΟϯά
   

   View Slide

7. ɾAPIʹΑΔಈతॲཧͷ࣮ߦ
   ɹ1. ͓໰͍߹Θͤػೳ

   ɹ2. ࠾༻Ԡืػೳ
   ɹ3. ࢿྉμ΢ϯϩʔυػೳ
   

   ॲཧͷྲྀΕɿAPIͰPOST͞ΕͨσʔλΛLambdaͰDaynamoDBʹ
   อ؅/SESͰؔ܎ऀʹϝʔϧૹ৴/Slack࿈ܞ

   LambdaͰͷ࣮૷ํ๏͸Blogʹॻ͖·ͨ͠ɻ

   ( https://poriweb.hatenablog.com/entry/2018/12/14/073000 )
   ಈతॲཧ
   

   View Slide

8. ΍ͬͯΈͨॴײ
   

   View Slide

9. ɾόοΫΤϯυͷαʔόʔ؅ཧ͕ͳ͘ͳָͬͯ
   

   ɾૄ݁߹ͰػೳΛ੾Γ෼͚΍͍͢
   ɾDynamoDB͕ྑ͍

   ɹ(ෳࡶͳ͜ͱΛ΍Γͩ͢ͱͭΒͦ͏)
   

   View Slide

10. ࠓޙ࣮૷͍ͨ͜͠ͱ
    

    View Slide

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

    View Slide

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

    View Slide

13. Amplifyͱ͸ʁ

    

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

    View Slide

14. re:InventͰAWS Amplify Consle͕ొ৔
    Webίϯιʔϧը໘ϙνϙνͰAWS AmplifyΛ૊ΈࠐΜ
    ͩWebΞϓϦΛߏஙɺϏϧυɺϦϦʔε͕Ͱ͖Δʂʂ

    (ͳ͓౦ژϦʔδϣϯ͸·ͩͷ໛༷)
    

    View Slide

15. ͓·͚2ɿDaynamoDB On-Demand
    

    View Slide

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

    View Slide