[도커(docker)] docker-compose를 이용하여 react app 서버 설치 및 개발 환경 구성하기

[도커(docker)] docker-compose를 이용하여 react app 서버 설치 및 개발 환경 구성하기

 

🖥️ Dockerfile를 이용하여 react app 서버 설치 및 개발 환경 구성하기

 

[도커(docker)] Dockerfile를 이용하여 react app 서버 설치 및 개발 환경 구성하기

💡이전글에서 Dockerfile 파일과 docker build 명령어와 docker run 명령어를 이용하여  서버 설치 및 환경 구성했는데 docker-compose를 이용하면 한번에 설치 및 구성을 할 수 있습니다. 

📌docker-compose를 이용하여 react app 서버 설치 및 개발 환경 구성하기

📝 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

 

👉  파일내용에 대한 설명입니다. 

version: '3'  # 사용할 Docker Compose 파일의 버전 (v3)

services:
  react:  # 'react'라는 이름의 서비스 정의
    build: 
      context: .  # 현재 디렉터리를 빌드 컨텍스트로 사용
      dockerfile: Dockerfile  # React 개발을 위한 Dockerfile 지정 (Dockerfile)

    # 포트 매핑으로 로컬에서 React 개발 서버 접속 가능
    ports:
      - "3000:3000"  # 호스트의 3000번 포트를 컨테이너의 3000번 포트와 연결 (React 개발 서버용)

    # 로컬 코드 변경 사항을 컨테이너에 자동 반영
    # volumes 설정 덕분에 이미지 빌드를 하지 않고 코드를 수정하면 바로 반영됩니다.
    # 단, 서버는 재실행해야 반영됩니다.
    volumes:
      # 컨테이너 내부의 node_modules 폴더는 유지하여, 로컬 파일과 충돌 방지
      - /usr/src/app/node_modules  
      # 현재 디렉터리의 모든 파일을 컨테이너의 /usr/src/app에 마운트 (소스 코드 실시간 반영)
      - .:/usr/src/app  

	# 컨테이너를 실행할 때 표준 입력을 열어 인터랙티브 모드 활성화
    # react 서버 구성시 사용
    stdin_open: true

📝 이미지 빌드 및 서버 실행

docker-compose up

👉 실행결과입니다.

 

🚀 지금까지 docker compose를 이용한 방법에 대해 알아봤습니다.