Hot Reloading

레이어는 캐싱이 된다고 하였습니다. 그럼에도 불구하고 코드가 바뀔때마다 리빌딩을 하는 것은 원치 않을 것입니다.

대신에 컨테이너의 애플리케이션이 변경사항만 즉각적으로 반영했으면 할 것입니다.
이것은 bindn mounts와 hot reloading으로 가능합니다.

아래와 같이 하면 됩니다.
type: bind를 통해 로컬 폴더와 컨테이너 내의 폴더를 동기화하고 있습니다.

volumes:
  - type: bind
    source: ../05-example-web-application/client-react/
    target: /usr/src/app/
  - type: volume
    target: /usr/src/app/node_modules

위와 같이 하면 동기화는 되지만 애플리케이션이 변경사항을 반영하여 재시작하는 방법이 없습니다.
이때는 변경사항을 감지하고 재시작을 해주는 패키지를 이용하면 됩니다.
node.js 기준으로는 nodemon을 이용하면 됩니다.

npm install --save-dev nodemon

이 패키지를 이용하여 다음과 같이 dockerfile을 만들면 변경사항을 감지하고 재시작을 해줍니다.

FROM node:19.6-bullseye-slim AS base
WORKDIR /usr/src/app
COPY package*.json ./

#------------------------------------------------
# Separate dev stage with nodemon and different CMD
FROM base as dev
RUN --mount=type=cache,target=/usr/src/app/.npm \
  npm set cache /usr/src/app/.npm && \
  npm install
COPY . .
# "npm run dev" corresponds to "nodemon src/index.js"
CMD ["npm", "run", "dev"]
#------------------------------------------------

FROM base as production
ENV NODE_ENV production
RUN --mount=type=cache,target=/usr/src/app/.npm \
  npm set cache /usr/src/app/.npm && \
  npm ci --only=production
USER node
COPY --chown=node:node ./src/ .
EXPOSE 3000
CMD [ "node", "index.js" ]