개요

코드도 다 완성되었다. 이제 배포를 해야한다. 우선 ec2로 올리고 잘 작동하는지도 봐야된다. react와 docker라서 nginx를 사용했고, djangosms gunicorn을 사용했다.
이제 일단 이미지 빌드도 성공했다. 제발ㅠㅠ 나도 배포 제발ㅠㅠ

진행

현재 나의 폴더 구조는 아래와 같다.

/TAROTMILKTEA/
├── backend/
│  └── tarotMilkTea/
│    └── tarotback/
│      ├── accounts/
│      └── backserver/
│        └── settings.py
│        └── wsgi.py
│      ├── tarotcard/
│      ├── Dockerfile
│      ├── entrypoint.sh
│      ├── manage.py
│      ├── requirements.txt
│      └── .env
├── frontend/
│  └── tarotmilktea/
│    ├── public/
│    ├── src/
│    ├── Dockerfile
│    ├── package-lock.json
│    ├── package.json
│    └── .env
├── nginx/
│  ├── Dockerfile
│  └── nginx.conf
└── docker-compose.yml

여러 시행착오를 거치고 우리의 구글 잼민이[gemini 구)바드 현)제미나이]와 함께해서 어찌저찌 해결할 수 있었다.

docker와 nginx도 따로 더 공부해야만하겠다 흑흑흑

backend

django에서는 python버전을 3.12.3를 사용했다.
난 이미 gunicorn을 requirements.txt에 포함시켜놨다.

./backend/tarotMilkTea/tarotback/Dockerfile

FROM python:3.12.3

WORKDIR /code

# set environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1

COPY . .

RUN pip install -r requirements.txt

COPY .env .env

CMD ["./entrypoint.sh"]

./backend/tarotMilkTea/tarotback/entrypoint.sh

#!/bin/bash


# Run gunicorn
gunicorn backserver.wsgi:application --bind 0.0.0.0:8000

frontend

react에서는 node버전을 20.12.2를 사용했다.

./frontend/Dockerfile

FROM node:20.12.2

WORKDIR /app

COPY . .

RUN npm install

RUN npm run build

COPY public .

EXPOSE 3000

CMD ["npm", "start"]	# 이건 아직 확실한 배포가 아니라서 사용 중

nginx

./nginx/Dockerfile

FROM nginx

COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

./nginx/nginx.conf

events {
    worker_connections 1024;
}

http {

    # 백엔드 upstream 설정
    upstream backend {
        server backend:8000;
    }

	# 프론트엔드 upstream 설정
    upstream frontend {
        server frontend:3000;
    }

    server {
        listen 80;
        # server_name 도메인이름 또는 ip주소; # 도메인 이름 입력

        location / {
            proxy_pass http://frontend;
            root /app/public;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }


        # 와일드카드 경로 매칭을 사용
        location ~ ^/api/(.*)$ {
            proxy_pass http://backend/$1;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $host;
            proxy_redirect off;
        }

    }
}

docker-compose.yml

./docker-compose.yml

services:
  backend:
    build: ./backend/tarotMilkTea/tarotback
    ports:
      - "8000:8000"
      
  frontend:
    build: ./frontend/tarotmilktea
    ports:
      - "3000:3000"
    depends_on:
      - backend
  nginx:
    build: ./nginx
    ports:
      - "80:80"
    depends_on:
      - backend
      - frontend

점검

현재 여러 과정을 거쳐서 이렇게 하니 도커 이미지 빌드가 되었고, 내 컴퓨터에서 도커 이미지도 실행이 되었다.

이미지를 제대로 빌드하고 실행하는데 많은 문제가 있었고, 또 실행과정에서도 문제가 있었다.

특히 가장 마지막에 수정한 것은
.nginx/nginx.conf 파일인데

location ~ /api/{
            proxy_pass http://backend/$1;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $host;
            proxy_redirect off;
        }

이렇게 되어있던 것을 아무리 무슨 짓을 해도 백엔드요청을 할때,

127.0.0.1:8000/백엔드요청1/백엔드요청2

이런식으로 :8000을 붙여야만 해야되는 것이었다.

127.0.0.1/api/백엔드요청1/백엔드요청2

/api/이런식으로 하면

2024-06-20 18:03:06 172.29.0.1 - - [20/Jun/2024:09:03:06 +0000] "GET /api/백엔드요청1/백엔드요청2 HTTP/1.1" 404 179 "-" "PostmanRuntime/7.39.0"

이런식으로 nginx에서 404 log를 발생시켰다.

하지만 "/api/" 에서 "~ ^/api/(.*)$" 로 변경하니 작동이 되는 것을 확인할 수 있었다.

보완해야할 것.

이제 .env에 대해서 확인을 해야한다. 왜냐하면 github로 올릴때는 .env가 없는데, 이 .env가 없음에도 ec2에서 작동할 수 있도록 해야하기 때문이다.

이것도 해결하면 진짜 배포할 수 있겟지 흑흑 3기로 다시 찾아와야지.