SaaS開発の裏側 - Shifterローンチまでの119日(Payment & Dashboard開発編) -

#JP_Stripes Vol.2

Transcript

1. J P _ S T R I P E S V O L . 2 S A A S ։ ൃ ͷ ཪ ଆ 
 - S H I F T E R ϩ ʔϯ ν · Ͱ ͷ 1 1 9 ೔ ( PAY M E N T & D A S H B O A R D ։ ൃ ฤ ) - #getshifter
2. ຊ ೔ ͷ ಺ ༰ #getshifter
3. ɾ S h i f t e r ͱ ͸ ? ɾ S h i f t e r ͷ Ϣʔεέ ʔε ɾ S h i f t e r ϩ ʔϯ ν · Ͱ ͷ 1 1 9 ೔ ؒ Ͱ ͳ ʹ Λ ΍ ͬ ͨ ͷ ͔ʁ #getshifter
4. S H I F T E R ͱ ͸ ? #getshifter
5. S h i f t e r ͸ ɺ Wo rd P re s s αΠ τ Λ Ұ ࿈ ͷ ੩ త H T M L ϑ ΝΠϧ ʹ 
 ม ׵ ͠ ɺ C D N Λ հ ͯͦ͠ Ε Β Λ ఏ ڙ ͢ Δ ͜ ͱ Ͱ 
 ι ϑ τ ΢ Σ Ξ อ क ΍ α ʔό ؅ ཧ ͷ ෛ ୲ Λ ഉ আ ͠ · ͢ɻ #getshifter
6. S H I F T W O R D P R E S S T O S E R V E R L E S S
7. L I F E C Y C L E 1. DockerͰWordPressΛߋ৽࣌ʹىಈ
 (Editorʣ 2. AWS ͷϦιʔεͰ੩తHTMLʹม׵
 (Generator) 3. CDN͔ΒίϯςϯπΛ഑৴
 (Contents Delivery) A R C H I T E C T U R E #getshifter
8. S H I F T E R ͷ Ϣʔεέ ʔε #getshifter
9. S h i f t e r ͷ Ϣ ʔεέ ʔε 
 
 Q . S h i f t e r ͸ Wo rd P re s s ͷ ۜ ͷ ஄ ؙ ʹ ͳ Γ · ͢ ͔ʁ 
 A . ࢒ ೦ ͳ ͕ Β ೉ ͠ ͍Ͱ ͢ɻ 
 
 - ࠷ ద ͳ έ ʔε ɿ 
 Πϕ ϯ τ ɾ Ω ϟϯϖʔϯ ɾ ϥ ϯ σΟ ϯ άϖʔ δ ɾ ί ʔϙ Ϩ ʔ τ ͳ Ͳ - ෆ ޲ ͖ ͳ έ ʔε ɿ ί ϯ ς ϯ π ͷ ߋ ৽ ͕ ස ൟ ɾ ଟ ਓ ਺ Ͱ ར ༻ ͢ Δ ϝ σΟΞ ɾ ձ һ αΠ τ ͳ Ͳ #getshifter
10. S H I F T E R ͕ ղ ܾ ͢ Δ ໰ ୊ 
 - η Ω ϡ Ϧ ςΟ ɾ ӡ ༻ ฤ • αʔόͷηοτΞοϓ • αʔόͷϝϯςφϯε • ιϑτ΢ΣΞͷΞοϓσʔτ • ηΩϡϦςΟରԠ • ͋ͳͨͷ࣌ؒͱίετ We b αΠ τ ͷ ߏ ங ɺ ࣮ ߦ ɺ อ क ʹ ͸ ࣌ ؒ ͕ ͔ ͔ Γ · ͢ɻ α ʔόʔ Λ η ο τΞ οϓ ͠ ɺ ద ੾ ͳ αΠ ζ Λ બ ୒ ͠ ɺ Ω ϟ ο γ ϡ ઓ ུ Λ ࡞ ੒ ͠ ɺ ҆ શ ੑ ͱ ύ ϑ Υ ʔϚ ϯε Λ ؂ ࢹ ͢ Δ ඞ ཁ ͕ ͋ Γ · ͢ɻ #getshifter
11. – S H A U N B A E R “Shifter͚ͩͰWordPressϓϥοτϑΥʔϜʹ੩తͳαΠτΛߏஙͰ͖·ͨ͠ɻ
 ੩తͳHTMLϑΝΠϧ͸CDN্Ͱϗετ͞ΕͯϋοΩϯά͢Δ΋ͷ͕ͳ͍ͷͰ ύϑΥʔϚϯε΍ηΩϡϦςΟ্ͷݒ೦Λؾʹ͢Δ͜ͱ͕ͳ͘ͳΓ·ͨ͠” #getshifter
12. S H I F T E R ϩ ʔϯ ν · Ͱ ͷ 1 1 9 ೔ ؒ Ͱ ͳ ʹ Λ ΍ ͬ ͨ ͷ ͔ʁ #getshifter
13. ։ ൃ ν ʔϜ • ϓϩδΣΫτϚωʔδϟʔ 1໊ • ΠϯϑϥΤϯδχΞ 2໊ • ϓϩάϥϚʔ/ϑϩϯτΤϯδχΞ 2໊ • σβΠϯελδΦ/ΤʔδΣϯγʔ 1ࣾʢ3−5໊) #getshifter
14. S H I F T E R ϩ ʔϯ ν · Ͱ ͷ 1 1 9 ೔ ؒ Ͱ ͳ ʹ Λ ΍ ͬ ͨ ͷ ͔ʁ • Service Coreͷ։ൃ #getshifter
15. - E d i t o r ʢ D o c k e r + E F S + l a m b d a + A u ro r a ) - G e n e r a t o r ʢ l a m b d a + A P I G W + D y n a m o D B ) - C o n t e n t s D e l i v e r y ʢ S 3 + C l o u d F ro n t / N e t l i f y ) # S E R V I C E C O R E ͷ ։ ൃ #getshifter
16. #getshifter E d i t o r G e n e r a t o r C o n t e n t s 
 D e l i v e r y
17. E D I T O R ։ ൃ ͷ T I P S • Docker for AWSͰ docker-volume-netshare ʹΑΔAmazon EFSϚ΢ϯτΛՄೳʹ͢Δ • Docker for AWS ͷSwarmAPIΛ֎෦͔ΒΞΫηεՄೳʹ͢Δ • Load Balancer(ELBͳͲ)ʹͿΒԼ͛ͨDocker Private RegistryͰɺdocker push͕`blob upload unknown`ʹͳΔ৔߹ͷઃఆ • Docker Swarm ͱ Amazon Elastic File System (Amazon EFS) ɻ͍ͭͰʹELB • Dockerίϯςφ for AWS & ShifterͰDocker for AWSΛ࢖͍ͬͯΔ࿩
 
 http://qiita.com/sawanoboly
 https://speakerdeck.com/sawanoboly/dockerkontena-for-aws-and-and-shifterdedocker- for-awswoshi-tuteiruhua #getshifter
18. G E N E R AT O R ։ ൃ ͷ T I P S • [WordPress] ΤσΟλʹૠೖ͞ΕΔϝσΟΞϑΝΠϧͷ URL Λ૬ ରURLʹ͢Δ • [AWS][Lambda] ϩʔΧϧͰ Lambda ༻ͷ nodejs εΫϦϓτΛ࣮ ߦ͢Δ
 
 http://qiita.com/wokamoto
 #getshifter
19. C O N T E N T S D E L I V E RY ։ ൃ ͷ T I P S • Netlify REST APIͷapi/v1/sitesʹ͍Ζ͍ΖͳGETϦΫΤετ ΛૹͬͯΈΔ • Netlify REST APIͰNetlifyʹαΠτΛσϓϩΠɾߋ৽ɾ࡟আ ͢Δ
 
 https://wp-kyoto.net/ #getshifter
20. ׬ ੒ ! ϩ ʔϯ ν ! #getshifter
21. ͦΜ ͳ ʹ ͋ · ͘ ͳ ͔ ͬ ͨ … #getshifter
22. S A A S Ͱ ఏ ڙ ͢ Δ ͱ ͸ #getshifter
23. S H I F T E R ϩ ʔϯ ν · Ͱ ͷ 1 1 9 ೔ ؒ Ͱ ΍ ͬ ͨ ͜ ͱ • Service Core • Branding • Web & Marketing Automation • Dashboard • Payment • Support & Documents #getshifter
24. S H I F T E R ϩ ʔϯ ν · Ͱ ͷ 1 1 9 ೔ ؒ Ͱ ͳ ʹ Λ ΍ ͬ ͨ ͷ ͔ʁ 
 ( PAY M E N T & D A S H B O A R D ։ ൃ ฤ ) #getshifter
25. - A P I Λ ར ༻ ͯ͠ Τ ϯ δχΞ ͕ ϓ ϩ ά ϥ Ϛ ϒϧ ʹ ॲ ཧ Ͱ ͖ Δ ඞ ཁ ͕ ͋ Δ ɻ - ૄ ݁ ߹ ͳ ؔ ܎ Ͱ ͋ Δ ඞ ཁ ͕ ͋ Δ ʢ M i c ro s e r v i c e s ) - γε ςϜ ͷ Ξ οϓ σ ʔ τ ͕ ස ൟ ɻ ඇ ৗ ʹ αΠΫϧ ͕ ୹ ͍ ͷ Ͱ 
 ։ ൃ ଎ ౓ Λ མ ͱ ͞ ͳ ͍ ඞ ཁ ͕ ͋ Δ ɻ # PAY M E N T & D A S H B O A R D ։ ൃ ฤ #getshifter
26. - s t r i p e # PAY M E N T γε ςϜ ͷ ։ ൃ #getshifter
27. - ຖ ݄ 1 , 5 0 0 ԁ ͷ M i c ro ϓ ϥ ϯ ͔ Β ɺ ຖ ݄ 3 , 0 0 0 ԁ ͷ S m a l l ϓ ϥ ϯ ʹ ܖ ໿ ม ߋ ͠ ͨ ͍ ࣌ ͸ s u b s c r i p t i o n s . u p d a t e ( ) Ͱ ࠩ ֹ ͕ ൃ ੜ ͢ Δ ৔ ߹ ͸ ɺ ࣍ ճ ੥ ٻ ࣌ ʹ ೔ ׂ Γ Ͱ ੥ ٻ ( o r ૬ ࡴ ) Λ উ ख ʹ΍ ͬͯ͘Ε · ͢ɻ - h t t p : / / q i i t a . c o m / w o k a m o t o / i t e m s / b f d 8 5 f b 5 9 0 5 c 2 0 2 7 1 f 8 a # ݄ ֹ / ೥ ֹ ՝ ۚ ͷ ઃ ܭ ΍ ͦ ͷ ϓ ϥ ϯ ม ߋ ͷ ର Ԡ #getshifter
28. S T R I P E ։ ൃ ͷ T I P S • [nodejs][stripe] stripe Λ node Ͱ࢖͏ (customer ৘ใͷొ࿥) • [AWS][Lambda] ϩʔΧϧͰ Lambda ༻ͷ nodejs εΫϦϓτΛ࣮ߦ͢Δ • [nodejs][stripe] stripe Λ node Ͱ࢖͏(୯ൃ ͷࢧ෷͍) • [nodejs][stripe] stripe Λ node Ͱ࢖͏ (subscription ఆظࢧ෷͍ͷ࡞੒) • [stripe][AWS] Stripe ͷ Webhook Λ API Gateway Ͱड͚औͬͯ Lambda Ͱॲཧ͢Δ • Stripeͷnode SDKΛ࢖ͬͯɺςετɾຊ൪ ͦΕͧΕͷAPIʹΞΫηε͢Δ • Node.jsͰStripeͷΧελϚʔΛ௥Ճ͢Δ • StripeͰϓϥϯ৘ใΛ·ͱΊͯ؅ཧ͢Δ
 
 http://qiita.com/wokamoto
 http://qiita.com/motchi0214
 #getshifter
29. · ͱ Ί ( PAY M E N T ฤ ) #getshifter
30. - ྉ ۚ ϓ ϥ ϯ ͱ ՝ ۚ ͷ ઃ ܭ ͸ Ϗ δ ω ε ͷ Ω Ϟ ʹ ͳΔ ɻ - ෳ ࡶ ͳ ϓ ϥ ϯ ઃ ܭ ʹ ॊ ೈ ʹ ର Ԡ Ͱ ͖ ͨ ɻ - s t r i p e Λ ࠾ ༻ ͠ ͨ ͜ ͱ Ͱ 2 ि ؒ ఔ ౓ Ͱ ՝ ۚ · Θ Γ ͷ ઃ ܭ ͔ Β D A S H B O A R D ΁ ͷ ࣮ ૷ ɾ ςε τ · Ͱ ඇ ৗ ʹ ε ϐʔ σΟʔ ʹ ׬ ྃ Ͱ ͖ ͨ ɻ # · ͱ Ί ( PAY M E N T ) #getshifter
31. - A m a z o n C o g n i t o - A P I G a t e w a y + l a m b d a + D y n a m o D B - N e t l i f y - S e r v e r l e s s f r a m e w o r k - S w a g g e r # D A S H B O A R D ͷ ։ ൃ #getshifter
32. - h t t p s : / / s p e a k e rd e c k . c o m / d i g i t a l c u b e / m a s t e rc l o u d - c o n t a i n e r- a d o p t i o n s - o n - t h e - c l o u d - t o k y o # S E R V E R L E S S F R A M E W O R K Ͱ ߦ ͏ α ʔό Ϩ ε Ξʔ Ω ς Ϋ ν ϟ ͷ ߏ ங ͔ Β ӡ ༻ · Ͱ ͷ ࿩ #getshifter
33. D A S H B O A R D ։ ൃ ͷ T I P S • Amazon Cognito User PoolsΛ࢖ͬͯɺwebαΠτʹϢʔβ ೝূج൫Λ࡞Δ • Netlify REST APIͰNetlifyʹαΠτΛσϓϩΠɾߋ৽ɾ࡟আ ͢Δ • Amazon API Gateway ͷ Custom AuthorizerΛ࢖͍ɺUser PoolsͷϢʔβͰAPIೝূΛߦ͏ • Serverless FrameworkͰߦ͏ܧଓతΠϯςάϨʔγϣϯͷ εεϝ • Serverless FrameworkͰߦ͏ܧଓతΠϯςάϨʔγϣϯͷ εεϝ ͦͷ2 ~DynamoDBʹ઀ଓͯ͠ͷࣗಈςετ~ • AWS SDKΛ࢖ͬͯ΋AWS؀ڥʹΞΫηεͤͣʹϢχοτς ετΛճ͢ํ๏ • Cognito User PoolsͰemail verification messageͷϝʔϧૹ ৴Λ೔ຊޠͰߦ͏ํ๏ • API Gateway+Lambda+Serverless+TravisͰAPI։ൃͷCI/CD ύΠϓϥΠϯΛߏங͢Δ • CircleCI͔ΒServerless FrameworkͷσϓϩΠΛ࣮ߦ͢Δ • CodePipelineͰServerless FrameworkͷσϓϩΠΛ؅ཧ͢ Δ
 
 http://qiita.com/horike37
 http://qiita.com/motchi0214 #getshifter
34. · ͱ Ί ( D A S H B O A R D ฤ ) #getshifter
35. - D A S H B O A R D ։ ൃ ͸ U I Λ 3 ౓ ࠶ ઃ ܭ ɻ - શ ͯͷ ։ ൃ ϓ ϩ η ε ͷ த Ͱ ࠷ ΋ ೉ ߤ ͠ ͨ ɻ - φ Ϩ ο δ Λ ମ ܥ Խ ͯ͠ ϕʔε ʹ ͳΔ ػ ೳ ͸ ࢓ ૊ Խ / ύ ο έ ʔ δ Խ Ͱ ͖ ͦ ͏ ɻ # · ͱ Ί ( D A S H B O A R D ) #getshifter
36. ࠷ ޙ ʹ #getshifter
37. #getshifter ͠ ͔ ͠ ɺ S T R I P E ͷ ຊ ౰ P O W E R ͸ 
 ς Ϋϊ ϩ δ ʔ ͩ ͚ Ͱ ͸ ͳ ͍ ʂ
38. ཧ ૝ త ͳ Ω ϟ ο γ ϡ ϑ ϩ ʔ Λ ࣮ ݱ #getshifter
39. #getshifter - s t r i p e 
 Ϋ Ϩ δ ο τΧ ʔ υ औ Ҿ ͔ Β ͷ ࢿ ۚ ͷ ड ͚ औ Γ 
 औ Ҿ ͷ ࢧ ෷ ͍ ͸ ɺ ௨ ৗ 7 ೔ Ҏ ಺ ʹ ͓ ٬ ༷ ͷ ۜ ߦ ʹ ৼ Γ ࠐ · Ε · ͢ɻ 
 - A W S 
 Q . ݄ ֹ ྉ ۚ ͷ Ϋ Ϩ δ ο τΧ ʔ υ ܾ ࡁ ͸ ͍ ͭ ࠒ ߦ Θ Ε · ͢ ͔ʁ 
 A . ੥ ٻ ର ৅ ݄ ͷ ཌ ݄ 3 ೔ ʙ 7 ೔ ࠒ ʹ ɺ Ϋ Ϩ δ ο τΧ ʔ υ ܾ ࡁ Λ ߦ ͍ · ͢ɻ 
 - Ϋ Ϩ δ ο τΧ ʔ υ 
 ྫ ɿ η κ ϯ ʢ Ϋ Ϩ σΟ η κ ϯ ʣ Χ ʔ υ 
 ຖ ݄ ຤ క Ί ɾ ཌ ʑ 4 ೔ ෷ ͍ # ཧ ૝ త ͳ Ω ϟ ο γ ϡ ϑ ϩ ʔ Λ ੜ Ή ૊ Έ ߹ Θ ͤ
40. #getshifter Τ ϯ δχΞ ͕ μΠ Ϩ Ϋ τ ʹ ܦ Ӧ ʹ ߩ ݙ Ͱ ͖ Δ ʂ
41. Don’t waste another minute. Sign up for Shifter & stripe and let us do the heavy lifting. https://getshifter.io/ #getshifter
42. ؔ ੢ ΋ ࢝ ಈ ʂ 6 / 5 K Y O T O 6 / 6 K O B E