Lerna + TypeScript + Serverless FrameworkではじめるCircleCIでのAPIデプロイ/ circlecijp-201907

Slide 1

Slide 1 text

L e r n a + Ty p e S c r i p t + S e r v e r l e s s F r a m e w o r k Ͱ ͸ ͡ Ί Δ C i rc l e C I Ͱ ͷ A P I σ ϓ ϩ Π ʲ େ ࡕ ʳ C i rc l e C I Ϣʔ βʔί ϛ ϡχςΟϛ ʔ τΞ οϓ # 1 #circlecijp

Slide 2

Slide 2 text

H i d e t a k a O k a m o t o • Digitalcube Co. Ltd. • Alexa Campions • AWS Samurai 2017 in Japan

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

D i g i t a l c u b e Ͱ ͷ C i rc l e C I ར ༻ ঢ় گ #circlecijp

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

ര ૸

Slide 7

Slide 7 text

D i g i t a l c u b e Ͱ ͷ C i rc l e C I ར ༻ ঢ় گ • SaaSܥͰ͸΄΅શPJར༻ • Dockerίϯςφ / Serverless Framework / React / AWS AMI etc … • ෳ਺ਓ͕֤PJͰͦΕͧΕCIΛ·Θ͢ͷͰɺFreeͩͱͨ·ʹ٧·Δ • ༗ྉϓϥϯʹͯ͠Linuxίϯςφ2ͭΛར༻த #circlecijp

Slide 8

Slide 8 text

ͦ ͷ ଞ ͷ C I α ʔ Ϗ ε ʹ ͭ ͍ͯ • Circle CI͸δϣϒ਺ʢίϯςφ਺ʣͰͷ՝ۚ • OSS͸Travis CIΛར༻ͯ͠δϣϒΛ෼ࢄ • ECS / SAM (CloudFormation)ܥ͸CodeBuild (with CodePipeline) • ϓϥΠϕʔτrepo΍3rd PartyπʔϧͰσϓϩΠ͢Δ࣌͸CircleCI #circlecijp

Slide 9

Slide 9 text

L e r n a + Ty p e S c r i p t + S e r v e r l e s s F r a m e w o r k Ͱ ͸ ͡ Ί Δ C i rc l e C I Ͱ ͷ A P I σ ϓ ϩ Π #circlecijp

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

ϥ Π ϒ ϥ Ϧ ͱ ϓ ϩ δΣ Ϋ τ Λ ̍ re p o Ͱ ؅ ཧ

Slide 12

Slide 12 text

ͳ ͥ Ϟ ϊ Ϩϙ ʹ ͠ ͨ ͔ ʁ • API / Batch͸AWS / Stripe΁ͷAPIίʔϧ͕΄΅ϝΠϯ • DynamoDBΫΤϦ΍StripeͷAPIϨεϙϯεͷߜΓࠐΈॲཧ͕૿Ճ • PJ͝ͱʹϥούʔతϝιουɾؔ਺͕ൃੜɺDRYͰͳ͘ͳΔ • ϥούʔ܈͸OSSʹ͍ͨ͠Θ͚Ͱ͸ͳ͍ • ϞϊϨϙʹͯ͠ɺશPJಉ͡ιʔεΛࢀর͢ΔΑ͏ʹมߋ #circlecijp

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

L e r n a - Ϟ ϊ Ϩϙ ؅ ཧ ͷ ͨ Ί ͷ ϥ Π ϒ ϥ Ϧ • npm i -D lerna • `packages/`഑ԼʹnpmϓϩδΣΫτΛ഑ஔ͢ΔʢDefaultʣ • lernaίϚϯυͰશϓϩδΣΫτʹରͯ͠npm-script͕࣮ߦՄೳ • —scopeΛ͚ͭΔͱϓϩδΣΫτࢦఆ΋Մೳʢෳ਺Մʣ • lerna addΛ࢖͏ͱϓϩδΣΫτಉ࢜ΛϦϯΫͰ͖Δʢsymlinkʣ #circlecijp

Slide 15

Slide 15 text

L e r n a Λ ࢖ ͬͯ ͍ Δ P J ͷ ྫ • Gutenberg - WordPressͷ৽͍͠ϒϩοΫΤσΟλ • ASK SDK - Amazon Alexa޲͚SDK (Node.js൛ͷΈ) • AWS Amplify - AWSͰΞϓϦΛ࡞Δͱ͖ͷϑϨʔϜϫʔΫ • ASK Utils - ASK SDKΛศརʹ࢖͏ͨΊͷSDK (made by Զ) • AmazonܥͷNode.jsϥΠϒϥϦ͸͍͍ͩͨLerna؅ཧ #circlecijp

Slide 16

Slide 16 text

෼ ׂ ͷ ํ ๏ • ਖ਼௚ख୳Γ • Stripe / AWS / TerraformͳͲɺΞΫηε͢ΔαʔϏεͰ෼ׂ • ʮಛఆϓϥϯͷϢʔβʔͷΈௐ΂ΔʯͳͲͷΑ͘࢖͏λεΫ͕ൃੜ • workerͱ͍͏໊લͰ΋͏̍ͭ૚Λ௥Ճͨ͠ #circlecijp

Slide 17

Slide 17 text

΍ ͬͯ Α ͔ ͬ ͨ ͜ ͱ • ࠶ར༻Ͱ͖Δίʔυ͕૿͑ͨ • webpackͰϏϧυ͔ͯ͠Β࢖͏ͷͰɺLambdaͷαΠζ΋গ͠ݮͬͨ • 1repoʹ·ͱ·͍ͬͯΔͷͰɺPJ͕୳͠΍͍͢ • ࢖༻͢Δύοέʔδͷόʔδϣϯ΍tsconfigͳͲΛἧ͑ΕΔ #circlecijp

Slide 18

Slide 18 text

ͭ Β ͍ ͱ ͜ Ζ • ͍ΖΜͳPJͰ࢖͏ͷͰɺԼखʹߋ৽Ͱ͖ͳ͘ͳͬͨ • ϥΠϒϥϦଆ͸ܕఆٛ΍ςετ͔ͬ͠Γ΍Βͳ͍ͱ΍͹͍ • ෼ׂ͗͢͠Δͱ௥͍͔͚Δͷ͕େม • ϥΠϒϥϦͷϏϧυΛ๨ΕΔͱPJ͕Ξϓσ͞Εͳ͍ • CI / CDͲ͏͢Δͷ໰୊ #circlecijp

Slide 19

Slide 19 text

Slide 20

Slide 20 text

L e r n a Ψ ο π Ϧ ࢖ ͬ ͨ ͱ ͖ ͷ C i rc l e C I ར ༻ ʹ ͭ ͍ͯ #circlecijp

Slide 21

Slide 21 text

L e r n a ࢖ ͏ ͱ Կ ͕ ͭ Β ͘ ͳ Δ ͔ ʁ • PJͷϧʔτσΟϨΫτϦ͕มΘΔɻ • Before: • After: /packages// • PJ਺͕૿͑Δͱɺδϣϒͷ࣮ߦ͕࣌ؒ௕͘ͳΔ • .circleci/config.yml͕ΧΦεʹͳΔ #circlecijp

Slide 22

Slide 22 text

ţ Š Ƅ Ş ū Ŝ Ƅ Ř YA M L

Slide 23

Slide 23 text

ͳ ʹ ͕ ͓ ͖ ͨ ʁ • Workflowؤுͬͨ • PJ͝ͱʹϏϧυΛఆٛ • filterͰϏϧυ͢ΔϒϥϯνΛࢦఆ • PJಉ࢜Ͱґଘ͍ͯ͠Δ৔߹͸ɺࣄલʹϏϧυ͕ඞཁ • requiresͰґଘ͢ΔϏϧυΛ࣮ߦ͢ΔΑ͏ʹࢦఆ #circlecijp

Slide 24

Slide 24 text

δϣϒ ͷ ྫ

Slide 25

Slide 25 text

C i rc l e C I ্ Ͱ l e r n a ί Ϛ ϯ υ Λ ಈ ͔ ͢ ৔ ߹ ͷ ஫ ҙ ఺ • —scopeΛ͚ͭͳ͍ͱશPJʹରͯ͠npm-script͕࣮ߦ͞ΕΔ • PJ਺ͱδϣϒ࣮ߦ͕࣌ؒൺྫ͢Δ • ௕࣌ؒίϯςφΛઐ༗͞ΕΔՄೳੑ͕͕͋Δ • ϒϥϯν΍filterΛར༻ͯ͠ɺඞཁͳPJͷςετɾϏϧυ͚ͩʹ • Lerna + sls webpack͸͕͔͔࣌ؒ͘͢͝ΔͷͰಛʹ஫ҙ #circlecijp

Slide 26

Slide 26 text

C i rc l e C I ʹ ݶ Β ͳ ͍ T i p s • Lerna + sls webpack͸͕͔͔࣌ؒ͘͢͝ΔʢݪҼෆ໌ʣ • ϝϞϦΛ࢖͍੾Δͱ͖͕͋ΔͷͰɺ--max-old-space-sizeΛదٓ࢖͏ • node --max-old-space-size=2048 $(which sls) deploy • package.jsonʹ”private”: trueΛ͚ͭͯͳ͍PJ͸npm publishՄೳ #circlecijp

Slide 27

Slide 27 text

C o n c l u s i o n • CircleCI͸ϓϥΠϕʔτܥPJͷCI / CDʹศར • δϣϒ਺Ͱ՝ۚ͞ΕΔͷͰɺOSS͸TravisͳͲΛ࢖͏ͱΑ͍͔΋ • LernaΛ࢖͏͜ͱͰɺෳ਺ͷPJͱڞ༗ϥΠϒϥϦΛ·ͱΊͯ؅ཧ • CircleCIͷWorkﬂowΛ࢖͑͹ϞϊϨϙͰ΋CI / CDͰ͖Δ • ୭͔΋ͬͱ͍͍ํ๏͋ΔͳΒڭ͑ͯʢ Blog / Meetup / etc…ʣ #circlecijp