TIL_240221_Docker로 Django, React 프로젝트 배포하기

Sol Lee·2024년 2월 21일

디렉토리 구조

path : /home/ubuntu/
├── backend
│   ├── Dockerfile
│   └── django
│       └── # 백엔드 프로젝트 코드
├── docker-compose.yml
└── frontend
	├── Dockerfile
    ├── # 프론트 프로젝트 코드
    └── nginx.conf

프로젝트 세팅

AWS EC2 생성

AWS에서 EC2 구매후 ssh 접속 도커 설치 후 각 프로젝트를 클론
백엔드 배포 연습 정리

❗️ env 파일이나 url링크 주소 등 수정이나 추가 제대로 됬는지 확인!

Docker 세팅

frontend/Dockerfile

#build phase
FROM node:18.19 as builder # 버전은 프로젝트에 맞게 변경
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .

RUN npm run build

# run phase
FROM nginx
RUN rm /etc/nginx/conf.d/default.conf
RUN rm -rf /etc/nginx/conf.d/*
COPY ./nginx.conf /etc/nginx/conf.d/
EXPOSE 80
COPY --from=builder /app/build /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

frontend/nginx.conf

server {
  listen 80;
  server_name _; # 도메인을 구매했다면 여기에 추가

  location / { # nginx로 요청이 들어왔을 때
        root /usr/share/nginx/html;
        index index.html
        try_files $uri /index.html;
  }
}

backend/Dockerfile

# 프로젝트 버전에 따라 맞는 이미지를 사용해 빌드
FROM python:3.10.8

# .pyc 파일을 생성하지 않도록 설정합니다.
ENV PYTHONDONTWRITEBYTECODE 1

# 파이썬 로그가 버퍼링 없이 즉각적으로 출력하도록 설정합니다.
ENV PYTHONUNBUFFERED 1

# /app/ 디렉토리를 생성합니다.
RUN mkdir /app/

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

# opencv 설치에러 방지
RUN apt-get update
RUN apt-get -y install libgl1-mesa-glx

# requirments.txt를 작업 디렉토리(/app/) 경로로 복사합니다.
COPY ./django/requirements.txt .

# 프로젝트 실행에 필요한 패키지들을 설치합니다.
RUN pip install --no-cache-dir -r requirements.txt

# gunicorn을 사용하기 위한 패키지를 설치합니다.
RUN pip install gunicorn psycopg2
# psycopg2: python에서 postgresql 연결할 때 쓰이는 패키지

docker-compose.yml

version: '3.8'

volumes:
  postgres: {}
  django_media: {}
  django_static: {}

services:
  postgres:
    container_name: postgres
    image: postgres:14.5
    volumes:
      - postgres:/var/lib/postgresql/data/
    environment:
      - POSTGRES_USER=user
      - POSTGRES_PASSWORD=P@ssw0rd
      - POSTGRES_DB=django
    restart: always

  backend:
    container_name: backend
    build: ./backend/
    entrypoint: sh -c "python manage.py collectstatic --no-input && python manage.py makemigrations && python manage.py migrate && gunicorn teulang.wsgi --workers=5 -b 0.0.0.0:8000"
    ports:
      - "8000:8000"
    volumes:
      - ./backend/django/:/app/
      - /etc/localtime:/etc/localtime:ro
      - django_media:/app/media/ # nginx에서 media를 사용할 수 있도록 volume을 지정해줍니다.
      - django_static:/app/static/ # nginx에서 static을 사용할 수 있도록 volume을 지정해줍니다.
    environment: # django에서 사용할 설정들을 지정해줍니다.
      - DEBUG=1
      - POSTGRES_DB=django
      - POSTGRES_USER=user
      - POSTGRES_PASSWORD=P@ssw0rd
      - POSTGRES_HOST=postgres
      - POSTGRES_PORT=5432
    depends_on:
      - postgres
    restart: always

  frontend:
    restart: always
    container_name: frontend
    build:
      context: ./frontend/
      dockerfile: Dockerfile
    ports:
      - "80:80"