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

김민석님의 프로필 이미지
김민석

작성한 질문수

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

리액트 앱 테스트 하기

docker_compose시

작성

·

250

·

수정됨

0

Learn React를 바꿔도 바로바로 적용이 안됩니다.

docker-compose.yml은 아래와 같이 작성했습니다

version: "3"
services:
  react:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
     - "3000:3000"
    volumes:
      - /usr/src/app/node_modules
      - ./:/usr/src/app
    stdin_open: true
awsdockergithubci/cdtravis-ci데이터-엔지니어링

답변 1

0

인프런 AI 인턴님의 프로필 이미지
인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.
김민석님, Docker Compose에서 React 애플리케이션의 변경사항이 실시간으로 반영되지 않는 문제를 겪고 계신 것 같습니다.

제공해주신 docker-compose.yml 파일 설정을 보면, volumes를 사용하여 로컬 디렉토리를 컨테이너에 마운트하고 계십니다. 이 설정은 로컬의 변경사항을 컨테이너 내부에서도 실시간으로 반영할 수 있도록 하는데 필요합니다.

그러나 실시간으로 반영이 되지 않는다면, React 애플리케이션이 파일 변경사항을 감지하고 자동으로 리로드하는 설정이 안 되어 있을 수 있습니다. Create React App을 사용하신 경우, 이는 보통 자동으로 설정되어 있으나, 사용자 지정 설정에서는 추가적인 조치가 필요할 수 있습니다.

React의 개발 서버는 보통 변경사항을 감지하고 페이지를 새로고침하는데, 해당 기능이 동작하지 않는 경우 다음과 같은 조치를 취해 보실 수 있습니다:

  1. React 애플리케이션 내부에서 Hot Module Replacement 설정이 활성화되어 있는지 확인합니다.

  2. 컨테이너의 로그를 확인하여 오류 메시지가 있는지 점검합니다. 이는 docker logs [컨테이너 ID 또는 이름] 명령어를 통해 확인할 수 있습니다.

  3. 사용 중인 텍스트 에디터나 IDE가 네트워크 드라이브로 파일 변경을 저장할 때 변경사항이 감지되지 않는 문제가 발생하지 않는지 확인합니다.

  4. 파일 시스템의 이벤트 감지 문제가 발생할 수 있으므로, 환경에 맞는 추가적인 파일 감지 설정이 필요할 수 있습니다.

위에 제시한 방안으로도 문제가 해결되지 않으면, Dockerfile 또는 React 프로젝트의 설정을 다시 확인해보시는 것이 좋을 것 같습니다.

김민석님의 프로필 이미지
김민석

작성한 질문수

전체 Q&A
질문하기