무중단 배포 적용기 (1) - 프론트엔드 (React)

나는 처음에 아무생각없이

프론트엔드 실행 스크립트를 다음과 같이 작성했었다.

### 프로젝트 코드 최신화
cd $public_repo_path
echo $password | sudo -S git pull origin main

# 기존의 yarn start 프로세스 죽이기
FRONTEND_PID=$(ps -ef | grep "yarn start" | awk '{print $2}')

for pid in $FRONTEND_PID
do
    kill -15 $pid
done

### yarn start 재실행
cd $public_repo_path
cd frontend/rush
echo $password | sudo -S nohup yarn install
echo $password | sudo -S nohup yarn start &

이렇게 하면 문제가 있다. 그것은 바로
kill 한 다음 다시 yarn start 하는 사이에 웹 사이트 접속이 안된다는 것! (중단 배포...)

이 문제를 해결해보았다.

---

1. yarn build 사용

위의 쉘 스크립트를 보면 kill & yarn start를 썼는데...
이렇게 할게 아니라 yarn build를 써야한다.

 

yarn build를 하면
프로젝트 디렉토리 내부의 build 라는 디렉토리에

빌드 결과물인 정적 파일들이 생성된다.

 

이 디렉토리를 가지고
Nginx가 정적 웹 서버 역할을 하게 할 것이다.

 

2. 정적 파일을 내려주는 웹 서버로 Nginx 사용

이전까지 나는 Nginx를 reverse proxy로만 사용했다.

 

이제는
yarn build로 만들어둔 정적파일들을 가지고
Nginx가 브라우저에게 html/css/javascript 등을 내려주게 할 것이다.

 

nginx 설정파일을 수정해보자.

 

▶ Before

server {
  ...
  set $frontend_url 'http://127.0.0.1:3000';

  location / {
    proxy_pass $frontend_url;
  }
  ...
}

▶ After

server {
  ...
  location / {
    root   /home/pi/RUSH-C/frontend/rush/build;
    index  index.html index.htm;
    try_files $uri /index.html;
  }
  ...
}

 

index 란?

직관적으로 알 수 있다시피 / 경로에 매치시킬 정적파일을 말하는 것이다.

프로젝트 내부의 build 폴더에 가보면 index.html 파일이 있다. 이게 index 역할을 할거라는 뜻이다.

 

try_files 란?

(출처 : 참고링크 2번 - React를 Nginx 웹 서버에 배포하기)

nginx를 잘 써보지 않아 이번에 찾아 봤는데, react 프로젝트의 경우 페이지 라우팅을 react-router가 보통 하게 될것이다.
즉 index.html 자체에서 페이지 라우팅을 하는 것이다.

try_files 설정은 일종의 nginx 자체의 라우팅 설정이다. 보통 이 부분에서 특정 패턴의 url에 특정 파일등을 redirct 하는 설정을 한다. 만약 페이지를 못 찾을 경우 404 not found 설정등도 이곳에서 한다.

하지만 react 프로젝트인 경우, 웹서버에서 먼저 리퀘스트 url 을 가로채면 react-router의 기능을 사용할수 없게 된다.
(vue등도 마찬가지일 것이다.)
따라서 위처럼 모든 request를 index.html로 곧장 가게 설정해 줘야 한다.

 

---

참고

1

서울과기대 17학번 진영이언니 머릿속 (언니 고마워 ♥)

2

React를 Nginx 웹 서버에 배포하기

https://www.hanumoka.net/2019/12/29/react-20191229-react-nginx-deploy/