Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Mercari_Frontend_CircleCI.pdf
Search
urahiroshi
December 03, 2018
2
2.6k
Mercari_Frontend_CircleCI.pdf
urahiroshi
December 03, 2018
Tweet
Share
More Decks by urahiroshi
See All by urahiroshi
プロダクトのスケールによって顕在化しうるリスクをどう管理するか?
urahiroshi
7
3.9k
SET活動のすすめ.pdf
urahiroshi
1
1.4k
Node Security Platform, nsp, npm audit @roppongi.js#3
urahiroshi
1
870
Featured
See All Featured
Scaling GitHub
holman
458
140k
Become a Pro
speakerdeck
PRO
22
4.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
166
48k
Web development in the modern age
philhawksworth
205
10k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Practical Orchestrator
shlominoach
185
10k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
Agile that works and the tools we love
rasmusluckow
327
20k
Bash Introduction
62gerente
608
210k
Transcript
Mercari Frontendͷ CircleCI׆༻ࣄྫ Mercari Frontend SET Hiroshi Urayama (@urahiroshi)
ࣗݾհ • Mercari Frontend SET (Software Engineer in Test) •
ػೳ։ൃҎ֎ԿͰ͍ͬͯ·͢ - ։ൃڥͷߏங, ӡ༻ - CI/CD - ӡ༻πʔϧಋೖ
Mercari FrontendνʔϜͱ • ѻ͏ݴޠ: ओʹJavaScript • ϓϩμΫτ: - ϝϧΧϦWeb൛ -
ΞϓϦWebView - Customer Serviceཧը໘
CircleCI ༻ྫ1 Deployment
Deployment • FrontendνʔϜ͕ѻ͏ϓϩδΣΫτ େ·͔ʹ̎छྨͷσϓϩΠର͕͋Δ • Static File • Docker Image
Deployment: Static File • JavaScriptΛϏϧυ(webpack, gulpͳͲ)ͯ͠੩త ϑΝΠϧͱͯ͠ϗεςΟϯά • ͱͱCircleCIͰςετͷΈ࣮ࢪ͠ɺ σϓϩΠ࣌ʹσϓϩΠରͷαʔόͰϏϧυ͍ͯͨ͠
• ࠷ෳࡶͳΞϓϦέʔγϣϯͰɺ4ͭͷಠཱͨ͠ JavaScriptϓϩδΣΫτͷϏϧυՌΛҰͭͷσΟ ϨΫτϦ্ʹஔ͍͕ͯͨ͠…
σϓϩΠॲཧ
͍ (worst caseͰ10Ҏ্)
CircleCIͰϏϧυͨ͠ͷΛอଘ͠ μϯϩʔυ͢Εྑ͍ͷͰ
Deployment: Static File • ࡞Γͨ͠Workflow
Deployment: Static File 1. ϏϧυܥͷδϣϒΛฒྻ࣮ߦ => ϏϧυՌΛworkspaceʹอଘ
Deployment: Static File 2. Ϗϧυ͕ऴΘͬͨΒςετ
Deployment: Static File 3. Ϗϧυ͕ͯ͢ऴΘͬͨΒՌΛूΊͯ ετϨʔδ(AWS S3)ʹอଘ
Before (ʙ10Ҏ্) After (10ඵલޙ)
࣮·ͩຊ൪ڥͰग़͍ͤͯͳ͍
Deployment: Docker Image • Node.jsαʔόΛDocker Imageͱͯ͠push -
testͱbuildΛฒྻͰ࣮ߦ - ྆ํޭͨ͠Βdeploy (docker build & push) - ࠷ޙʹ੩తϑΝΠϧΛ֎෦ετϨʔδʹσϓϩΠ (੩తϑΝΠϧCDNܦ༝Ͱμϯϩʔυͤ͞ΔͨΊ)
Deployment: Docker Image • testͱbuildΛฒྻͰ࣮ߦ (all branch) • ͜͜ͰͷbuildϏϧυ͕ޭ͢Δ͔ͷςετͱ࣮ͯ͠ߦ (deploy
jobmasterϒϥϯνͷϚʔδޙʹ࣮ߦ͞ΕΔͨΊɺͦ͜Ͱ Ϗϧυࣦഊ͢ΔͷΛ͙) • test࣌ͷύοέʔδΠϯετʔϧ `npm install` ͕ͩɺ build࣌ `npm ci —production` (։ൃ༻ͷύοέʔδΛؚ·ͳ͍) Ͱ ΩϟογϡΘͳ͍ - False Negative࠷খԽͷͨΊ - testͷํ͕͕͔͔࣌ؒΔͷͰɺbuildͷΩϟογϡΛ͏ඞཁੑ͕ബ͍
Deployment: Docker Image • docker build & push, ੩తϑΝΠϧͷσϓϩΠ (master
branch) 1. ࡞ͨ͠docker image͔Β੩తϑΝΠϧΛίϐʔͯ͠ workspaceʹอଘ 2. workspace͔Β੩తϑΝΠϧΛऔΓग़ͯ͠ετϨʔδʹอଘ
Deployment: Docker Image • build-and-push-gcr.sh
CircleCI༻ྫ2 StorybookͷσϓϩΠ
Storybookͱ • UIίϯϙʔωϯτΛΧλϩάͷΑ͏ʹදࣔ͠ ֬ೝͰ͖ΔϥΠϒϥϦ
Pull RequestͰStorybook͕ ݟ͑Ε֬ೝ͍͢͠
StorybookͷσϓϩΠ
StorybookͷΞοϓϩʔυ • UploadઌS3͕ͩɺCloudFrontܦ༝Ͱ ΞΫηεʹIPΞυϨε੍ݶΛ͔͚͍ͯΔ • ͜͏͍͏ڥΛ࡞͓͚ͬͯɺPrivateϦϙδτϦ ༻ͷGitHub PagesͷΘΓʹ͑Δ Upload ࢀর
StorybookͷURL௨ • ${CIRCLE_PULL_REQUEST} ͔Β Pull Requestͷ൪߸Λऔಘͯ͠URLΛผ • CircleCIͷઃఆͰ `Only build
pull requests` Λ Onʹ͢Δඞཁ͕͋Δ (σϑΥϧτͩͱPull RequestΛ࡞Δલʹδϣϒ͕ಈ͍ͯ͠·ͬͯ ${CIRCLE_PULL_REQUEST} ͕औಘͰ͖ͳ͍)
CircleCI ༻ྫ3 ੬ऑੑݕ
੬ऑੑݕ • `npm audit` ίϚϯυͰɺΞϓϦέʔγϣϯ͕ ґଘ͍ͯ͠Δnpmύοέʔδͷ੬ऑੑͷ༗ແ Λ֬ೝͰ͖Δ
None
Ͳ͏͍ͬͯΔ͔ 1. `npm audit` Λຖ࣮ߦ => CircleCIͷScheduling Jobͱͯ͠ಈ͔͢ 2. લͷ݁Ռͱൺֱ
=> ࣮ߦ݁ՌΛCircleCIͷΩϟογϡʹอଘͯ͠ൺֱ 3. ൺֱ͕ͯࠩ͋͠ΕSlackʹ௨ (σϑΥϧτͷग़ྗͩͱݟͮΒ͍ͷͰJSONग़ྗʹͯ͠ jqͰܗ)
੬ऑੑݕ • Slackग़ྗྫ
੬ऑੑݕ • Orbʹͨ͠ (npm audit࣮ߦ => ܗ => ࠩൺֱ) https://circleci.com/orbs/registry/orb/
urahiroshi/npm-audit
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠