์ด ๋ฆฌํฌ์งํ ๋ฆฌ์ ๋ฌธ์ ๋ฅผ ๊ฒ์ํ ๊ฒฐ๊ณผ ์ผ๋ถ ๊ธฐ์ฌ์๊ฐ ๋์ปค ์ฌ์ฉ์ ์ต์ํ๋ฏ๋ก ๋๊ตฐ๊ฐ ๋์๊ฒ ์ฝ๊ฐ์ ๋์์ ์ค ์ ์์ต๋๋ค. ๋์ปค๋ก ๊ฐ๋ฐ ์ํฌํ๋ก๋ฅผ ์ค์ ํ๊ณ ๋์ปค ์ปจํ ์ด๋ ๋ด๋ถ์์ ๋ฐ์ํ๋ 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์ ์ํด ๋ญ๊ฐ๋ฅผ ํ ์ ์์ต๋๋ค. ๋ฐ๋ก ์๋ ค์ฃผ์ธ์. ์ด ๋ฉ์ง ์คํํฐ ํคํธ๋ฅผ ๋ง๋ค์ด ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค.
@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
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ด ๋ฌธ์ ๋ ๋์ปค์์ ์คํ ์ค์ธ ์๋ ค์ง ๋ฌธ์ ์ ๊ด๋ จ์ด ์์ต๋๋ค. Windows ํ๊ฒฝ์์ ์ปจํ ์ด๋๋ฅผ ์คํํ๋ฉด ๊ธฐ๋ณธ ๊ธฐ๋ฅ์ด ์๋ ๋์ปค ์ปจํ ์ด๋์ ํ์ผ ์ด๋ฒคํธ๊ฐ ์ ๋ฌ๋์ง ์์ต๋๋ค. ๊ธฐ๋ณธ ๊ธฐ๋ฅ์ด ๊ตฌํ๋ ๋๊น์ง์ ํ์ฌ ํด๊ฒฐ ๋ฐฉ๋ฒ์ ๋์ปค ์ปจํ ์ด๋์์ ์นํฉ ํด๋ง์ ์ฌ์ฉํ์ฌ ์นํฉ์ด ํ์ผ ์์คํ ๋ณ๊ฒฝ ์ฌํญ์ ํด๋งํ ์ ์๋๋ก ํ๋ ๊ฒ์ ๋๋ค. ๋ฐ๋ผ์ hmr์ด ์ ๋ฐ์ดํธ๋ฅผ ํ์ธํ๋๋ก ํ๋ ค๋ฉด ์ด๊ฒ์ razzle.config.js ํ์ผ์ ์ถ๊ฐํด์ผ ํฉ๋๋ค.
@jaredpalmer ์ด๊ฒ์ด ๊ธฐ๋ฅ ๋ธ๋์น๋ฅผ ๋ง๋ค๊ณ ์ถ์ ๊ฒ์ด๋ผ๋ฉด PR์ ์ํด ๋ญ๊ฐ๋ฅผ ํ ์ ์์ต๋๋ค. ๋ฐ๋ก ์๋ ค์ฃผ์ธ์. ์ด ๋ฉ์ง ์คํํฐ ํคํธ๋ฅผ ๋ง๋ค์ด ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค.