개발 버전의 Docker Compose 파일 작성 프론트/백엔드

---

개발 버전 Docker Compose를 작성한 이유

개발 환경에서 Docker Compose를 사용하면 소스 코드 변경 시 애플리케이션을 다시 빌드하거나 재실행할 필요가 없고, 그만큼 더 간편하고 효율적인 개발이 가능합니다. 개발 버전의 Docker Compose를 작성하는 이유는 바로 개발 중인 애플리케이션의 소스 코드 변경을 즉시 반영할 수 있기 때문입니다.

1. 소스 코드 변경 시 재실행 불필요

보통 개발 중에는 애플리케이션을 수정하고, 그 변경 사항을 반영하기 위해 매번 서버를 재시작하거나 빌드를 다시 해야 하는 번거로움이 있습니다. 그러나 Docker Compose를 활용한 개발 환경에서는 소스 코드와 컨테이너를 동기화해두기 때문에, 소스 코드만 수정하고 저장하면 자동으로 변경 사항이 컨테이너에 반영됩니다. 예를 들어, React 애플리케이션에서는 CHOKIDAR_USEPOLLING=true 환경 변수를 설정하여 파일 변경 감지를 더욱 효율적으로 처리하고, Django 앱의 경우도 코드 변경 시 서버가 자동으로 반영되도록 설정할 수 있습니다.

이렇게 소스 코드가 자동으로 반영되면, 개발자는 매번 서버를 재시작할 필요 없이 계속해서 코드 수정에만 집중할 수 있게 됩니다. 개발 속도가 빨라지고, 불필요한 재시작으로 인한 시간을 절약할 수 있습니다.

2. 실행의 간편함

Docker Compose를 사용하면 애플리케이션 실행이 매우 간편해집니다. 일반적으로 React와 Django는 별도의 개발 환경을 필요로 하고, 이를 로컬에서 설정하려면 많은 시간과 노력이 듭니다. 그러나 Docker Compose에서는 docker-compose up 한 번으로 모든 서비스를 실행할 수 있으며, 개발 서버가 자동으로 시작됩니다.

또한, 소스 코드 변경 시에는 별도로 실행을 다시 하지 않아도 Docker가 자동으로 변경 사항을 감지하여 반영합니다. 이는 개발자가 Docker Compose를 통해 애플리케이션의 실행과 설정을 간편하게 관리할 수 있게 해주며, 작업 효율성을 크게 향상시킵니다.

---

왜 Docker Compose를 사용해야 할까요?

개발 환경의 일관성 유지

Docker Compose를 사용하면 개발 환경을 코드로 정의할 수 있습니다. docker-compose.yml 파일을 작성하여 프로젝트에 필요한 모든 환경을 명시적으로 설정할 수 있기 때문에, 팀원들이 각자의 로컬 환경에서 동일한 설정을 적용해 실행할 수 있습니다. 또한, 클라우드나 서버 환경에서도 동일한 방식으로 애플리케이션을 배포하고 실행할 수 있습니다. 이렇게 일관된 환경을 유지하면 "내 PC에서는 잘 되는데, 왜 서버에서는 안 될까?"라는 문제를 예방할 수 있습니다.

 

빠른 개발 및 테스트 환경 구축

React와 Django를 각각 독립적으로 실행할 때마다 환경 설정과 실행 과정을 수동으로 해야 한다면 시간과 노력이 많이 소모됩니다. Docker Compose를 사용하면 docker-compose up 한 번으로 모든 설정을 완료하고, 바로 애플리케이션을 실행할 수 있습니다. 이를 통해 빠르게 개발 및 테스트를 진행할 수 있으며, 새로운 팀원도 손쉽게 개발 환경을 세팅할 수 있습니다. 또한, docker-compose는 개발과 테스트, 배포 환경을 동일하게 설정할 수 있어 테스트 결과와 실제 서비스에서의 동작이 일치하도록 보장합니다.

 

전체 환경을 한 번에 종료할 수 있는 기능

Docker Compose는 docker-compose down 명령어를 사용하여 모든 컨테이너를 한 번에 종료하고 정리할 수 있습니다. 이로 인해 개발 환경을 청소하고 초기 상태로 돌아가는 것이 간단해집니다. 각 서비스를 개별적으로 종료하고 다시 시작하는 번거로움을 줄여줍니다.

---

Docker Compose를 이용한 React와 Django 개발 환경 설정

웹 애플리케이션을 개발할 때, 프론트엔드(React)와 백엔드(Django)를 각각 독립적인 환경에서 실행하는 것이 중요합니다. 이를 위해 Docker와 Docker Compose를 활용하면 두 애플리케이션을 손쉽게 관리하고 실행할 수 있습니다. 이 글에서는 Docker Compose를 사용하여 React와 Django 애플리케이션을 설정하는 방법을 소개합니다.

---

프로젝트 구성

이번 예제에서는 React와 Django 애플리케이션을 Docker Compose로 관리합니다. 이를 위해 두 개의 컨테이너를 설정합니다:

• React 앱 (프론트엔드)
• Django 앱 (백엔드)

---

Docker Compose 설정

version: '3'
services:
  react-app:
    build:
      context: ./front  # React 프로젝트 디렉토리 지정
      target: dev-stage
    ports:
      - "80:3000"
    volumes:
      - ./front:/app  # React 소스 코드와 컨테이너 동기화
    environment:
      - CHOKIDAR_USEPOLLING=true

  django-app:
    build:
      context: ./sdsp/backend  # Django 프로젝트 디렉토리 지정
      dockerfile: Dockerfile
    ports:
      - "8123:8123"
    volumes:
      - ./sdsp/backend:/app  # Django 소스 코드와 컨테이너 동기화
    environment:
      - PYTHONUNBUFFERED=1
    command: >
      bash -c "python manage.py runserver 0.0.0.0:8123"

위 설정에서 두 개의 서비스가 정의됩니다. 각 서비스는 해당 애플리케이션의 빌드 디렉토리, 포트, 볼륨 등을 지정합니다.

---

React 애플리케이션 Dockerfile

# React 개발 서버용
FROM node:16-alpine AS dev-stage

WORKDIR /app
COPY package*.json ./
RUN npm install --force
COPY . .

# React 개발 서버 실행
CMD ["npm", "start"]
EXPOSE 3000

React 앱의 Dockerfile은 node:16-alpine 이미지를 기반으로 하여 필요한 패키지를 설치하고, npm start 명령어로 개발 서버를 실행합니다.

---

Django 애플리케이션 Dockerfile

# 베이스 이미지를 Python 3.10으로 설정합니다.
FROM python:3.10

# 작업 디렉토리를 설정합니다.
WORKDIR /app

# 요구사항 파일을 컨테이너로 복사합니다.
COPY requirements.txt .

# 필요한 패키지를 설치합니다.
RUN pip install --no-cache-dir -r requirements.txt

# 애플리케이션 소스 코드를 복사합니다.
COPY . .

# 환경 변수 설정
ENV PYTHONUNBUFFERED=1

# Django 앱에서 사용할 포트를 노출합니다.
EXPOSE 8123

# Django 서버를 시작하는 명령어를 설정합니다.
CMD ["python", "manage.py", "runserver", "0.0.0.0:8123"]

Django 앱의 Dockerfile은 Python 3.10을 사용하며, 의존성 설치 후 python manage.py runserver 명령어로 서버를 실행합니다.

---

6. 실행 방법

1. docker-compose.yml, React와 Django 각각의 Dockerfile을 프로젝트에 맞게 작성합니다.
2. Docker Compose를 실행하여 두 서비스를 동시에 시작합니다.

docker-compose up --build

---