[Docker] Docker 파일 활용하여 배포하기(React + Django + PostgreSQL)

Docker를 활용하여 소스코드가 변경되어도 쉽게 배포가 가능하도록 해보자

Docker가 기본적으로 설치가 되어있다고 가정하겠다

 

# 오늘 배포할 환경
Front: React
Backend: Django
DB: PostgreSQL

# 소스코드 트리 구조
TestWrapper
├── docker-compose.yml
├── front
│   ├── build
│   ├── dockerfile
│   ├── node_modules
│   ├── package.json
│   ├── package-lock.json
│   ├── patches
│   ├── poo.txt
│   ├── public
│   ├── README.md
│   ├── src
│   ├── tailwind.config.js
│   └── tsconfig.json
├── package-lock.json
└── test
    ├── backend
    │   ├── dockerfile
    │   ├── config
    │   ├── manage.py
    │   ├── requirements.txt
    │   ├── uploaded_files
    │   ├── user_info
    │   └── 각 app 들...
    └── README.md

Dockerfile

Dockerfile은 컨테이너를 만들기 위한 이미지의 설계서이다

각각 Front와 Backend의 컨테이너를 Dockerfile로 만들것이다

 

dockerfile(Front)

# 1. Node.js를 사용해 React 앱을 빌드
FROM node:18 AS builder

# 2. 앱 소스 코드를 컨테이너로 복사하고, 필요한 패키지들을 설치
WORKDIR /app
COPY package*.json ./
RUN npm install

# 3. React 앱을 빌드 ( nginx에서 사용할 수 있도록 )
COPY . .
RUN npm run build

# 4. Nginx를 사용해 빌드된 앱을 서비스하기 위한 이미지 생성
FROM nginx:1.23

# 5. React 앱의 빌드 파일을 Nginx의 기본 경로에 복사
COPY --from=builder /app/build /usr/share/nginx/html

# 7. 새로고침 문제 해결을 위한 Nginx 설정 (기존 default.conf를 수정)
RUN echo "server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    location / { \
        try_files \$uri \$uri/ /index.html; \
    } \
}" > /etc/nginx/conf.d/default.conf

# 8. 포트 80을 외부에 노출
EXPOSE 80

# 9. Nginx를 실행
CMD ["nginx", "-g", "daemon off;"]

해당 파일을 front-end가 실행되는 위치

즉, npm start 하는 위치에 넣어준다

 

dockerfile(Back)

# 1. Python 기반 이미지를 사용합니다.
FROM python:3.10-slim

# 2. PostgreSQL 클라이언트 라이브러리 설치 ( GCC 포함 )
RUN apt-get update && \
    apt-get install -y gcc libpq-dev python3-dev && \
    rm -rf /var/lib/apt/lists/*

# 3. 필수 패키지를 설치합니다.
WORKDIR /app

# pip 최신 버전으로 업그레이드 후 requirements.txt 복사 및 설치
RUN pip install --upgrade pip
COPY requirements.txt .
RUN pip install -r requirements.txt

# 4. 소스 코드를 복사합니다.
COPY . .

EXPOSE 8001
CMD ["python", "manage.py", "runserver", "0.0.0.0:8001"]

해당 파일을 back-end가 실행되는 위치

즉, runserver를 하는 위치에 넣어준다

docker-compose.yml

docker-compose.yml은 여러 개의 컨테이너를 한번에 정의하고 실행하기 위한 설정 파일이다

즉, 여러 Dockerfile에서 만들어진 컨테이너들을 묶어서 한꺼번에 구성하고 실행할 수 있다

 

우린 front-end와 back-end의 컨테이너를 만드는 dockerfile을 작성했으므로

두 컨테이너를 묶어서 한번에 실행시킬 docker-compose.yml 파일을 작성해보자

 

docker-compose.yml

version: '3.9'

services:
  frontend:
    build:
      context: ./front
      dockerfile: Dockerfile
    ports:
      - "3002:80"  # React 앱에 대해 80번 포트를 외부에 노출
    networks:
      - app-network

  backend:
    build:
      context: ./test/backend
      dockerfile: Dockerfile
    ports:
      - "8001:8001"  # Django 앱에 대해 5123번 포트를 외부에 노출
    networks:
      - app-network
    volumes:
      - ./test/backend/uploaded_files:/app/uploaded_files
      - ./test/backend/user_info:/app/user_info

networks:
  app-network:
    driver: bridge

내가 미리 만들어둔 dockerfile을 명시하고 어떤 포트를 각 컨테이너에 노출할지 작성한다

 

또한 볼륨마운트를 통해 소스코드가 변경되어 재배포하더라도 날라가지않고 유지될 폴더를 지정했다

원래 컨테이너가 내려갔다가 다시 올라가면 사용자가 업로드한 파일, 사용자 프로필 이미지가 삭제될 수 있다

이를 방지하고 유지하고 싶기에 컨테이너 내부에 있는 특정 폴더에 모아뒀다가 컨테이너 밖에 있는 폴더와 볼륨 마운트를 시켰다

[컨테이너 내부 폴더] <--------[볼륨 마운트] ------->[컨테이너 외부 폴더]

어디를 수정해도 다른 폴더에 반영됨!

두 컨테이너를 브릿지를 통해 연결한다

 

이제 파일작성은 끝났으며 docker-compose.yml 파일 위치에서 명령어만 한줄로 서버에 배포 가능하다

docker compose up -d --build

재배포시에는 소스코드 변경 후

docker compose down
docker compose up -d --build

★네트워크가 꼬일 수 있기 때문에 반드시 down 후에 다시 빌드해야 한다 ★

 

이제 다음으로 접속해보면 알맞게 배포된것을 확인할 수 있다

front-end
http://서버아이피:3002/

back-end
http://서버아이피:8001/