현재 프로젝트의 구조는 이렇게 되어있다.

자 이런식으로 어떻게 배포했는지 과정을 알아보자.

라이브러리 설치

먼저 VM에 처음 들어가면 라이브러리가 존재하지 않으니 라이브러리부터 설치하자.

sudo apt update
sudo apt install npm -y
sudo apt install python3-pip python3-dev build-essential libssl-dev libffi-dev python3-setuptools -y
sudo apt install nginx -y

React파일 build하기

배포하는 때에는 성능이 중요시된다. 그래서 build를 통해 용량을 줄인 버전으로 배포를 진행한다.
먼저 React폴더로 들어간다.

npm install

현재 package.json에 있는 라이브러리를 설치한다.

npm run build

그렇게 하면 이제 build라는 폴더가 생성이 되었을 것이다. 이제 해당 build폴더의 위치를 기억하자.

Flask-Gunicorn 연동하기

flask서버를 구동하기 위한 필요한 라이브러리를 설치한다. requirements.txt가 존재한다고 가정하고 진행하겠다.
먼저 가상환경을 설치하자.

python3 -m venv .venv
source .venv/bin/activate

그런 다음 필요한 라이브러리를 설치한다.

pip3 install -r requirements.txt

그리고 gunicorn을 설치하자

pip3 install wheel // package에 wheel archive가 없어도 설치되게끔 하기 위해서라는데 일단 설치한다. 
pip3 install gunicorn

그런 다음에 app.py를 import한 wsgi.py파일을 만들어 준다.

from app import create_app

app = create_app()
if __name__ == "__main__":
    app.run()

그리고 제대로 gunicorn이 설치되었는지 확인해본다.

gunicorn wsgi:app

이제 service파일을 만들어주자.

sudo vi /etc/systemd/system/myproject.service

그런 다음 다음 내용을 적어둔다.

[Unit]
Description=Gunicorn instance to serve flaskr
After=network.target

[Service]
User=root
Group=root
WorkingDirectory={flask app.py가 저장되어있는 경로}
Environment="PATH={가상환경의 경로}/bin"
ExecStart={가상환경의 경로}/bin/gunicorn --workers 1 --timeout 120 --bind unix:myproject.sock wsgi:app

[Install]
WantedBy=multi-user.target

workers는 현재 vm의 cpu개수 * 2 + 1로 권장하고 있다.
timeout은 worker process로 요청이 들어온 뒤, timeout내에 응답을 못받을 경우 worker process를 종료한 후 다시 생성한다. 현재 로직이 시간이 걸리는 바람에 넉넉하게 잡아뒀다.

그리고 이제 gunicorn을 실행하자.

sudo service myproject start
sudo service myproject status

이랬을 때 active로 뜬다면 잘 작동된것이다. 이제 Nginx와 연동해보자.

Nginx에 설정하기

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

여기서 있던 파일들을 삭제한다.
그리고 sites-available에 있는 파일을 링크시켜 sites-enabled폴더에 넣는 식으로 진행한다.
먼저 sites-available폴더에 myproject라는 이름으로 새로 만들어주자.

sudo vi /etc/nginx/sites-available/myproject

그리고 다음과 같은 내용을 적어둔다.

server {
	listen 80;
    
	root {아까 적어둔 react build파일의 경로};
	server_name _;
	location / {
		try_files $uri $uri/ /index.html; // 새로고침했을경우 index.html을 띄우게 한다.
	}
    
	location /api {
		include proxy_params;
		proxy_pass http://unix:{flask app.py가 있는 경로}/myproject.sock;
	}

location /api 는 현재 client에서 /api를 붙인 주소로 요청을 보낼시에 proxy_pass로 저장되어있는 주소로 변경되어 보내준다는 뜻이다.

그 다음에 sites-enable폴더에 링크파일을 만들어주자.
sudo ln -s /etc/nginx/sites-available/myproject /etc/nginx/sites-enabled/myproject
이제 설정은 끝이났다. nginx를 테스트해보고 실행시키자.

sudo nginx -t
sudo service restart nginx

이제 모든 연동이 끝이났다. 처음 그림과 같은 배포 구조를 만든 것이다!

참고
https://velog.io/@jimin_lee/Nginx%EC%99%80-Gunicorn%EC%9C%BC%EB%A1%9C-Flask%EC%95%B1-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0