[Docker] 투표 앱 docker compose로 배포해보기

1. Django 이미지 만들기

CORS_ALLOWED_ORIGINS와 CSRF_TRUSTED_ORIGINS에 frontend 추가하기

 

Django 프로젝트 디렉터리에 Dockerfile, .dockerignore 파일 생성하기

 

Dockerfile

• python:3.12-slim이미지 사용
• 가상 환경 설정하고, 종속성 설치 후 서버 실행
• 8000번 포트 노출해서 외부 접근 허용

FROM python:3.12-slim

WORKDIR /app
COPY ./ /app/

# 가상 환경 설정 및 종속성 설치
RUN python -m venv .venv
RUN pip install -r requirements.txt

# 서버 실행
ENV DEBUG=True
EXPOSE 8000
CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]

 

.dockerignore

• 이미지 빌드 시 포함하지 않을 파일 명시
• .gitignore에 있는 내용 그대로 사용

# Python-generated files
__pycache__/
*.py[oc]
build/
dist/
wheels/
*.egg-info

# Virtual environments
.venv
.env

 

생성한 Dockerfile로 이미지 빌드하기

$ docker build -t django-api .

 

django-api 이미지가 생성됨

$ docker images

 

컨테이너 실행해서 정상적으로 동작하는지 확인

• —rm: 컨테이너 종료되면 자동으로 삭제
• --env-file .env: 환경 변수 파일 읽어오기

$ docker run --rm --env-file .env -p 8000:8000 django-api 

2. frontend 이미지 만들기 

/app/polls/[id]/results/page.tsx에서 요청 보내는 url을 192.168.100.3으로 변경하기

• 192.168.100.3: docker compose에서 네트워크 구성할 때, backend 네트워크 ip 주소로 지정할 예정

 

/app/polls/[id]/page.tsx도 192.168.100.3으로 변경

 

/components/poll-form.tsx도 192.168.100.3으로 변경

 

Dockerfile 생성하기

 

Dockerfile

• node:18-alpine 이미지 사용
• 종속성 설치하고, 빌드 후 실행
• 3000번 포트 노출해서 외부 접근 허용

FROM node:18-alpine

WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000

CMD ["npm", "run", "start"]

 

생성한 Dockerfile로 이미지 빌드하기

$ docker build -t polls-front .

 

빌드 완료되면, 다음과 같이 polls-front 이미지가 생성됨

$ docker images

3. docker-compose.yaml 파일 생성하고, 배포하기

docker-compose.yaml과 .env 파일 생성하기

 

docker-compose.yaml

• image: 앞서 생성한 polls-front와 django-api를 각각 frontend, backend 서비스의 이미지로 지정
• ports: 외부에서 http://localhost:<포트>으로 접속할 수 있도록, 3000번 포트와 8000번 포트 매핑
• env_file: .env 파일을 통해, DB 접속 정보를 환경 변수로 설정하기
• networks: bridge network를 생성하고, 각각의 서비스에 IP 주소 할당

services:
  frontend:
    image: polls-front:latest
    ports:
      - 3000:3000
    networks:
      my-bridge-network:
        ipv4_address: 192.168.100.2

  backend:
    image: django-api:latest
    ports:
      - 8000:8000
    env_file:
      - .env
    networks:
      my-bridge-network:
        ipv4_address: 192.168.100.3

networks:
  my-bridge-network:
    driver: bridge
    ipam:
      driver: default
      config:
        - subnet: "192.168.100.0/24"

 

.env

• DB 접속 정보 입력

 

docker compose up으로 컨테이너 생성하고, 실행하기

$ docker compose up

 

localhost:3000/polls/1으로 접속해서 확인해보면, frontend와 backend가 정상적으로 요청을 주고 받음

 

docker compose log에서 주고 받은 요청을 확인할 수 있음