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
340
プロダクトのスケールによって顕在化しうるリスクをどう管理するか?
urahiroshi
8
5.9k
SET活動のすすめ.pdf
urahiroshi
1
1.5k
Node Security Platform, nsp, npm audit @roppongi.js#3
urahiroshi
1
950
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
GitHub's CSS Performance
jonrohan
1031
460k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
KATA
mclloyd
30
14k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Gamification - CAS2011
davidbonilla
81
5.4k
For a Future-Friendly Web
brad_frost
179
9.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠