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ύοέʔδͷ੬ऑੑͷ༗ແ Λ֬ೝͰ͖Δ
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. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠