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
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
GraphQLとの向き合い方2022年版
quramy
49
14k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
How GitHub (no longer) Works
holman
314
140k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
We Have a Design System, Now What?
morganepeng
53
7.7k
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
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠