[React] Nginx를 사용해서 배포하기

React 프로젝트를 만들고 이제 배포를 하는 작업이 필요하다.

여러가지 방법이 있겠지만 역시 가장 만만한건 Nginx가 아닐까 생각된다. 

 

Naver Cloud에 Nginx를 사용해서 배포하는 작업을 진행할 것이다. 

 

환경 정보 

Server : Naver Cloud

os: 우분투 20

 

서버를 만드는 작업은 이전에 작성한 글이 있기 때문에 그것을 참고하길 바란다!

그리고 기본적으로 배포할 React 프로젝트가 있다는 것은 전제로 진행하겠다. 

필요 파일 설치

apt install npm

npm이 서버에 설치되어 있지 않을 것이기 때문에 설치해준다. 

 

apt install nginx

마찬가지로 nginx도 설치되어 있지 않기 때문에 설치해준다. 

패키지 가져오기 

뭐 별거 없다. 

깃허브에 저장되어 있는 Repo를 클론으로 받아왔다. 그 후 npm i 명령어를 통해서 필요 패키지를

다운받아 줬다. 

 

다운이 끝나면 build 명령어를 통해서 Nginx에 배포할 빌드 파일을 만들어준다.

Nginx 설정

이제 Nginx를 설치하면서 생성된 기본 설정을 지우고 새로 작성할 것이다. 

삭제하는 이유는 우리가 새롭게 만드는 설정과 겹칠 수 있기 때문이다. 

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

 

이제 새롭게 설정 파일을 작성한다. 

// cd /etc/nginx/sites-available/deploy.conf
server {
  listen 3000;
  location / {
    root /home/auto-deploy/build;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}

listen : 원하는 포트 번호를 설정한다. 

location / : URL이 ' / '이 포함된 경로를 설정한다는 뜻이다. 

root : 실행할 파일의 루트 위치를 나타낸다. 즉, 빌드 파일의 경로를 설정하면 된다. 

index : 인덱스 파일을 지정하는 것이다. 이것은 반드시 root 경로 안에 포함되어야 한다.  

try_files : 특정 파일을 찾을 때 명시된 순서대로 찾으며, 발견 시 해당 파일을 사용한다. 

 

설정이 끝났다면 

ln -s /etc/nginx/sites-available/myapp.conf /etc/nginx/sites-enabled/myapp.conf

원본 설정파일의 심볼릭 링크를 설정해준다. 

웹서버가 동작될 때 sites-enabled에 있는 설정파일을 참조한다. 

 

이제 끝이다. 

systemctl stop nginx
systemctl start nginx

서버를 재시작 후 url을 접속하면 배포된 사이트를 확인할 수 있다!