Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mercari_Frontend_CircleCI.pdf

urahiroshi
December 03, 2018
2.6k

 Mercari_Frontend_CircleCI.pdf

urahiroshi

December 03, 2018
Tweet

Transcript

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

    ػೳ։ൃҎ֎͸ԿͰ΋΍͍ͬͯ·͢
 - ։ൃ؀ڥͷߏங, ӡ༻
 - CI/CD
 - ӡ༻πʔϧಋೖ
  2. Deployment: Static File • JavaScriptΛϏϧυ(webpack, gulpͳͲ)ͯ͠੩త ϑΝΠϧͱͯ͠ϗεςΟϯά • ΋ͱ΋ͱ͸CircleCIͰ͸ςετͷΈ࣮ࢪ͠ɺ
 σϓϩΠ࣌ʹσϓϩΠର৅ͷαʔόͰϏϧυ͍ͯͨ͠

    • ࠷΋ෳࡶͳΞϓϦέʔγϣϯͰ͸ɺ4ͭͷಠཱͨ͠ JavaScriptϓϩδΣΫτͷϏϧυ੒Ռ෺ΛҰͭͷσΟ ϨΫτϦ্ʹ഑ஔ͍͕ͯͨ͠…
  3. Deployment: Docker Image • Node.jsαʔόΛDocker Imageͱͯ͠push
 
 
 
 -

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

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

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

    branch) 1. ࡞੒ͨ͠docker image͔Β੩తϑΝΠϧΛίϐʔͯ͠ workspaceʹอଘ
 
 
 
 
 
 
 
 
 2. workspace͔Β੩తϑΝΠϧΛऔΓग़ͯ͠ετϨʔδʹอଘ
  6. StorybookͷURL௨஌ • ${CIRCLE_PULL_REQUEST} ͔Β
 Pull Requestͷ൪߸Λऔಘͯ͠URLΛ൑ผ • CircleCIͷઃఆͰ `Only build

    pull requests` Λ
 Onʹ͢Δඞཁ͕͋Δ
 (σϑΥϧτͩͱPull RequestΛ࡞Δલʹδϣϒ͕ಈ͍ͯ͠·ͬͯ ${CIRCLE_PULL_REQUEST} ͕औಘͰ͖ͳ͍)
  7. Ͳ͏΍͍ͬͯΔ͔ 1. `npm audit` Λຖ೔࣮ߦ
 => CircleCIͷScheduling Jobͱͯ͠ಈ͔͢ 2. લ೔ͷ݁Ռͱൺֱ


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