[Docker] Nginx, React, Django 초기 환경 구성 (Docker Compose)

by


Docker에 Nginx, React, Django를 초기 셋팅하기 위한 init 환경 구성 테스트한 내용을 정리합니다.

사용 환경

  • Window 10
  • node
  • python
  • docker desktop

작업 디렉토리 생성

mkdir init_service
cd init_service

Frontend 서비스

Frontend 디렉토리 생성

  • 위치 : init_service 
mkdir frontend
cd frontend

React App 생성

  • 위치 : init_service\frontend
create-react-app front-web
cd front-web

React APP 빌드

  • 위치 : init_service\frontend\front-web 
npm run build

React Dockerfile 생성

  • 위치 : init_service\frontend\front-web
FROM node

RUN npm install -g serve

RUN mkdir /app

WORKDIR /app

COPY ./build ./build

ENTRYPOINT ["serve", "-s", "build"]

Frontend Nginx 디렉토리 생성

  • 위치 : init_service\frontend
mkdir nginx
cd nginx

Frontend Nginx default.conf 파일 생성

  • 위치 : init_service\frontend\nginx
  • 파일명 : default.conf
upstream react {
    server front-web:3000;
}

server {

    listen 80;

    location = /healthz {
        return 200;
    }

    location / {
        proxy_pass http://react;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_redirect off;
    }
    location /sockjs-node {
        proxy_pass http://react;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    error_page 500 502 503 504    /50x.html;

    location = /50x.html {
        root    /usr/share/nginx/html;
    }
}

Frontend Nginx Dockerfile 생성

  • 위치 : init_service\frontend\nginx
  • 파일명 : Dockerfile
FROM nginx:latest

RUN rm /etc/nginx/conf.d/default.conf

COPY default.conf /etc/nginx/conf.d

Backend 서비스

Backend 디렉토리 생성

  • 위치 : init_service
mkdir backend
cd backend

back-web 디렉토리 생성

  • 위치 : init_service\backend
mkdir back-web
cd back-web

Django 프로젝트 생성

  • 위치 : init_service\backend\back-web
django-admin startproject config .

Django Dockerfile 생성

  • 위치 : init_service\backend\back-web
  • 파일명 : Dockerfile
FROM python:latest

RUN mkdir /app

WORKDIR /app

# install dependencies
COPY requirements.txt ./
RUN python3 -m pip install --upgrade pip setuptools
RUN pip install -r requirements.txt

# 프로젝트 코드 복사
COPY . ./

# EXPOSE 8000

# gunicorn 실행
# CMD ["gunicorn", "--bind", "0.0.0.0:8000", "config.wsgi:application"]

Backend Nginx 디렉토리 생성

  • 위치 : init_service\backend
mkdir nginx
cd nginx

Backend Nginx default.conf 파일 생성

  • 위치 : init_service\backend\nginx
  • 파일명 : default.conf
upstream django {
    server back-web:8000;
}

server {

    listen 8000;

    location = /healthz {
        return 200;
    }

    location / {
        proxy_pass http://django;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_redirect off;
    }

    location /static/ {
        alias /app/staticfiles/;
    }
}

Backend Nginx Dockerfile 생성

  • 위치 : init_service\backend\nginx
  • 파일명 : Dockerfile
FROM nginx:latest

RUN rm /etc/nginx/conf.d/default.conf

COPY default.conf /etc/nginx/conf.d

Docker Compose 파일 작성

  • 위치 : 최상위 init-service 디렉토리
  • 파일명 : docker-compose.yml
version: "3.7"

services:
  front-web:
    container_name: front-web
    build:
      context: ./frontend/front-web/.
      dockerfile: Dockerfile
    networks:
      - frontend_network
  front-nginx:
    container_name: front-nginx
    build:
      context: ./frontend/nginx/.
      dockerfile: Dockerfile
    ports:
      - "80:80"
    depends_on:
      - front-web
    networks:
      - frontend_network

  back-web:
    container_name: back-web
    build:
      context: ./backend/back-web/.
      dockerfile: Dockerfile
    command: gunicorn --bind :8000 config.wsgi:application
    networks:
      - backend_network
  back-nginx:
    container_name: back-nginx
    build:
      context: ./backend/nginx/.
      dockerfile: Dockerfile
    ports:
      - "8000:8000"
    depends_on:
      - back-web
    networks:
      - backend_network

networks:
  backend_network:
    driver: bridge
  frontend_network:
    driver: bridge


Leave a Comment