フロントエンドのIaCとCIとLoC

We Are JavaScripters! @8th
https://wajs.connpass.com/event/56958/
用の資料です

Transcript

1. ϑ ϩ ϯ τ Τ ϯ υ ͷ I a C ͱ C I ͱ L o C A U T O M A T E D D E P L O Y M E N T W I T H C L O U D F O R M A T I O N & G I T L A B C I
2. ͜ͷεϥΠυ͸ɺϑϩϯτΤϯυΤϯδχΞ͕ɺΠϯϑ ϥૉਓͳ͕ΒɺIaCͱCIʹऔΓ૊Μͩ࿩Ͱ͢ɻ ͳͷͰɺৄ͍͠ํʹ͸ୀ۶ͳ಺༰ʹͳΓ·͢͜ͱΛ༧Ί ྃ͝ঝ͍ͩ͘͞·ͤɻ
3. P ro f i l e @ b o i y a a • ΞϝϦΧͷେֶͰίϯϐϡʔ λʔαΠΤϯεͷֶҐΛऔಘ • ถFacebookຊࣾͷϑϩϯτ ΤϯυΤϯδχΞ • ͱ͍͏ఋΛ࣋ͭߴଔώϞத೥ • ೥ऩ͸ఋͷϘʔφεΑΓ௿͍
4. օ ͞ Μ ɺ Ϟ ςϧ ۦ ಈ ։ ൃ ͯ͠ · ͢ ͔ʁ
5. Ϟςϧۦಈ։ൃͱ͸ ϞςΔ͔Ͳ͏͔ʢϞςʔϥϏϦςΟʣΛج४ʹٕज़Λબ ͼϞςϦϯά͍ͯ͘͠ελΠϧͰ͋Δ
6. ͋ Δ ೔ ɺ γ Ϧ ί ϯό Ϩ ʔ ͷ σϕ ϩ ο ύʔ ୡ ͕ ͜ Μ ͳ ձ ࿩ Λ ͯ͠ ͍ · ͠ ͨ ɻ
7. Έ Μ ͳ Π ϯ ϑ ϥ प ΓͬͯͲ͏ͯ͠Δʁ δϣ ϯ
8. ͏ ͪ ͸ Ϋ ϥ ΢ υ ߏ ੒ Λ ί ʔ υ Խ ͯ͠ C I ͯ͠ Δ Θ ɻ ϒ Ϧ τ χʔ
9. I a C ͔ ɺ ͦ Ε ͸ C o o l ͩ Ͷ δϣ ϯ
10. ๻ ͸ L o C ͩ Α ϕ ϯ
11. ʢ ΍ ͩ … ͔ ͬ ͜ ͍ ͍ … / / / ʣ ϒ Ϧ τ χʔ
12. ͳΜ͔ͩΑ͘Θ͔Βͳ͍͕ϞςΔΑ͏ͩʂ ͱ͍͏͜ͱͰIaCͱCI͸͡ΊͯΈ·ͨ͠
13. I a C , C I , L o C ͱ ͸ • IaC
 Infrastructure as Code
 Πϯϑϥߏ੒ͷίʔυԽ + όʔδϣϯ؅ཧ + ϓϩϏδϣχϯάࣗಈԽ • CI
 Continuous Integration
 ϏϧυͱςετΛࣗಈԽ͠ɺසൟʹ࣮ߦ͢Δ͜ͱ • LoC
 Ladies first over Cloud first
 Ϋϥ΢υϑΝʔετΑΓϨσΟʔϑΝʔετ
14. Π ϯ ϑ ϥ ΍ Δ Α ͏ ʹ ͳ ͬ ͨ എ ܠ • ϑϩϯτΤϯυͱόοΫΤϯυͰνʔϜ͕෼͔Ε͍ͯͯɺ౰ॳ Πϯϑϥ͸όοΫΤϯυ͕ड͚͍͕࣋ͬͯͨɺखҰഋͰ४උʹ ͕͔͔࣌ؒΓͦ͏ͩͬͨ • Πϯϑϥ͸SaaSલఏͩͬͨͷͰɺΞϕΠϥϏϦςΟ΍ηΩϡϦ ςΟͷ֬อʹͦ͜·Ͱਂ͍஌ࣝͱ࣌ؒ͸͔͔Βͳͦ͏ • ͦΕΒͷߏ੒ΛίʔυԽ͢Δͷ͸ϑϩϯτΤϯυΤϯδχΞͰ ΋Ͱ͖ͦ͏ ͱ͍͏͜ͱͰɺϑϩϯτΤϯυؔ࿈ͷΠϯϑϥʹؔͯ͠͸ϑϩϯ τΤϯυΤϯδχΞ͕୲౰͢Δ͜ͱʹͯ͠Έ·ͨ͠ɻ
15. ͦͯ͜͠ΕΒͷίʔυԽʹCloudFormationΛ࢖༻͠·ͨ͠ɻ ϑ ϩ ϯ τ Τ ϯ υ ͷ I a C αʔϏεߏ੒͸AWSͷ੩తίϯςϯπ഑৴ͷϕετϓϥΫςΟεʹ ͳΒ͍·ͨ͠ɻ H T T P S ΋ ΞΫ η ε ੍ ޚ ΋ ͠ ͳ ͍ ͳ Β R o u t e 5 3 ͱ S 3 ͩ ͚ Ͱ Ͱ ͖ · ͢
16. ί ʔ υ Խ ͢ Δ ཧ ༝ αʔϏεΛGUI্Ͱϙνϙνߏங͍ͯ͠Δͱɺ 1. ؀ڥߏஙखॱॻͱ͍͏໊ͷɺը໘ΩϟϓνϟΛExcel ํ؟ࢴʹషΓ෇͚ͨ෺ମΛ࡞Δ͜ͱʹͳΔ 2. ࡞ͬͯ΋ϝϯς͞Εͳ͘ͳΓɺಛఆͷϝϯόʔ͚ͩ ͔͠৮Εͳ͘ͳΔ 3. ϑϩϯτΤϯυνʔϜɾΠϯϑϥ܎ͱ͍͏Ṗͷଐਓ త৬ۀΛੜΈग़͢
17. ࣮ ʹ Ξ ϯ Ϟ ς ʔ ϥ ϒϧ ͩ δϣ ϯ
18. C l o u d F o r m a t i o n ༻ ޠ ͱΓ͋͑ͣ͜ͷ3ͭΛ஌͓͚ͬͯ͹࢖͑·͢ɻ • Ϧιʔε
 CloudFrontσΟετϦϏϡʔγϣϯ΍ɺS3όέοτͳͲɺݸʑͷ AWSαʔϏεΛද͢୯Ґ • ςϯϓϨʔτ
 ϦιʔεΛఆٛ͢ΔͨΊͷJSON·ͨ͸YAMLܗࣜͷϑΝΠϧ • ελοΫ
 ςϯϓϨʔτʹैͬͯ࡞੒͞ΕͨϦιʔεશମΛද͢୯Ґ
19. ς ϯ ϓ Ϩ ʔ τ ߏ ଄ τοϓϨϕϧཁૉ͸ηΫγϣϯͱݺ͹Ε·͢ɻ
 ͱΓ͋͑ͣ͜ͷηΫγϣϯΛ஌͓͚ͬͯ͹ॻ͚·͢ɻ • Parameters
 ελοΫ࡞੒࣌ʹ֎͔Β౉͢஋ͷఆٛ • Resources
 Ϧιʔεͷఆٛ • Outputs
 ελοΫ࡞੒ޙʹ֎͔ΒऔಘͰ͖Δ৘ใͷఆٛ
20. ς ϯ ϓ Ϩ ʔ τ ͷ ྫ P a r a m e t e r s : B u c k e t N a m e : # B u c k e t N a m e ͱ ͍ ͏ ࿦ ཧ ໊ ͷ ύ ϥϝ ʔ λ Λ ࡞ ੒ T y p e : S t r i n g # ͜ ͷ ύ ϥϝ ʔ λ ͸ S t r i n g ܕ R e s o u r c e s : E x a m p l e B u c k e t : # E x a m p l e B u c k e t ͱ ͍ ͏ ࿦ ཧ ໊ ͷ Ϧ ι ʔε Λ ࡞ ੒ T y p e : A W S : : S 3 : : B u c k e t # ͜ ͷ Ϧ ι ʔε ͸ S 3 όέ ο τ ܕ P r o p e r t i e s : B u c k e t N a m e : ! R e f B u c k e t N a m e # όέ ο τ ໊ Λ ઃ ఆ # B u c k e t N a m e ύ ϥϝ ʔ λ ͷ ஋ Λ ࢀ র O u t p u t s : E x a m p l e B u c k e t : # E x a m p l e B u c k e t ͱ ͍ ͏ ࿦ ཧ ໊ ͷ ग़ ྗ Λ ࡞ ੒ V a l u e : ! R e f E x a m p l e B u c k e t # ग़ ྗ ஋ Λ ઃ ఆ # E x a m p l e B u c k e t Ϧ ι ʔε ͷ ஋ Λ ࢀ র
21. AWS CLIΛ࢖ͬͯ͜ͷςϯϓϨʔτͷελοΫΛ࡞੒͠ ·͢ɻ $ a w s c l o u d f o r m a t i o n d e p l o y \ - - t e m p l a t e - f i l e e x a m p l e . y m l \ ς ϯ ϓ Ϩ ʔ τϑ Ν Πϧ ໊ - - s t a c k - n a m e E x a m p l e \ ε λ ο Ϋ ໊ - - c a p a b i l i t i e s C A P A B I L I T Y _ I A M \ ঝ ೝ — p a r a m e t e r - o v e r r i d e s \ ύ ϥϝ ʔ λ B u c k e t N a m e = e x a m p l e - a b c d e f g h i j k l m W a i t i n g f o r c h a n g e s e t t o b e c r e a t e d . . W a i t i n g f o r s t a c k c r e a t e / u p d a t e t o c o m p l e t e S u c c e s s f u l l y c r e a t e d / u p d a t e d s t a c k - E x a m p l e < - ੒ ޭ ʂ
22. ͦͯ͠ग़ྗ஋͸ҎԼͷίϚϯυͰऔಘͰ͖·͢ɻ $ a w s c l o u d f o r m a t i o n d e s c r i b e - s t a c k s \ - - s t a c k - n a m e E x a m p l e \ ε λ ο Ϋ ໊ — - q u e r y S t a c k s [ 0 ] . O u t p u t s [ 0 ] . O u t p u t V a l u e \ - - o u t p u t t e x t ς Ωε τ ܗ ࣜ e x a m p l e - a b c d e f g h i j k l m < - E x a m p l e B u c k e t Ϧ ι ʔε ͷ ஋
23. ͜ΜͳཁྖͰɺඞཁͳϦιʔεΛఆ͍͚ٛͯͩ͘͠Ͱ͢ɻઌ΄Ͳͷαʔ Ϗεߏ੒Ͱ͋Ε͹ɺ • AWS::S3::Bucket, AWS::S3::BucketPolicy • AWS::WAF::IPSet, AWS::WAF::Rule, AWS::WAF::WebACL • AWS::Route53::HostedZone, AWS::Route53::RecordSet • AWS::CertificateManager::Certificate • AWS::CloudFront::Distribution ͱ͍ͬͨϦιʔεΛ࡞੒͢Δײ͡Ͱ͢ɻ
24. ͜͏ͯ͠࡞੒ͨ͠ςϯϓϨʔτ͸ϦϙδτϦʹؚΊɺCI ͰϓϩϏδϣχϯάΛࣗಈԽ͠·͢ɻ ίʔυԽ͚ͩͰͳ͘ɺϓϩϏδϣχϯάͷࣗಈԽ·Ͱؚ ΊͯIaCͱ͍͏ͦ͏Ͱ͢ɻ
26. ϑ ϩ ϯ τ Τ ϯ υ ͷ C I ࣍͸σϓϩΠύΠϓϥΠϯߏஙͷ࿩Ͱ͢ɻ
 ݱࡏͷCI͸ҎԼͷߦఔΛ·Θ͍ͯ͠·͢ɻ • ґଘύοέʔδͷΠϯετʔϧ • ίʔυνΣοΫʢESLint, Flow, stylelintʣɺϢχοτςετʢJestʣ • Ϗϧυ • ϨϏϡʔ؀ڥͷϓϩϏδϣχϯάͱ੒Ռ෺ͷσϓϩΠ • E2EςετʢSeleniumʣ • ֤छϨϙʔτͷσϓϩΠ • εςʔδϯά؀ڥͷϓϩϏδϣχϯάͱ੒Ռ෺ͷσϓϩΠ
27. ͳ ͥ C I Λ ͢ Δ ͷ ͔ ίʔυνΣοΫ΍ςετ͸ಋೖͨ͠ͱͯ͠΋ɺৗʹ࣮ߦ ͯ͠௨ա͍ͯ͠ͳ͚Ε͹඼࣭͸कΕ·ͤΜɻ ख࡞ۀͰͦΕΛ΍͍ͬͯΔͱɺ͍ͭͷؒʹ͔๨Εͯશવ πʔϧ͕௨Βͳ͘ͳͬͪΌͬͨΓ͢Δ͠ɺ ϨϏϡΞʔ͸ґཔͷ౓ʹίʔυམͱ͖ͯͯ͠πʔϧʹ͔ ͚ͳ͖Ό͍͚ͳ͍
28. ࣮ ʹ Ξ ϯ Ϟ ς ʔ ϥ ϒϧ ͩ Θ ϒ Ϧ τ χʔ
29. C I π ʔϧ ͷ छ ྨ CIπʔϧ͸େ͖͘෼͚ͯఏڙํࣜͱઃఆํࣜͷೋ࣠Ͱ෼ ͔Ε·͢ S a a S O n - p re m i s e s ઃ ఆ Λ Ϧ ϙ δ τ Ϧ ʹ ί ʔ υ Ͱ ࣋ ͭ Tr a v i s C I , C i rc l e C I ͳ Ͳ C i rc l e C I E n t e r p r i s e , G i t L a b C I ͳ Ͳ ઃ ఆ Λ G U I Ͱ ߦ ͏ B a m b o o ͳ Ͳ J e n k i n s , B a m b o o ͳ Ͳ
30. CIͷอकੑΛߟ͑ΔͱίʔυͰ͍࣋ͪͨͷͰɺϦϙδτ ϦࣜΛ࠾༻͠·ͨ͠ɻ ·ͨɺ৘γεతɾ༧ࢉతࣄ৘ʹΑΓɺOSSݶఆͩͬͨͷ ͰɺGitHubͱCircleCIͷϫʔΫϑϩʔʹۙͯ͘࢖͍΍͢ ͍GitLabͱGitLab CIΛ࠾༻͠·ͨ͠ɻ
31. G i t L a b C I ༻ ޠ ͱΓ͋͑ͣ͜ͷ4ͭΛ஌͓͚ͬͯ͹࢖͑·͢ɻ • δϣϒ
 ࣮ߦ৚݅ͱεΫϦϓτΛࢦఆͨ͠୯Ґ • .gitlab-ci.yml
 δϣϒΛఆٛͨ͠ϑΝΠϧ • ϥϯφʔ
 GitLabϦϙδτϦ΁ͷpushΛτϦΨʔʹɺ.gitlab-ci.ymlδϣϒΛ࣮ߦ • ύΠϓϥΠϯ
 δϣϒͷҰ࿈ͷྲྀΕ
32. . g i t l a b - c i . y m l ߏ ଄ τοϓϨϕϧཁૉ͸ͱΓ͋͑ͣҎԼͷ4ͭΛ஌͓͚ͬͯ͹ॻ͚·͢ɻ • image
 δϣϒΛ࣮ߦ͢Δ؀ڥͱͳΔDockerΠϝʔδΛࢦఆ͢Δཁૉ • stages
 δϣϒʹ࣮ߦॱংΛ͚ͭΔػೳͰ͋ΔεςʔδΛఆٛ͢Δཁૉ • cache
 Ωϟογϡ͢ΔύεΛࢦఆ͢Δཁૉ • ্هͱଞ͍͔ͭ͘ͷ༧໿໊Ҏ֎ͷ໊લͷཁૉ
 δϣϒཁૉ
33. . g i t l a b - c i . y m l ͷ ྫ Ϗϧυ͚ͩ͢ΔύΠϓϥΠϯΛ࡞ͬͯΈ·͢ɻ i m a g e : n o d e # Φ ϑΟ γ ϟϧ n o d e d o c k e r Πϝ ʔ δ Λ ࢖ ༻ b u i l d : # Ϗ ϧ υ ͢ Δ δϣϒ s c r i p t : - y a r n i n s t a l l - y a r n b u i l d
34. ςετΛೖΕͯΈ·͢ɻ i m a g e : n o d e b u i l d : s c r i p t : - y a r n i n s t a l l - y a r n l i n t - y a r n t e s t - y a r n b u i l d
35. ͜ΕͰ΋͍͍ͷͰ͕͢ɺδϣϒ͸ʢϥϯφʔ࣍ୈͰ͢ ͕ʣฒྻ࣮ߦ͞ΕΔͷͰɺ෼͚ͨํ͕࣌ؒ୹ॖͰ͖· ͢ɻ ͜͜ͰɺґଘΠϯετʔϧ͸શͯΑΓઌʹ࣮ߦ͞Εɺς ετ͸ϏϧυΑΓઌʹ࣮ߦ͍ͨ͠ͷͰɺεςʔδΛ࢖༻ ͠·͢ɻ ·ͨɺδϣϒதʹ࡞ΒΕͨϑΝΠϧΛδϣϒؒͰڞ༗͢ ΔͨΊɺΩϟογϡΛ࢖༻͠·͢ɻ
36. i m a g e : n o d e s t a g e s : # s e t u p ͱ t e s t ͱ b u i l d ͱ ͍ ͏ ε ς ʔ δ Λ ఆ ٛ - s e t u p - t e s t - b u i l d c a c h e : # n o d e _ m o d u l e s σΟ Ϩ Ϋ τ Ϧ Λ Ω ϟ ο γ ϡ ͠ δϣϒ ؒ Ͱ ڞ ༗ ͢ Δ u n t r a c k e d : t r u e p a t h s : - n o d e _ m o d u l e s i n s t a l l : s t a g e : s e t u p # s e t u p ε ς ʔ δ ͸ 1 ൪ ໨ ʹ ఆ ٛ ͞ Εͯ ͍ Δ ͷ Ͱɺ s c r i p t : # · ͣ ͜ ͷ δϣϒ ͕ ࣮ ߦ ͞ Ε Δ - y a r n i n s t a l l
37. l i n t : s t a g e : t e s t # t e s t ε ς ʔ δ ͸ 2 ൪ ໨ ͳ ͷ Ͱɺ s c r i p t : # i n s t a l l δϣϒ ͷ ޙ ʹ ࣮ ߦ ͞ Ε Δ ɻ - y a r n l i n t # l i n t , t e s t δϣϒ ͸ ฒ ྻ ʹ ࣮ ߦ ͞ Ε Δ t e s t : s t a g e : t e s t s c r i p t : - y a r n t e s t b u i l d : s t a g e : b u i l d # b u i l d ε ς ʔ δ ͸ ࠷ ޙ ʹ ఆ ٛ ͞ Εͯ ͍ Δ ͷ Ͱɺ s c r i p t : # l i n t , t e s t δϣϒ ͷ ޙ ʹ ࣮ ߦ ͞ Ε Δ - y a r n b u i l d
38. Ϗϧυͷޙ͸ɺ
 CloudFormationελοΫ࡞੒ɺS3΁ͷσϓϩΠɺE2Eς ετͳͲΛ͍ͯ͠·͕͢ɺجຊతʹ͸ಉ͡ཁྖͰɺεΫ Ϧϓτ͕AWSίϚϯυʹมΘΔ͚ͩͰ͢ɻ
39. d e p l o y r e v i e w : s t a g e : r e v i e w # ಛ ఆ ͷ δϣϒ ͩ ͚ Πϝ ʔ δ Λ ม ߋ ͢ Δ ͜ ͱ ͕ Մ ೳ i m a g e : c g s w o n g / a w s # A W S C L I Λ ࢖ ༻ Ͱ ͖ Δ Πϝ ʔ δ ʹ ม ߋ s c r i p t : - s e t + e ; a w s c l o u d f o r m a t i o n d e p l o y … ; s e t - e - a w s s 3 s y n c b u i l d s 3 : / / … - - c a c h e - c o n t r o l " n o - s t o r e , n o - c a c h e " e 2 e : s t a g e : e 2 e s e r v i c e s : # δϣϒ ༻ ί ϯ ς φ ͱ ฒ ߦ ͯ͠ ผ ͷ ί ϯ ς φ Λ ى ಈ ͢ Δ ͜ ͱ ͕ Մ ೳ - s e l e n i u m / s t a n d a l o n e - c h r o m e s c r i p t : - y a r n e 2 e # Ϩ Ϗ ϡ ʔ ؀ ڥ ʹ ର ͯ͠ S e l e n i u m Ͱ ݕ ࠪ ͢ Δ ॲ ཧ
40. ଞʹ΋ςετΧόϨοδɺύϑΥʔϚϯεɺΞΫηγϏϦςΟͳͲ ͷϨϙʔτΛग़ྗͨ͠Γɺεςʔδϯά؀ڥ΁ͷσϓϩΠΛखಈδϣ ϒͱͯ͠ఆ͍ٛͯͨ͠Γ͠·͢ɻ ͜ΕͰɺϦϙδτϦߋ৽ͷ౓ʹ͜ͷҰ࿈ͷߦఔ͕࣮ߦ͞Εɺ
 ࣦഊ͕͋ͬͨ৔߹͸ɺϝʔϧ΍νϟοτʹ௨஌ͨ͠Γɺ
 Merge Request(GitHubͰ͍͏Pull Request)࣌ʹܯࠂ͞Ε·͢ɻ
42. ࠓ ޙ ͷ औ Γ ૊ Έ • API GatewayͱLambdaͰSSRͱɺSAMʹΑΔ؅ཧ • CloudFormationςϯϓϨʔτͷ؅ཧͱ࣮ߦʹService CatalogΛ࢖ ͏͔Ͳ͏͔ • CloudFormationͰ࡞Εͳ͍Ϧιʔε͕͋ΔʢOrigin Access IdentityʣͷͰɺͦΕ͕࡞ΕΔTerraform΋ݕ౼ • ผAWSΞΧ΢ϯτʹͳΔϓϩμΫγϣϯ΁ͷσϓϩΠΛͲ͏͢Δ͔ ࣄྫ͓࣋ͪͷํڭ͍͑ͯͩ͘͞ʂ
43. T h a n k y o u