$30 off During Our Annual Pro Sale. View Details »

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

thori
December 18, 2018

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

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

thori

December 18, 2018
Tweet

More Decks by thori

Other Decks in Technology

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