Linux 우분투 서버에서 gunicorn, 관리자 및 nginx와 함께 python django 및 reactJS 편안한 앱을 배포합니다.

작업은 API를 사용하여 서로 통신하는 2개의 개별 서비스가 있는 분리된 애플리케이션을 배포하는 것입니다. 널리 사용되는 Javascript 라이브러리인 ReactJS로 작성된 프런트엔드 앱과 Django restframework 라이브러리를 사용하여 Python으로 작성된 데이터베이스를 처리하는 백엔드 앱입니다. 2개의 앱도 github 서버 저장소에서 호스팅됩니다.
React 앱은 POST, GET, PUT, PATCH, DELETE 등과 같은 REST HTTP 메서드를 통해 Django/서버와 통신합니다.

1단계: 서버에서 앱 준비

Git은 Ubuntu 서버에서 django 앱을 복제합니다. $ git clone https://github.com/<your username>/<your git repo>

Git은 reactJS 앱도 복제합니다.
모든 파일과 함께 서버에 2개의 폴더가 나열되어 있어야 합니다.

2단계: reactJS 프런트엔드를 수동으로 컴파일하고 준비합니다.

$ cd를 입력하여 reactJS 프런트엔드 폴더에 넣습니다. cd <frontend folder name>

$ yarn install 또는 $ npm install 앱에 종속성 및 패키지를 추가합니다. yarn 또는 node가 우분투 서버에 설치되어 있지 않으면 먼저 이 라이브러리를 설치해야 합니다.

$ yarn run build 최종 정적 및 번들 파일을 트랜스파일합니다.

이제 프런트엔드 앱에 정적 및 번들 파일이 있는 build 폴더가 포함됩니다.

3단계: Django 앱 준비 및 준비

python3 m venv <virtual env name>를 실행하여 django 앱에 대한 새 가상 환경을 만듭니다.

다음을 실행하여 가상 환경을 활성화합니다. source <virtual env name>/bin/activate

다음을 실행하여 django 앱의 모든 종속성을 설치합니다. pip install -r requirements.txt

다음을 실행하여 아직 설치되지 않은 경우 Gunicorn을 설치합니다. pip install gunicorn

4단계: django 앱을 실행하기 위한 Gunicorn 셸 스크립트 생성

루트 사용자로 로그인하여 사용자를 루트로 변경합니다.

가급적 django 앱과 동일한 폴더에 gunicorn 셸 스크립트를 만듭니다. gunicorn.sh.

이 gunicorn 스크립트의 예제 초안 템플릿은 다음과 같아야 합니다.

#!/bin/bash
NAME="<service name>" #name of the service to be run by supervisor
DJANGODIR=<path/to/django app>
USER=<user e.g. root> #you can see your user name by running command whoami
GROUP=<usergroup e.g. root>
NUM_WORKERS=<number of workers e.g. 2>
TIMEOUT=<e.g 500>
DJANGO_SETTINGS_MODULE=<app.settings<the django settings file>>
DJANGO_WSGI_MODULE=<app.wsgi< the wsgi file>>
PORT=<8500>
LOCAL_IP=<127.0.0.1>

echo "Starting $NAME as `whoami`"

cd $DJANGODIR
source <path/to/virtualenv/bin/activate> #run the virtual environment
export DJANGO_SETTINGS_MODULE=$DJANGO_SETTINGS_MODULE #set the global variable to the settings file
export PYTHONPATH=$DJANGODIR:$PYTHONPATH #set your django app directory as python path

exec <path/to/virtualenv/bin/gunicorn ${DJANGO_WSGI_MODULE} >
--name $NAME \
--workers $NUM_WORKERS \
--timeout $TIMEOUT \
--user=$USER --group=$GROUP \
--pythonpath=<path/to/virtualenv/bin \
--log-level=debug \
--bind=$LOCAL_IP:PORT \
--logo-file=-

./gunicorn.sh

를 실행하여 gunicorn 셸 스크립트를 실행합니다.

5단계: 감독자 구성

이 시나리오의 감독자는 django 서비스 실행을 담당합니다. 계속하기 전에 supervisor 라이브러리/패키지가 Ubuntu VPS에 올바르게 설치되었는지 확인하십시오.

$ sudo supervisorctl status를 실행하여 현재 서비스 목록을 확인합니다.
사용 가능한 서비스 이름 목록이 표시됩니다.

gunicorn.sh로 이동하여 위의 $ cd /etc/supervisor/conf.d 스크립트에 설정된 대로 새 서비스를 추가합니다. 그런 다음 서비스 conf 파일을 만듭니다(예: sudo nano <name.conf>).

감독자 목록을 업데이트합니다. 실행supervisorctl reread . 이 명령을 사용하면 구성 변경 사항을 사용할 수 있습니다.

6단계: Nginx를 추가하여 애플리케이션 제공

Nginx는 기본 포트 80에서 두 응용 프로그램을 모두 제공합니다. nginx 라이브러리 또는 패키지가 Ubuntu 시스템에 설치되어 있는지 확인하십시오.

다음과 같이 nginx 폴더로 이동합니다. $ cd /etc/nginx/sites-available 응용 프로그램 구성을 위한 새 conf 파일을 만듭니다.

conf 파일을 <sudo nano name.conf>로 생성합니다.

아래와 같이 서버 블록을 추가합니다.

server {

        server_name <name/your preferred domain name>;

        proxy_read_timeout 300;
        proxy_connect_timeout 300;
        proxy_send_timeout 300;


        location / {
            root /path/to/react/frontend/build;
        }
        location /api/v1 {
            proxy_pass http://<localhost>:<port name configured in gunicorn shell script >;
        }
}

위의 서버 블록에는 2개의 위치 지시어가 포함되어 있습니다.

루트 폴더 지시문은 index.html 파일을 포함하는 reactjs 빌드 폴더를 제공합니다.

위치 지시문<server name/ap1/v1>은 프록시 패스 주소를 사용하여 django rest 서버에 서비스를 제공합니다.

행복한 코딩!