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

JAWS Days 2019 Serverless.

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