Razzle: Docker ๊ฐœ๋ฐœ ์ปจํ…Œ์ด๋„ˆ์—์„œ razzle์„ ์‹คํ–‰ํ•˜๊ธฐ

์— ๋งŒ๋“  2017๋…„ 12์›” 01์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: jaredpalmer/razzle

์ด ๋ฆฌํฌ์ง€ํ† ๋ฆฌ์˜ ๋ฌธ์ œ๋ฅผ ๊ฒ€์ƒ‰ํ•œ ๊ฒฐ๊ณผ ์ผ๋ถ€ ๊ธฐ์—ฌ์ž๊ฐ€ ๋„์ปค ์‚ฌ์šฉ์— ์ต์ˆ™ํ•˜๋ฏ€๋กœ ๋ˆ„๊ตฐ๊ฐ€ ๋‚˜์—๊ฒŒ ์•ฝ๊ฐ„์˜ ๋„์›€์„ ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋„์ปค๋กœ ๊ฐœ๋ฐœ ์›Œํฌํ”Œ๋กœ๋ฅผ ์„ค์ •ํ•˜๊ณ  ๋„์ปค ์ปจํ…Œ์ด๋„ˆ ๋‚ด๋ถ€์—์„œ ๋ฐ˜์‘ํ•˜๋Š” hmr์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋„๋ก ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋ชฉํ‘œ๋Š” ๊ธฐ๋ณธ razzle-create-app ํ”„๋กœ์ ํŠธ๋ฅผ ๋„ˆ๋ฌด ๋งŽ์ด ํ•ดํ‚นํ•˜์ง€ ์•Š๊ณ  ์ž‘๋™ํ•˜๋Š” ์†”๋ฃจ์…˜์„ ์–ป๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋‹ค์Œ๊ณผ ๊ฐ™์ด dockerfile์„ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

FROM node:6

WORKDIR /home/node/app

EXPOSE 3000
EXPOSE 3001

CMD ["npm", "start"]

๊ทธ๋Ÿฐ ๋‹ค์Œ ๋ณผ๋ฅจ์œผ๋กœ ๋งˆ์šดํŠธ๋œ dev ๋””๋ ‰ํ† ๋ฆฌ๋กœ ์ปจํ…Œ์ด๋„ˆ๋ฅผ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.
docker run --name hmr-test -d -p 8080:3000 -p 3001:3001 -v C:\Users\charles\Desktop\docker-hmr-test\ui-service:/home/node/app docker-hmr

์•ฑ์ด ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์‹คํ–‰๋˜๊ณ  ํ‘œ์‹œ๋˜์ง€๋งŒ razzle์€ ๋กœ์ปฌ ํŒŒ์ผ ์‹œ์Šคํ…œ์—์„œ ์ˆ˜ํ–‰๋œ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ์„ ํƒํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ปจํ…Œ์ด๋„ˆ์—์„œ bash๋ฅผ ์‹คํ–‰ํ•˜๊ณ  ํŒŒ์ผ์„ catํ•˜๋ฉด ํŒŒ์ผ์ด ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์—…๋ฐ์ดํŠธ๋˜๊ณ  razzle์ด ์ปจํ…Œ์ด๋„ˆ์˜ ์˜ฌ๋ฐ”๋ฅธ ๋””๋ ‰ํ† ๋ฆฌ์—์„œ ์‹œ์ž‘ํ•˜๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด razzle์ด ํŒŒ์ผ์„ ์ธ์‹ํ•˜๊ณ  ๋‹ค์‹œ ๋นŒ๋“œํ•˜์ง€ ์•Š๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์ด ๋ฌธ์ œ๋Š” ๋„์ปค์—์„œ ์‹คํ–‰ ์ค‘์ธ ์•Œ๋ ค์ง„ ๋ฌธ์ œ์™€ ๊ด€๋ จ์ด ์žˆ์Šต๋‹ˆ๋‹ค. Windows ํ™˜๊ฒฝ์—์„œ ์ปจํ…Œ์ด๋„ˆ๋ฅผ ์‹คํ–‰ํ•˜๋ฉด ๊ธฐ๋ณธ ๊ธฐ๋Šฅ์ด ์žˆ๋Š” ๋„์ปค ์ปจํ…Œ์ด๋„ˆ์— ํŒŒ์ผ ์ด๋ฒคํŠธ๊ฐ€ ์ „๋‹ฌ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ ๊ธฐ๋Šฅ์ด ๊ตฌํ˜„๋  ๋•Œ๊นŒ์ง€์˜ ํ˜„์žฌ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์€ ๋„์ปค ์ปจํ…Œ์ด๋„ˆ์—์„œ ์›นํŒฉ ํด๋ง์„ ์‚ฌ์šฉํ•˜์—ฌ ์›นํŒฉ์ด ํŒŒ์ผ ์‹œ์Šคํ…œ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ํด๋งํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ hmr์ด ์—…๋ฐ์ดํŠธ๋ฅผ ํ™•์ธํ•˜๋„๋ก ํ•˜๋ ค๋ฉด ์ด๊ฒƒ์„ razzle.config.js ํŒŒ์ผ์— ์ถ”๊ฐ€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

       if(config.devServer){
            config.devServer.watchOptions['poll'] = 1000;
            config.devServer.watchOptions['aggregateTimeout'] = 300;
        }

@jaredpalmer ์ด๊ฒƒ์ด ๊ธฐ๋Šฅ ๋ธŒ๋žœ์น˜๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ์€ ๊ฒƒ์ด๋ผ๋ฉด PR์„ ์œ„ํ•ด ๋ญ”๊ฐ€๋ฅผ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์•Œ๋ ค์ฃผ์„ธ์š”. ์ด ๋ฉ‹์ง„ ์Šคํƒ€ํ„ฐ ํ‚คํŠธ๋ฅผ ๋งŒ๋“ค์–ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

์ด ๋ฌธ์ œ๋Š” ๋„์ปค์—์„œ ์‹คํ–‰ ์ค‘์ธ ์•Œ๋ ค์ง„ ๋ฌธ์ œ์™€ ๊ด€๋ จ์ด ์žˆ์Šต๋‹ˆ๋‹ค. Windows ํ™˜๊ฒฝ์—์„œ ์ปจํ…Œ์ด๋„ˆ๋ฅผ ์‹คํ–‰ํ•˜๋ฉด ๊ธฐ๋ณธ ๊ธฐ๋Šฅ์ด ์žˆ๋Š” ๋„์ปค ์ปจํ…Œ์ด๋„ˆ์— ํŒŒ์ผ ์ด๋ฒคํŠธ๊ฐ€ ์ „๋‹ฌ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ ๊ธฐ๋Šฅ์ด ๊ตฌํ˜„๋  ๋•Œ๊นŒ์ง€์˜ ํ˜„์žฌ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์€ ๋„์ปค ์ปจํ…Œ์ด๋„ˆ์—์„œ ์›นํŒฉ ํด๋ง์„ ์‚ฌ์šฉํ•˜์—ฌ ์›นํŒฉ์ด ํŒŒ์ผ ์‹œ์Šคํ…œ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ํด๋งํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ hmr์ด ์—…๋ฐ์ดํŠธ๋ฅผ ํ™•์ธํ•˜๋„๋ก ํ•˜๋ ค๋ฉด ์ด๊ฒƒ์„ razzle.config.js ํŒŒ์ผ์— ์ถ”๊ฐ€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

       if(config.devServer){
            config.devServer.watchOptions['poll'] = 1000;
            config.devServer.watchOptions['aggregateTimeout'] = 300;
        }

@jaredpalmer ์ด๊ฒƒ์ด ๊ธฐ๋Šฅ ๋ธŒ๋žœ์น˜๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ์€ ๊ฒƒ์ด๋ผ๋ฉด PR์„ ์œ„ํ•ด ๋ญ”๊ฐ€๋ฅผ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์•Œ๋ ค์ฃผ์„ธ์š”. ์ด ๋ฉ‹์ง„ ์Šคํƒ€ํ„ฐ ํ‚คํŠธ๋ฅผ ๋งŒ๋“ค์–ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

@alexjoyner ๊ฑฐ๋ฃฉํ•œ ๋ชฐ๋ฆฌ. ํ•ด๊ฒฐํ•ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๋‚˜๋Š” ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ ์‚ฌ๋žŒ์ด ์•„๋‹ˆ๋ฏ€๋กœ ์ด๊ฒƒ์ด ๋‚˜๋ฅผ ๋งŽ์ด ๋„์™”์Šต๋‹ˆ๋‹ค.

๊ตฌ์„ฑ์ด ๋‚˜๋ฅผ ์œ„ํ•ด ์ž‘๋™ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ์—…๋ฐ์ดํŠธ ์ค‘์ธ ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด์ง€๋งŒ ๋ธŒ๋ผ์šฐ์ €์—๋Š” ํ‘œ์‹œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋‹ค์Œ ๋กœ๊ทธ๋Š” ์‹œ์ž‘ ๋ฐ ํŒŒ์ผ ๋ณ€๊ฒฝ์„ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.

0|razzle   |
0|razzle   | > [email protected] start /app/razzle/razzle
0|razzle   | > razzle start
0|razzle   |
0|razzle   |  WAIT  Compiling...
0|razzle   |
0|razzle   | โ„น Compiling Client
0|razzle   | โ„น ๏ฝขwds๏ฝฃ: Project is running at http://apps.syntapse.co.uk:3001/
0|razzle   | โ„น ๏ฝขwds๏ฝฃ: webpack output is served from undefined
0|razzle   | โ„น ๏ฝขwds๏ฝฃ: Content not from webpack is served from /app/razzle/razzle
0|razzle   | โ„น ๏ฝขwds๏ฝฃ: 404s will fallback to /index.html

0|razzle  | โœ” Client: Compiled successfully in 8.28s
0|razzle  | โ„น Compiling Server
0|razzle  | โœ” Server: Compiled successfully in 765.85ms
0|razzle  | Warning: Please use `require("react-router-dom").Route` instead of `require("react-router-dom/Rout0|razzle  | Warning: Please use `require("react-router-dom").Switch` instead of `require("react-router-dom/Swi0|razzle  | โœ…  Server-side HMR Enabled!
0|razzle  | ๐Ÿš€ started
0|razzle  | โ„น Compiling Server
0|razzle  | โœ” Server: Compiled successfully in 88.70ms
0|razzle  | ๐Ÿ”  HMR Reloading `./server`...
0|razzle  | [HMR] Updated modules:
0|razzle  | [HMR]  - ./src/Home.js
0|razzle  | [HMR]  - ./src/App.js
0|razzle  | [HMR]  - ./src/server.js
0|razzle  | [HMR] Update applied.
0|razzle  | โ„น Compiling Client
0|razzle  | โœ” Client: Compiled successfully in 73.55ms
0|razzle  | โ„น Compiling Client
0|razzle  | โœ” Client: Compiled successfully in 228.31ms
์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰

๊ด€๋ จ ๋ฌธ์ œ

kkarkos picture kkarkos  ยท  3์ฝ”๋ฉ˜ํŠธ

pseudo-su picture pseudo-su  ยท  3์ฝ”๋ฉ˜ํŠธ

knipferrc picture knipferrc  ยท  5์ฝ”๋ฉ˜ํŠธ

dizzyn picture dizzyn  ยท  3์ฝ”๋ฉ˜ํŠธ

mhuggins picture mhuggins  ยท  3์ฝ”๋ฉ˜ํŠธ