배포) Django + React + Gunicorn + Nginx + EC2 배포하기

 Django로 백앤드, React로 프론트를 구성하여 웹을 만든 후, 배포 방법을 찾아보는데

생각보다 자료가 많이 없음을 느꼈다.

아마 대부분 Django + Django HTML 혹은 Node.js + React로 구성하기 때문이라고 추측된다.

때문에 많은 블로그들과 stackoverflow를 탐험하며 배포시도를 했고, 그 결과를 여기 정리하려 한다.

 

1. 리액트 앱 빌드하여 Django에 넣기

첫번째로 할 일은 리액트 프로젝트에서 npm run build를 실행하여 빌드 폴더를 만드는 것이다.

그 후 Django 프로젝트 디렉토리 안에 client 폴더를 만들어 build 폴더 안에 있는 파일들을 모두 넣어준다.

이런 구조를 형성하게 된다.

2. html 파일 수정

build를 통해 만들어진 index.html 파일을 들어가면 파일 경로를 지정해놓은 부분이 있을 텐데 모두 앞에 .을 붙여주도록 한다. 

ex) /static/....   -> ./static/....

이걸 안하면 참조를 하지 못한다

 

3. template, static 경로 설정, debug =False

그 후 settings.py 에 들어가 template, static 경로 설정을 해준다.

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['client'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

STATIC_URL = '/static/'
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
ROOT_DIR = os.path.dirname(BASE_DIR)

STATICFILES_DIRS = [
        # 실제 static 파일은 모두 client 측에서 소유
        os.path.join(ROOT_DIR, 'client/static')
    ]

Debug 또한 False로 바꿔준다.

 

4. aws 인스턴스 생성

이부분은 아래 포스트를 참고하자

https://velog.io/@misun9283/AWS-EC2-%EB%B0%B0%ED%8F%AC-%EA%B3%BC%EC%A0%95

AWS EC2 인스턴스 생성

 

 

5. ubuntu를 이용하여 배포

 

 

0. 깃 클론

git clone <repository 주소> 를 입력하면 우분투에 프로젝트 디렉토리가 생기고,

git pull을 하면 내용을 업데이트 할 수 있다.

1. apt 업데이트

sudo apt update
sudo apt upgrade

2. 파이썬 설치

sudo add-apt-repository ppa:deadsnakes/ppa
Enter
sudo apt install python3.8

3. Pip3

다음으로 pip를 설치해주자.
sudo apt install python3-pip
pip3 install --upgrade pip

4. Virtualenv

다음으로 프로젝트에서 사용된 패키들을 사용하기 위해 virtualenv를 설치하자.
sudo apt install virtualenv
프로젝트 디렉토리에 들어가서 가상환경을 만들어주자.
virtualenv -p python3.8 venv
패키지 설치!
pip3 install -r requirements.txt

이러면 기본 세팅은 끝났다. 이제 gunicorn으로 넘어가자!
아 혹시 세팅을 하면서 `No moule named 'apt_pkg'라는 에러가 뜨면 다음과 같이 해주자.

cd /usr/lib/python3/dist-packages
sudo cp apt_pkg.cpython-36m-x86_64-linux-gnu.so apt_pkg.so

 

requirements가 없을 경우 로컬cmd에서 pip freeze > requirements.txt를 실행하여

requirements.txt를 만들고 프로젝트 디렉토리에 넣어 올리자

gunicorn

1. 설치

pip3 install gunicorn

2. 잘 작동되는지 확인

gunicorn을 잘 설치했으니 장고를 잘 불러오는지 확인해보자.
manage.py 파일이 있는 경로에서 다음과 같이 입력하자.

gunicorn --bind 0:8000 config.wsgi:application

4. gunicorn service

다음 경로에 gunicorn.service 파일을 vi 에디터를 통해 만들어주자.
cd /etc/systemd/system
sudo vi gunicorn.service

[Unit]

Description=gunicorn daemon

After=network.target

[Service]

User=ubuntu

Group=www-data

WorkingDirectory=/home/ubuntu/web-coin-crawler/webcoincrawler

ExecStart=/home/ubuntu/web-coin-crawler/venv/bin/gunicorn --workers 3 --bind unix:/home/ubuntu/[project_directory]/run/gunicorn.sock config.wsgi:application

[Install] WantedBy=multi-user.target

 

이 부분을 복사붙여넣기하면 에러가 나올수 있다. 메모장같은 곳에 옮겼다가 붙여넣기해야한다.

exec 부분을 보면 프로젝트 디렉토리/run에서 gunicorn sock을 실행하므로 run 폴더를 만들어주어야 한다.

mkdir run으로 만들어주도록 하자.

config가 없다는 에러가 뜰 경우 본인의 wsgi 파일이 있는 디렉토리의 이름을 넣어주면 된다.

(settings.py 가 있는 디렉토리)

5. gunicorn service 등록

sudo systemctl start gunicorn
sudo systemctl enable gunicorn

혹시 뭔가 틀려서 gunicorn을 다시 시작해야된다면 다음과 같이 입력하자.

sudo systemctl daemon-reload
sudo systemctl restart gunicorn

Nginx

1. 설치

sudo apt install nginx

2. 설정 추가

먼저 다음 경로에 있는 default 파일을 삭제해주자.

sudo rm -f /etc/nginx/sites-enabled/default
sudo rm -f /etc/nginx/sites-available/default

다음 경로에 파일을 추가하고 vi 에디터를 활용해 내용을 입력하자.

server {

  listen 80;

  server_name <public ip>;

  charset utf-8;

location / {

  include proxy_params;

  proxy_pass http://unix:/home/ubuntu/<project_name>/run/gunicorn.sock;

  proxy_read_timeout 300s;

  proxy_connect_timeout 75s;

}

location /static/ {

  alias <본인의 static 디렉토리 경로>;

ex) alias /home/ubuntu/web-coin-crawler/back/server/client/static/;

}

location /media/ {

  alias /home/ubuntu/<project_name)/media;

} }

다음과 같이 입력하여 문제가 있는지 확인해보자.
sudo nginx -t

3. 시작!

sudo systemctl daemon-reload
sudo systemctl restart nginx

Django

이제 다음 명령어를 실행하여 웹사이트가 실행되는지 확인해보자

sudo systemctl daemon-reload
sudo systemctl restart nginx
sudo systemctl restart gunicorn

gunicorn --bind 0:8000 config.wsgi:application --daemon

분명 따라하는 과정속에서 에러를 많이 만나겠지만 차근차근 하나씩 해결하다보면 배포에 성공할 수 있을 것이다!!!