Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣗݾ঺հ • Mercari Frontend SET (Software Engineer in Test) • ػೳ։ൃҎ֎͸ԿͰ΋΍͍ͬͯ·͢
 - ։ൃ؀ڥͷߏங, ӡ༻
 - CI/CD
 - ӡ༻πʔϧಋೖ

Slide 3

Slide 3 text

Mercari FrontendνʔϜͱ͸ • ѻ͏ݴޠ: ओʹJavaScript • ϓϩμΫτ:
 - ϝϧΧϦWeb൛
 - ΞϓϦ಺WebView
 - Customer Service؅ཧը໘

Slide 4

Slide 4 text

CircleCI ࢖༻ྫ1 Deployment

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Deployment: Static File • JavaScriptΛϏϧυ(webpack, gulpͳͲ)ͯ͠੩త ϑΝΠϧͱͯ͠ϗεςΟϯά • ΋ͱ΋ͱ͸CircleCIͰ͸ςετͷΈ࣮ࢪ͠ɺ
 σϓϩΠ࣌ʹσϓϩΠର৅ͷαʔόͰϏϧυ͍ͯͨ͠ • ࠷΋ෳࡶͳΞϓϦέʔγϣϯͰ͸ɺ4ͭͷಠཱͨ͠ JavaScriptϓϩδΣΫτͷϏϧυ੒Ռ෺ΛҰͭͷσΟ ϨΫτϦ্ʹ഑ஔ͍͕ͯͨ͠…

Slide 7

Slide 7 text

σϓϩΠॲཧ

Slide 8

Slide 8 text

௕͍ (worst caseͰ10෼Ҏ্)

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Deployment: Static File • ࡞Γ௚ͨ͠Workflow

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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


Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Deployment: Docker Image • docker build & push, ੩తϑΝΠϧͷσϓϩΠ (master branch) 1. ࡞੒ͨ͠docker image͔Β੩తϑΝΠϧΛίϐʔͯ͠ workspaceʹอଘ
 
 
 
 
 
 
 
 
 2. workspace͔Β੩తϑΝΠϧΛऔΓग़ͯ͠ετϨʔδʹอଘ

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

CircleCI࢖༻ྫ2 StorybookͷσϓϩΠ

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

StorybookͷσϓϩΠ

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

StorybookͷURL௨஌ • ${CIRCLE_PULL_REQUEST} ͔Β
 Pull Requestͷ൪߸Λऔಘͯ͠URLΛ൑ผ • CircleCIͷઃఆͰ `Only build pull requests` Λ
 Onʹ͢Δඞཁ͕͋Δ
 (σϑΥϧτͩͱPull RequestΛ࡞Δલʹδϣϒ͕ಈ͍ͯ͠·ͬͯ ${CIRCLE_PULL_REQUEST} ͕औಘͰ͖ͳ͍)

Slide 26

Slide 26 text

CircleCI ࢖༻ྫ3 ੬ऑੑݕ஌

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Ͳ͏΍͍ͬͯΔ͔ 1. `npm audit` Λຖ೔࣮ߦ
 => CircleCIͷScheduling Jobͱͯ͠ಈ͔͢ 2. લ೔ͷ݁Ռͱൺֱ
 => ࣮ߦ݁ՌΛCircleCIͷΩϟογϡʹอଘͯ͠ൺֱ 3. ൺֱͯࠩ͠෼͕͋Ε͹Slackʹ௨஌
 (σϑΥϧτͷग़ྗͩͱݟͮΒ͍ͷͰJSONग़ྗʹͯ͠ jqͰ੔ܗ)

Slide 30

Slide 30 text

੬ऑੑݕ஌ • Slackग़ྗྫ

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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