원격 서버에 리액트 프로젝트 정적 배포한 과정

어떤 상황이였나?

현재 제가 진행하고 있는 프로젝트는 서울에 실 서버를 설치해서 ssh 로 원격접속을 할 수 있게끔 설정을 해놓은 상태입니다.

이제 프런트에서 만든 프로젝트를 빌드하여 정적배포를 하려고 합니다. 저희 서버의 도메인으로 접속을 할 수 있게끔말입니다.

그 과정을 기록해둡니다. 저와 비슷한 처지에 놓으신 분들을 위해, 까먹을 미래의 저를 위해서 말이죠.

 

우선 서버에 원격 접속을 당연하게 했습니다.

프로젝트의 메인 서버는 Fast API로 구축되어있는 상태입니다. 프로젝트의 리더님께서 정적 배포를 위해 다음 파일을 사용하라고 언급을 해주신 상태였습니다.

 

main.py

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles


app = FastAPI()
app.mount("/", StaticFiles(directory="static/build", html=True), name="static")

 

정적 배포를 하기 위해서는 다음 한줄이 추가되어야했습니다.

app.mount("/", StaticFiles(directory="static/build", html=True), name="static")

 

즉 폴더 구조는 다음과 같이 되어야합니다. 리액트 프로젝트를 빌드한 파일이 static 폴더내부에 위치해야합니다.

+-- Documents/
|   +-- main.py
|   +-- staic
|   |   +-- build
|   |
+-- ...

 

이제 리액트 프로젝트를 빌드해줍니다. scripts 에서 바로 위 경로의 static 폴더로 build 폴더가 이동되게끔 해주었습니다.

  "scripts": {
    ...
    "build": "react-scripts build && mv ./build ~/Documents/static",
    ...
  },

 

이제 다음 명령어로 가상환경을 만들어줍니다.

fastapi_test 라는 이름의 가상환경을 만든 것입니다.

conda activate fastapi_test

 

이제 웹서버를 실행시켜야합니다. 이때 아까 위에서 언급드린 main.py를 실행시켜야하는데요. 다음 명령어로 경로를 알 수 있습니다.

(fastapi_test) -----@------:~$ whereis uvicorn
uvicorn: /home/documentvoip/anaconda3/envs/fastapi_test/bin/uvicorn

 

이제 알게된 경로에서 main.py 파일을 실행시킵니다.

sudo /home/documentvoip/anaconda3/envs/fastapi_test/bin/uvicorn test_main:app --reload --host=0.0.0.0 --port=8000

 

하지만 하나의 문제점이 있었습니다.

도메인으로 접속을 시도했지만 아무런 화면이 뜨질 않았습니다. 그 이유는 무엇이었을까요?

 

바로 리액트 프로젝트의 baseUrl 이 잘못 설정되어있었습니다. 기존에는 gitlab 테스트 배포를 하였기때문에 다음 주소로 요청을 보내고 있었는데요. 해당 주소로 요청을 보내니 html, css, js 파일을 받을 수 없으니 아무것도 화면에 보이지 않는 것이였습니다. 따라서 아래의 주소를 저희 서버의 도메인 주소로 변경해주었습니다.

 

다음과 같이 말이죠.

 

이제 짜잔!

정적배포가 성공한 모습입니다.

 

추가적으로..

현재 FastAPI 서버 파일을 실행을 계속 시켜주어야 도메인으로 접속을 계속할 수 있는 상태인데요.

해당 명령어를 통해 daemon 으로 실행하면 서버가 계속 켜져있게끔 할 수 있었습니다.

gunicorn -k uvicorn.workers.UvicornWorker

gunicorn -k uvicorn.workers.UvicornWorker test_main:app --bind 0.0.0.0:8000 --daemon

 

만약 중단하고 싶다면 프로세스를 kill 해주어야합니다. 불필요한 프로세스를 실행시킬 필요는 없으니까 말이죠,.

ps -ef | grep uvicorn

kill -9

 

원격 서버에 리액트 프로젝트 정적 배포한 과정 이었습니다. 글 읽어주셔서 감사합니다.