frontend 변경사항 반영

지금 nginx 를 이용해서 웹서버 랑 proxy랑 둘다 하는걸로 이해했는데

그럼 docker-compose.yml 측에서 frontend 빌드시
Dockerfile.dev 사용하니까

frontend 변경사항이 바로 보여야 하는지 아닌지 궁금합니다

frontend 변경 -> nginx 에서 정적파일을 가져와서 제공 지금 이런식인데
docker-compose yml 에서

nginx: restart: always build: dockerfile: Dockerfile context: ./nginx ports: - "3000:80"

여기에서는 볼륨이 딱히 보이지 않아서요 nginx에서는 변경사항이 있으면 어떻게 tracking 하는건가요?

프론트엔드가 변경되어도 그 변경된 사항을 다시 빌드해서 웹서버에서 제공이 되야하는건가요 안되는건가요?

현재는 프론트엔드 변경사항이 바로 반영이 되지 않아 제가 틀린건지 궁금해서 여쭙니다

안녕하세요, 인프런 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 공식 문서를 참고해 보시는 것도 좋아요. 수고하세요!

인프런 커뮤니티 질문&답변