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.7k
Mercari_Frontend_CircleCI.pdf
urahiroshi
December 03, 2018
Tweet
Share
More Decks by urahiroshi
See All by urahiroshi
組織拡大でカルチャー崩壊を防ぐためにできること
urahiroshi
0
400
プロダクトのスケールによって顕在化しうるリスクをどう管理するか?
urahiroshi
9
6.3k
SET活動のすすめ.pdf
urahiroshi
1
1.6k
Node Security Platform, nsp, npm audit @roppongi.js#3
urahiroshi
1
960
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Rails Girls Zürich Keynote
gr2m
95
14k
Docker and Python
trallard
46
3.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
How to Ace a Technical Interview
jacobian
280
24k
Building an army of robots
kneath
306
46k
GitHub's CSS Performance
jonrohan
1032
470k
How STYLIGHT went responsive
nonsquared
100
5.8k
Why Our Code Smells
bkeepers
PRO
340
57k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Git: the NoSQL Database
bkeepers
PRO
431
66k
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
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠