Mercari_Frontend_CircleCI.pdf

48e4501a602324f6728df4c7596fb333?s=47 urahiroshi
December 03, 2018
2.2k

 Mercari_Frontend_CircleCI.pdf

48e4501a602324f6728df4c7596fb333?s=128

urahiroshi

December 03, 2018
Tweet

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. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠