[Docker] Docker에 올린 코드 실시간 반영하기(Next.js)

이전과 똑같이 docker container에 올린 Next.js 코드를 실시간으로 반영해주고자 한다. 이를 핫 리로드라고 하는데, 아래의 작업을 따라하면 해당 작업을 따라할 수 있다.

next.config.js 수정하기

module.exports = {
  webpackDevMiddleware: config => {
    config.watchOptions = {
      poll: 1000,
      aggregateTimeout: 300,
    }
    return config
  },
}

위와 같은 코드가 next.config.js안에 포함되어 있어야 한다.

dockerfile 작성하기

# Use an official Node.js runtime as a parent image
FROM node:18-alpine as builder

ENV CHOKIDAR_USEPOLLING=true

# Set the working directory in the container
WORKDIR /app

# Copy the package.json and package-lock.json files
COPY package*.json /app
COPY . /app
# Install dependencies
RUN npm install &&  npm run build

FROM node:18-alpine as production

COPY --from=builder --chown=nextjs:nextjs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nextjs /app/.next/static ./.next/static
COPY --from=builder --chown=nextjs:nextjs /app/public ./public
COPY --from=builder --chown=nextjs:nextjs /app/package.json ./package.json

RUN npm install --production

# Expose the port that Next.js will run on
EXPOSE 3000

# Start the Next.js application
CMD /bin/sh -c "node server.js"

위의 도커 파일은 일반 도커 파일과는 다르게 멀티 스테이지 빌드로 하여 도커파일을 생성하였다. 위의 작업을 develop, production등으로 하여 작업을 나누어 도커파일을 작성하면 해당 파일의 용량이 확실히 준다.

docker-compose.yml 작성하기

version: "3.8"
services: 
  web:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: web
    restart: always
    environment:
	    - NODE_ENV=development 
      #if you’re using Windows, you may need to uncomment the next line - Sol from @Kobe E
      #- WATCHPACK_POLLING=true
    volumes:
      - ./:/app
      - /app/node_modules
      - /app/.next
    ports:
      - 3000:3000

위와 같이 작성해주면 되는데, 여기서 수정해야 되는 부분들이 존재한다.

• context : 작업 디렉토리 파일의 위치를 작성해줘야 한다. .는 현재 디렉토리로 하겠다는 의미이다.
• container_name : 도커 컨테이너 이름으로 무엇을 설정할지 적어준다.
• environment : 환경 변수를 설정해주는 곳이다. 여기서 윈도우의 경우 WATCHPACK_POLLING을 추가해준다.

docker-compose up -d --build

• up : 파일에 정의된 컨테이너를 생성하고 시작한다.
• -d : detach 모드로 컨테이너가 실행되는 동안 백그라운드에서 작업을 할 수 있다.
• —build : docker compose에게 컨테이너를 시작하기 전에 이미지를 빌드하라고 지시하는 명령어이다.

docker-compose.yml을 작성하고 위의 명령어를 작성하여 docker-compose를 실행시켜준다. 이는 윗쪽에서 작성한 dockerfile으로 기준으로 돌아가게 된다.

주관적인 생각)

그러면 local에서 도커 컨테이너의 코드가 바뀌는 것이 반영된다. 하지만 docker container를 돌렸을 때 자주 다운됨을 확인할 수 있었다. 나의 경우 이전에도 말했지만, 코드 수정사항이 많은 경우 하는 것을 추천하고, 그것이 아니라면 build버전으로 올리는 것을 추천한다.

👇🏻 참고 사이트

https://velog.io/@kmsk99/NextJs와-도커-사용시-핫리로드-불가-문제
https://jameschambers.co.uk/nextjs-hot-reload-docker-development
https://www.codemochi.com/blog/2019-08-27-nextjs-hmr
https://medium.com/@elifront/best-next-js-docker-compose-hot-reload-production-ready-docker-setup-28a9125ba1dc