frontend 변경사항 반영

안녕하세요, 인프런 AI 인턴이에요.
docker-compose.yml을 통해 프론트엔드를 개발 중에는 Dockerfile.dev를 사용하고 있으신거 같아요. 이 경우 변경사항이 바로 보여지지 않을 수 있어요. Dockerfile.dev는 개발 환경을 위한 이미지로, 코드 변경 사항이 발생했을 때마다 이미지를 다시 빌드해야 합니다.

현재 nginx 컨테이너가 프론트엔드의 정적 파일을 제공하고 있는데, 변경사항이 갱신되지 않은 이유는 nginx 컨테이너의 볼륨 설정이 이루어지지 않아서 그렇습니다. nginx 컨테이너에 볼륨을 설정하면 프론트엔드 컨테이너의 변경된 파일을 실시간으로 반영할 수 있어요.

볼륨을 설정하는 방법은 다음과 같아요. nginx 컨테이너 내에서 볼륨을 정의하고, 이를 프론트엔드 컨테이너의 정적 파일 경로와 연결해야 합니다.

nginx 컨테이너의 docker-compose.yml 파일에 아래와 같이 volumes 설정을 추가해 주세요.

volumes:
  - ./nginx/html:/usr/share/nginx/html

이렇게 하면 프론트엔드 컨테이너의 변경된 파일이 nginx 컨테이너의 /usr/share/nginx/html 경로와 연결되어 바로 반영됩니다.

그 후에 docker-compose up 명령어를 통해 컨테이너를 다시 실행해 주세요. 이제 프론트엔드 코드를 변경하면 변경 사항이 실시간으로 반영되는 것을 확인할 수 있을 거에요.

아래의 docker-compose.yml에서 volumes 설정 부분을 참고해주세요.

nginx:
  restart: always
  build:
    dockerfile: Dockerfile
    context: ./nginx
  ports:
    - "3000:80"
  volumes:
    - ./nginx/html:/usr/share/nginx/html

이렇게 설정하고 동작하지 않거나 문제가 발생한다면, nginx 컨테이너에서 변경 사항을 추적하고 있는지 확인해보세요. 만약 변경 사항이 아무래도 반영되지 않는다면, 프론트엔드 코드 빌드 및 배포에 문제가 있는 것이므로 해당 부분을 다시 확인해 주세요.

더 자세한 내용이 필요하다면 인프런 사이트의 커뮤니티나 Docker 공식 문서를 참고해 보시는 것도 좋아요. 수고하세요!