Mercari_Frontend_CircleCI.pdf

Transcript

1. Mercari Frontendͷ
 CircleCI׆༻ࣄྫ Mercari Frontend SET Hiroshi Urayama (@urahiroshi)

2. ࣗݾ঺հ • Mercari Frontend SET (Software Engineer in Test) •

   ػೳ։ൃҎ֎͸ԿͰ΋΍͍ͬͯ·͢
 - ։ൃ؀ڥͷߏங, ӡ༻
 - CI/CD
 - ӡ༻πʔϧಋೖ

3. Mercari FrontendνʔϜͱ͸ • ѻ͏ݴޠ: ओʹJavaScript • ϓϩμΫτ:
 - ϝϧΧϦWeb൛
 -

   ΞϓϦ಺WebView
 - Customer Service؅ཧը໘

4. CircleCI ࢖༻ྫ1 Deployment

5. Deployment • FrontendνʔϜ͕ѻ͏ϓϩδΣΫτ͸
 େ·͔ʹ̎छྨͷσϓϩΠର৅͕͋Δ • Static File • Docker Image

6. Deployment: Static File • JavaScriptΛϏϧυ(webpack, gulpͳͲ)ͯ͠੩త ϑΝΠϧͱͯ͠ϗεςΟϯά • ΋ͱ΋ͱ͸CircleCIͰ͸ςετͷΈ࣮ࢪ͠ɺ
 σϓϩΠ࣌ʹσϓϩΠର৅ͷαʔόͰϏϧυ͍ͯͨ͠

   • ࠷΋ෳࡶͳΞϓϦέʔγϣϯͰ͸ɺ4ͭͷಠཱͨ͠ JavaScriptϓϩδΣΫτͷϏϧυ੒Ռ෺ΛҰͭͷσΟ ϨΫτϦ্ʹ഑ஔ͍͕ͯͨ͠…

7. σϓϩΠॲཧ

8. ௕͍ (worst caseͰ10෼Ҏ্)

9. CircleCIͰϏϧυͨ͠΋ͷΛอଘ͠
 μ΢ϯϩʔυ͢Ε͹ྑ͍ͷͰ͸

10. Deployment: Static File • ࡞Γ௚ͨ͠Workflow

11. Deployment: Static File 1. ϏϧυܥͷδϣϒΛฒྻ࣮ߦ
 => Ϗϧυ੒Ռ෺Λworkspaceʹอଘ

12. Deployment: Static File 2. Ϗϧυ͕ऴΘͬͨΒςετ

13. Deployment: Static File 3. Ϗϧυ͕͢΂ͯऴΘͬͨΒ੒Ռ෺ΛूΊͯ
 ετϨʔδ(AWS S3)ʹอଘ

14. Before (਺෼ʙ10෼Ҏ্) After (10ඵલޙ)

15. ࣮͸·ͩຊ൪؀ڥͰग़͍ͤͯͳ͍

16. Deployment: Docker Image • Node.jsαʔόΛDocker Imageͱͯ͠push
 
 
 
 -

    testͱbuildΛฒྻͰ࣮ߦ
 - ྆ํ੒ޭͨ͠Βdeploy (docker build & push)
 - ࠷ޙʹ੩తϑΝΠϧΛ֎෦ετϨʔδʹσϓϩΠ
 (੩తϑΝΠϧ͸CDNܦ༝Ͱμ΢ϯϩʔυͤ͞ΔͨΊ)


17. Deployment: Docker Image • testͱbuildΛฒྻͰ࣮ߦ (all branch) • ͜͜Ͱͷbuild͸Ϗϧυ͕੒ޭ͢Δ͔ͷςετͱ࣮ͯ͠ߦ
 (deploy

    job͸masterϒϥϯν΁ͷϚʔδޙʹ࣮ߦ͞ΕΔͨΊɺͦ͜Ͱ Ϗϧυࣦഊ͢ΔͷΛ๷͙) • test࣌ͷύοέʔδΠϯετʔϧ͸ `npm install` ͕ͩɺ
 build࣌͸ `npm ci —production` (։ൃ༻ͷύοέʔδΛؚ·ͳ͍) Ͱ Ωϟογϡ΋࢖Θͳ͍
 - False Negative࠷খԽͷͨΊ
 - testͷํ͕͕͔͔࣌ؒΔͷͰɺbuildͷΩϟογϡΛ࢖͏ඞཁੑ͕ബ͍

18. Deployment: Docker Image • docker build & push, ੩తϑΝΠϧͷσϓϩΠ (master

    branch) 1. ࡞੒ͨ͠docker image͔Β੩తϑΝΠϧΛίϐʔͯ͠ workspaceʹอଘ
 
 
 
 
 
 
 
 
 2. workspace͔Β੩తϑΝΠϧΛऔΓग़ͯ͠ετϨʔδʹอଘ

19. Deployment: Docker Image • build-and-push-gcr.sh

20. CircleCI࢖༻ྫ2 StorybookͷσϓϩΠ

21. Storybookͱ͸ • UIίϯϙʔωϯτΛΧλϩάͷΑ͏ʹදࣔ͠ ֬ೝͰ͖ΔϥΠϒϥϦ

22. Pull RequestͰStorybook͕
 ݟ͑Ε͹֬ೝ͠΍͍͢

23. StorybookͷσϓϩΠ

24. StorybookͷΞοϓϩʔυ • Uploadઌ͸S3͕ͩɺCloudFrontܦ༝Ͱ
 ΞΫηεʹIPΞυϨε੍ݶΛ͔͚͍ͯΔ • ͜͏͍͏؀ڥΛ࡞͓͚ͬͯ͹ɺPrivateϦϙδτϦ ༻ͷGitHub Pagesͷ୅ΘΓʹ࢖͑Δ Upload ࢀর

25. StorybookͷURL௨஌ • ${CIRCLE_PULL_REQUEST} ͔Β
 Pull Requestͷ൪߸Λऔಘͯ͠URLΛ൑ผ • CircleCIͷઃఆͰ `Only build

    pull requests` Λ
 Onʹ͢Δඞཁ͕͋Δ
 (σϑΥϧτͩͱPull RequestΛ࡞Δલʹδϣϒ͕ಈ͍ͯ͠·ͬͯ ${CIRCLE_PULL_REQUEST} ͕औಘͰ͖ͳ͍)

26. CircleCI ࢖༻ྫ3 ੬ऑੑݕ஌

27. ੬ऑੑݕ஌ • `npm audit` ίϚϯυͰɺΞϓϦέʔγϣϯ͕ ґଘ͍ͯ͠Δnpmύοέʔδͷ੬ऑੑͷ༗ແ Λ֬ೝͰ͖Δ

28. None

29. Ͳ͏΍͍ͬͯΔ͔ 1. `npm audit` Λຖ೔࣮ߦ
 => CircleCIͷScheduling Jobͱͯ͠ಈ͔͢ 2. લ೔ͷ݁Ռͱൺֱ


    => ࣮ߦ݁ՌΛCircleCIͷΩϟογϡʹอଘͯ͠ൺֱ 3. ൺֱͯࠩ͠෼͕͋Ε͹Slackʹ௨஌
 (σϑΥϧτͷग़ྗͩͱݟͮΒ͍ͷͰJSONग़ྗʹͯ͠ jqͰ੔ܗ)

30. ੬ऑੑݕ஌ • Slackग़ྗྫ

31. ੬ऑੑݕ஌ • Orbʹͨ͠
 (npm audit࣮ߦ => ੔ܗ => ࠩ෼ൺֱ)
 https://circleci.com/orbs/registry/orb/

    urahiroshi/npm-audit

32. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠