Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Build and Scale SaaS product by Serverless technologies. / jaws-days-2019

Build and Scale SaaS product by Serverless technologies. / jaws-days-2019

JAWS Days 2019 Serverless.

Hidetaka Okamoto
PRO

February 23, 2019
Tweet

More Decks by Hidetaka Okamoto

Other Decks in Programming

Transcript

  1. B u i l d a n d S c a l e S a a S p ro d u c t
    b y S e r v e r l e s s t e c h n o l o g i e s .
    J A W S D a y s 2 0 1 9

    View Slide

  2. H i d e t a k a
    O k a m o t o
    • Digitalcube Co. Ltd.
    • JP_Stripesژ౎ɾେࡕ
    • Alexa Campions
    • AWS Samurai 2017 in Japan

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. S e r v e r l e s s S PA B a c k e n d s
    • Auth: Cognito User Pools
    • API: API Gateway & Lambda
    • Batch: Lambda & Step Functions
    • Frontend: React & AWS Amplify SDK
    • Web Server: Netlify

    View Slide

  8. I n t e g r a t e w i t h F a a S
    • Build & Deploy: Circle CI & Netlify
    • Payment: Stripe
    • Support: Intercom
    • etc…

    View Slide

  9. ͳ ͥ S e r v e r l e s s / F a a S ͳ ͷ ͔
    • ʮڊਓͷݞʹ৐Δʯ͜ͱͰΑΓԕ͘΁͍͚Δ
    • ݸਓ৘ใ؅ཧ΍ϥϯλΠϜͷ؅ཧͳͲͷ੹೚Λ෼ࢄ͢Δ
    • ʮ࢖ͬͨ෼͚ͩ՝ۚʯͳͷͰɺૉૣ͘ࢼͯ͠ૉૣ͘΍ΊΕΔ
    • ૄ݁߹ނʹඞཁͳͱ͖ʹඞཁͳ஌ࣝΛ࢓ೖΕΕ͹ྑ͍

    View Slide

  10. · ͱ Ί A g e n d a
    • ૄ݁߹Ͱૉૣ͘τϥΠˍΤϥʔ
    • ߏ੒͸ඞͣίʔυͰ؅ཧ
    • “ա͗ͨΔ͸ͳ͓ٴ͹͟Δ͕͝ͱ͠”
    • ʮͳͥͦΕΛ͢Δͷ͔ʯΛେࣄʹ

    View Slide

  11. A g e n d a
    • ૄ݁߹Ͱૉૣ͘τϥΠˍΤϥʔ
    • ߏ੒͸ඞͣίʔυͰ؅ཧ
    • “ա͗ͨΔ͸ͳ͓ٴ͹͟Δ͕͝ͱ͠”
    • ʮͳͥͦΕΛ͢Δͷ͔ʯΛେࣄʹ

    View Slide

  12. A P I ɾ ϑ ϩ ϯ τ Τ ϯ υ Λ ૉ ૣ ͘ τ ϥ Π ˍ Τ ϥ ʔ
    • Serverless FrameworkͷStageͰdev / prodͷελοΫ෼ׂ
    • Gitϒϥϯν / Serverlessͷεςʔδ෼ׂͰϩʔϧόοΫΛ༰қʹ
    • ೔ถའମ੍Ͱ24࣌ؒ୭͔͕ϦϦʔεɾϩʔϧόοΫՄೳʹ
    • ޙํޓ׵ΛΩʔϓɾഁյతมߋ͸ύεมߋʴ৻ॏͳςετ

    View Slide

  13. ૉ ૣ ͘ τ ϥ Π ˍ Τ ϥ ʔ ͢ Δ ͨ Ί ʹ
    • API Backend͸ϢχοτςετɾΠϯςάϨʔγϣϯςετ
    • Frontend͸Ϣχοτςετɾ੩తܕݕূ
    • ͲͪΒ΋CircleCIͰςετΛPass͠ͳ͍ͱϦϦʔεͰ͖ͳ͍
    • ͦ΋ͦ΋खಈͰͷϏϧυɾσϓϩΠ͸ݪଇNG
    • ʮࠓ͋Δ࣮૷Λյ͍ͯ͠ͳ͍ʯอূΛ͢ΔͨΊʹ΋ɺςετ͸ॻ͘

    View Slide

  14. ϑ ϩ ϯ τ Τ ϯ υ ͷ ໾ ׂ ෼ ׂ
    • ϑϩϯτΤϯυ͸React + Redux
    • ViewʢHTML / CSSʣ͸Reactʹू໿
    • APIͱͷ΍ΓऔΓͳͲɺσʔλͷॲཧܥ͸Reduxʹू໿
    • ReduxͷStore͕SPAͷ؆қDBతཱͪҐஔʹ

    View Slide

  15. ϑ ϩ ϯ τ Τ ϯ υ ͷ ໾ ׂ ෼ ׂ ɿ ͳ ͥ ෼ ׂ ͢ Δ ͷ ͔
    • UX / σβΠϯνʔϜ͸ॲཧΛҙࣝ͢Δ͜ͱͳ͘ViewΛߋ৽
    • ࣮૷νʔϜ͸ViewͷมߋΛҙࣝ͢Δ͜ͱͳ͘API·ΘΓΛߋ৽
    • ʮStoreʹ͋Δ஋ʯΛյ͞Ͷ͚Ε͹ɺ͓ޓ͍ࣗ༝ʹߋ৽Մೳ
    • σβΠϯϦχϡʔΞϧͱػೳ௥ՃΛฒྻͰ࣮ࢪ
    • ʮStoreʹೖΕΔલ͔ޙ͔ʯͰ໰୊ͷ੾Γ෼͚΋Մೳ

    View Slide

  16. A g e n d a
    • ૄ݁߹Ͱૉૣ͘τϥΠˍΤϥʔ
    • ߏ੒͸ඞͣίʔυͰ؅ཧ
    • “ա͗ͨΔ͸ͳ͓ٴ͹͟Δ͕͝ͱ͠”
    • ʮͳͥͦΕΛ͢Δͷ͔ʯΛେࣄʹ

    View Slide

  17. ߏ ੒ ͸ ඞ ͣ ί ʔ υ Ͱ ؅ ཧ
    • ͢΂ͯͷϦιʔε͸ɺίʔυͰ؅ཧ
    • ख૊͸ݕূϑΣʔζ͔ᴈ໌ظͷҨ࢈͕΄ͱΜͲ
    • ୭͔͕ϛεͨ͠ͱ͖ʹɺ૊Μͩਓ͔͠໭ͤͳ͍ͷ͸NG
    • ख૊ -> AWS CLIͰJSONग़ྗ -> CFNʹஔ͖׵͑ OR terraform import
    • Serverless Framework / SAM / terraform / CDKΛ૊Έ߹Θͤͯར༻

    View Slide

  18. ؅ ཧ π ʔ ϧ ͸ Կ Λ ࢖ ͏ ΂ ͖ ͔ ʁ
    • ޷͖ͳ΋ͷΛ࢖͏ͷ͕Ұ൪
    • SaaS͸௕ظతͳϝϯς͕ඞཁ
    • ͦͷ؅ཧπʔϧΛ࢖͍ଓ͚͍ͨͱࢥ͑Δ͜ͱ͕େࣄ
    • ɾɾɾͱ͍͏ͷ͸͖Ε͍͝ͱͱͯ͠

    View Slide

  19. Զ త ֤ छ π ʔ ϧ ͷ ࢖ ͍ ॴ
    • खૣ͘API΍όονॲཧΛ࡞Γ͍ͨɿServerless Framework
    • ެ։API΍ෳ਺ͷϦιʔεͱ࿈ܞ͍ͨ͠ɿSAM
    • खͰௐ੔͢Δ͜ͱ͕͋Δ͔Βɺࠩ෼र͍͍ͨɿterraform
    • ະ஌ͷϦιʔεʹ௅ઓ͢ΔͷͰΨΠυ͕ཉ͍͠ɿAWS CDK

    View Slide

  20. Զ త ֤ छ π ʔ ϧ ͷ ࢖ ͍ ॴ
    • खૣ͘API΍όονॲཧΛ࡞Γ͍ͨɿServerless Framework
    • ެ։API΍ෳ਺ͷϦιʔεͱ࿈ܞ͍ͨ͠ɿSAM
    • खͰௐ੔͢Δ͜ͱ͕͋Δ͔Βɺࠩ෼र͍͍ͨɿterraform
    • ະ஌ͷϦιʔεʹ௅ઓ͢ΔͷͰΨΠυ͕ཉ͍͠ɿAWS CDK

    View Slide

  21. ख ૣ ͘ A P I Λ ࡞ Γ ͨ ͍ ͱ ͖ ʹ ͸ S e r v e r l e s s F r a m e w o r k
    • Shifter / AMIMOTOͷAPI͸Serverless Framework
    • LambdaɾAPI GatewayɾIAMϙϦγʔͷઃఆ͕༰қ
    • ϓϥάΠϯ͕๛෋ͳͷͰɺTypeScript / Route53ͳͲͷૢ࡞ָ͕
    • ࣮ଶ͸CloudFormationɺͨͩ͠Codeࡾܑఋ࢖͏ͳΒSAM͕༏Ґ

    View Slide

  22. S e r v e r l e s s F r a m e w o r k ͜ Ε΍ ͬ ͱ ͘ ͱ ศ ར Ϧε τ
    • provider.deploymentBucketΛࢦఆͯ͠σϓϩΠόέοτΛ౷Ұ
    • provider.logRetentionInDays:Ͱprod / devͷϩάอ࣋ظؒΛมߋ
    • tokenͳͲͷηΩϡϦςΟ৘ใ͸SSMͷparameter store
    • serverless-prune-pluginΛೖΕΔͱݹ͍όʔδϣϯͷLambdaΛফͤΔ
    • serverless-offline-plugin͕API։ൃʹศར
    https://qiita.com/motchi0214/items/31d32d1f27fa643248fc

    View Slide

  23. e v e n t . re s o u rc e Λ S t r a t e g y p a t t e r n Ͱ

    View Slide

  24. Ұ ෦ Λ Ty p e S c r i p t ʹ ੾ Γ ସ ͑ த

    View Slide

  25. Զ త ֤ छ π ʔ ϧ ͷ ࢖ ͍ ॴ
    • खૣ͘API΍όονॲཧΛ࡞Γ͍ͨɿServerless Framework
    • ެ։API΍ෳ਺ͷϦιʔεͱ࿈ܞ͍ͨ͠ɿSAM
    • खͰௐ੔͢Δ͜ͱ͕͋Δ͔Βɺࠩ෼र͍͍ͨɿterraform
    • ະ஌ͷϦιʔεʹ௅ઓ͢ΔͷͰΨΠυ͕ཉ͍͠ɿAWS CDK

    View Slide

  26. ެ ։ A P I ΍ AW S ͷ Ϧ ι ʔε ࿈ ܞ ͕ ଟ ͍ ৔ ߹ ʹ S A M
    • ެ։APIͷυΩϡϝϯτΛSwaggerͰ؅ཧ
    • ͨͩ͠Serverless FrameworkͰ͸ͦͷ··ΠϯϙʔτͰ͖ͳ͍
    • SwaggerͰυΩϡϝϯτͭ͘ΔͳΒSAM
    • CloudFormationͳͷͰɺෳࡶͳߏ੒؅ཧ͸SAMͷ΄͏͕༏Ґͦ͏

    View Slide

  27. Զ త ֤ छ π ʔ ϧ ͷ ࢖ ͍ ॴ
    • खૣ͘API΍όονॲཧΛ࡞Γ͍ͨɿServerless Framework
    • ެ։API΍ෳ਺ͷϦιʔεͱ࿈ܞ͍ͨ͠ɿSAM
    • खͰௐ੔͢Δ͜ͱ͕͋Δ͔Βɺࠩ෼र͍͍ͨɿterraform
    • ະ஌ͷϦιʔεʹ௅ઓ͢ΔͷͰΨΠυ͕ཉ͍͠ɿAWS CDK

    View Slide

  28. t e r r a f o r m i m p o r t ͸ Ғ େ
    • DynamoDBɾCognitoͳͲɺखͰௐ੔͢Δέʔε͕كʹΑ͋͘Δ
    • devͰ͏·͍ͬͨ͘ઃఆΛͦͷ··importͰίʔυԽͰ͖Δ
    • ίʔυ؅ཧ͍͕ͨ͠ɺݫີ͞͸͞΄ͲॏཁͰͳ͍৔߹ʹΑ͍
    • CFN΋υϦϑτݕ஌ͳͲ͸͋Δ͕ɺࠓͷॴະ࢖༻

    View Slide

  29. Զ త ֤ छ π ʔ ϧ ͷ ࢖ ͍ ॴ
    • खૣ͘API΍όονॲཧΛ࡞Γ͍ͨɿServerless Framework
    • ެ։API΍ෳ਺ͷϦιʔεͱ࿈ܞ͍ͨ͠ɿSAM
    • खͰௐ੔͢Δ͜ͱ͕͋Δ͔Βɺࠩ෼र͍͍ͨɿterraform
    • ະ஌ͷϦιʔεʹ௅ઓ͢ΔͷͰΨΠυ͕ཉ͍͠ɿAWS CDK

    View Slide

  30. AW S C D K ͸ ͡ Ί · ͠ ͨ
    • AppSyncܥͷϦιʔε؅ཧʹ౤ೖ
    • TypeScriptͳͷͰɺIDEͰώϯτ͕ͰΔͷ͕࠾༻ཧ༝
    • ύϥϝʔλʹϛε͕͋ΔͱɺCFNͷσϓϩΠલʹϏϧυͰίέΔ
    • ʮԶͷCFNΛյ͢΍ͭ͸ઈରʹڐ͞ͳ͍ʯਓʹ΋͓͢͢Ί
    • cdk synthίϚϯυͰCFNग़ྗՄೳͳͷͰɺఫୀՄೳ

    View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. A g e n d a
    • ૄ݁߹Ͱૉૣ͘τϥΠˍΤϥʔ
    • ߏ੒͸ඞͣίʔυͰ؅ཧ
    • “ա͗ͨΔ͸ͳ͓ٴ͹͟Δ͕͝ͱ͠”
    • ʮͳͥͦΕΛ͢Δͷ͔ʯΛେࣄʹ

    View Slide

  35. ͦ ͷ π ʔ ϧ ͱ ೥ ୯ Ґ Ͱ ෇ ͖ ߹ ͑ · ͢ ͔ ʁ
    • SAM / Serverless ͳͲ͸ศརͳϓϥάΠϯ͕ଟ਺͋Δ
    • ͨͩ͠Α͘ݟΔͱ೥୯ҐͰߋ৽͞Εͯͳ͍΋ͷ΋͋Δ
    • ίΞ͕ഁյతมߋΛೖΕͨͱ͖ʹɺΞϓσͰ͖ͳ͘ͳΔՄೳੑ
    • ʮForkͯ͠Ҿ͖ܧ͙ʯ͔ʮ୅ସҊΛ୳͢ʯ͔ʮͦ΋ͦ΋࢖Θͳ͍ʯ
    • Φʔφʔ͕์ஔ͍ͯ͠ͳ͚Ε͹ɺϓϧϦΫͰ௚ͯ͠͠·͏ख΋͋Δ

    View Slide

  36. A g e n d a
    • ૄ݁߹Ͱૉૣ͘τϥΠˍΤϥʔ
    • ߏ੒͸ඞͣίʔυͰ؅ཧ
    • “ա͗ͨΔ͸ͳ͓ٴ͹͟Δ͕͝ͱ͠”
    • ʮͳͥͦΕΛ͢Δͷ͔ʯΛେࣄʹ

    View Slide

  37. ͳ ͥ ͦ ΕΛ ࢖ ͏ ͷ ͔
    • SaaS͸࡞ͬͯऴΘΓͰ͸ͳ͘ɺϦϦʔε͔ͯ͠Β͕ຊ൪
    • πʔϧΛ࢖͑͹ૉૣ͘࡞ΕΔ͕ɺͦΕΛ࢖͍ଓ͚ΒΕΔ͔͸ෆ໌
    • νʔϜͰͷϝϯςͳͷͰɺͦͷπʔϧΛ࢖͏ཧ༝Λอͭඞཁ͕͋Δ
    • terraform / CloudFormation͸͓֮͑ͯ͜͏ʢಀ͛ઌʹͳΔʣ

    View Slide

  38. Ξ ΢ τϓ ο τ ͷ ॏ ཁ ੑ
    • ൒೥લʹ΍ͬͨ͜ͱ͸ɺ֮͑ͯͳ͍
    • ΍ͬͨ͜ͱ͸ඞͣΞ΢τϓοτ͢Δ
    • Ξ΢τϓοτ͢Δ͜ͱͰɺ࣮͸צҧ͍ͩͬͨͱ͖ʹࢦఠ͞Εͯ௚ͤΔ
    • Ξ΢τϓοτ͸ϒϩά͚ͩͰͳ͘ɺϥΠϒϥϦͷެ։ͱ͍͏ํ๏΋

    View Slide

  39. ͜ ͷ ̍ ೥ Ͱ ࡞ ͬ ͨ ϥ Π ϒ ϥ Ϧ
    • cran-push: Netlify޲͚Server PushͷઃఆϑΝΠϧੜ੒πʔϧ
    • aws-api-responsebuilder: LambdaͷϨεϙϯεϏϧμʔ
    • class-resolver: APIͷύεผॲཧ෼ذʹར༻͢Δπʔϧ
    • stripe-utils: Stripeͷdecline codeม׵ͳͲΛू໿
    • etc…

    View Slide

  40. A l e x a D a y 2 0 1 9 : 4 / 6 K o b e
    https://alexaday2019.aajug.jp/

    View Slide