Nginx를 활용한 간단한 배포(OS: Linux)

 

※ 리눅스 상에서 하는 nginx 사용법입니다.
※ 프론트엔드 / 백엔드: React / Fastapi
※ 도메인 설정은 따로 하셔야됩니다.

Nginx 활용한 배포

기본 환경 확인

sudo apt-get update를 통해 apt 업데이트 확인
자신이 사용할 환경을 설치합니다.(nodejs, python 등)

저는 react와 fastapi를 사용했던 경험을 활용하기 때문에 밑과 같이 확인!
nodejs -v
python3 --version
확인 끝

Nginx 설치

sudo apt-get install -y nginx
-y 명령어는 설치하겠냐는 Q를 없애줍니다.
nginx -v
nginx 버전도 확인하세용

프론트엔드 빌드

로컬에서 프로젝트가 이미 있으면 상관없고 git에 지금 올려놨으면 git에서 불러옵시다.
불러와서 react는 npm i와 npm start를 통해 잘 연결되는지 확인.
yarn을 쓰시면 npm대신 yarn 쓰시면 됩니다.
npm run build를 하면 build 폴더가 생성됩니다.

Nginx 프론트엔드 설정

sudo vim /etc/nginx/sites-enabled/default
명령어를 치시면 nginx의 config를 설정할 수 있습니다.
우리가 들어갈 root를 바꿔줘야겠죠?
root를 빌드한 폴더로 바꿔줍니다. 저같은 경우엔

root /var/www/html; -> root /home/taewan/gitfolder/frontend/build;

폴더 경로를 찾아서 바꿔주시면 됩니다.

Nginx의 문법 검사를 해주시고
sudo nginx -t
설정을 바꿨으니 리부팅해줍시다.
sudo service nginx restart

이러면 미리 설정한 도메인이나 IP주소로 포트번호 없이 들어가집니다.

백엔드 빌드

이제 백엔드를 빌드해볼까요
윈도우와 다르게 여기 파이썬은 기본 pip에 3이라는 숫자가 붙습니다.
옛 파이썬2 버전이 pip로만 쓰는 것 같아요. 그러니까 pip3로 gogo!
필요한 라이브러리 설치해 주시고!
pip3 install -r requirements.txt
잘 실행되는지 확인
python3 main.py

Nginx 백엔드 설정

다시 config로 들어갑니다.

sudo vim /etc/nginx/sites-enabled/default

밑의 코드를 추가합니다. 주의!! 포트 로컬호스트의 포트는 각자 맞게 설정하세요!

    location / { 
          try_files $uri $uri/ =404; 
    } 

      ### backend 설정 추가 ### 
    location /api { 
        proxy_pass http://localhost:8000; 
        proxy_http_version 1.1; 
        proxy_set_header Connection ""; 

        proxy_set_header Host $host; 
        proxy_set_header X-Real-IP $remote_addr; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
        proxy_set_header X-Forwarded-Proto $scheme; 
        proxy_set_header X-Forwarded-Host $host; 
        proxy_set_header X-Forwarded-Port $server_port; 
    } 
    ### 여기까지 ### 
  ... 
} 

설정완료 했으면 프론트엔드와 같이 한번 볼까요?

Nginx의 문법 검사를 해주시고
sudo nginx -t
설정을 바꿨으니 리부팅해줍시다.
sudo service nginx restart

자 이제 내가 실행시킬 파일을 리눅스 상에서 백으로 실행시켜 주시면 배포가 완료됩니다.

nohup uvicorn main:app --host 0.0.0.0 --port 8000 &
nohup python3 main.py &(코드안에서 uvicorn을 설정해놓으면 때문에 이렇게도 가능!)

 

음.. 마크다운으로 한번 글을 작성했는데

티스토리 마크다운이라 그런가 타이포라랑 좀 차이가 나네요.

다음엔 그냥 글을 써야겠습니다. ㅎㅎㅎ

다음번엔 도커에 대한 글과 젠킨스에 대한 글을 정리해보겠습니다.

(그 후.. FastAPI에 대해 정리해 봐야겟다..^^)