Naver Cloud Plaform + Nginx + React 프론트 배포하기

비사이드 프로젝트를 진행하면서 10일 동안 프론트 개발부터 배포까지 전반을 맡았다.

그중에서도 가장 걱정 됐던 부분이 배포였는데, 그 이유는 예전부터 배포는 어려운 것이라는 이미지가 강했고, 비사이드는 네이버 클라우드 플랫폼을 활용하여 배포하기 때문에,자료가 비교적 적을것이라고 생각했기 때문이다.

하지만, 백엔드 개발자 팀원이 미리 서버를 구성한 상태에서 프론트배포만 하는 것은 생각보다 간편했고, 무엇보다 NCP의 이용자 가이드로 손쉽게 배포할 수 있었다.

Putty를 활용하여 서버(linux) 컴퓨터에 접속하기

우선, NCP에서 컴퓨터를 빌렸고 환경을 구성했다면 내 컴퓨터에서 빌린 컴퓨터를 조작할 수 있어야한다. 그것을 도와주는 프로그램은 여러개가 있겠지만, 나는 PuTTY를 이용했다.

Node 설치하기

원격으로 컴퓨터에 접속을 했다면, 그 컴퓨터에서 나의 프론트프로젝트(React)를 실행(빌드) 시킬 준비를 해야한다. 그 첫번째로 나의 프로젝트의 맞는 Node버전을 설치하는 것이다. 사실 Linux를 잘 다루는 사람은 여기서 부터 문제가 없겠지만, 나는 linux를 잘 다루지 못했기 때문에 다른 사람들의 글을 찾으며 설치하였다.

그중 https://travel-log.tistory.com/33 이 블로그의 글이 가장 정리가 잘 돼 있었으며, 그대로 따라 했을 때 문제없이 잘 설치할 수 있었다.

주의할 점은 Node v18부터 centOS 7 및 몇몇 다른 linux 배포판과 호환이 안될 수 도 있다는 것이다. 나 역시 처음에는 LTS 버전인 Node v18.~을 설치했다가 안 되는 것을 깨닫고, node를 삭제하고 17 버전으로 새로 설치하였다.

내 프로젝트 클론 및 빌드하기

node까지 설치가 됐다면, 내 프로젝트를 가져와서 빌드 파일을 만들면 된다. NCP는 기본적으로 git이 설치돼 있었기 때문에 별도의 설치없이 프로젝트를 클론 받으면 된다. 이때, git password는 git 비밀번호가 아닌 access token으로 인증을 해야 하는 것만 주의한다면 어려운 점은 없었다.

클론까지 됐다면, npm install, npm run build를 통해 빌드 파일을 만들면 된다.

Nginx 설치 및 배포

이제 거의 모든 준비가 됐다. Nginx를 활용하여 내가 만든 웹사이트를 배포만 하면 된다. 그리고 이 부분은 NCP에 매우 정리가 잘 돼 있어서, 관련 문서나 글을 안찾아보고 NCP 가이드를 따라 설치하면 된다.

https://www.ncloud.com/guideCenter/guide/36

NCP 클라우드 가이드를 통해 쉽게 nginx를 설치했다면, 이제 nginx에게 내 빌드 파일이 어디있는지 알려주면 된다.

vi /etc/nginx/conf.d/default.conf

위 명령어를 통해 default.conf의 들어가서 location에서 나의 빌드된 리액트 파일로 경로를 잡아주었다.

나의 경우는 빌드된 파일이 /app/front/build에 있었기 때문에 이렇게 작성해 주었다.

server {
  listen 80;
  location / {
    root    /app/front/build;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}

마지막 줄에 try_files $uri $uri/ /index.html 이 명령어 같은 경우에는 어떤 파일을 찾을 때 명시된 순서로 찾으며, 먼저 발견되는 파일을 사용한다는 의미이다.

사실 이렇게 말해서는 왜 필요한지 이해를 못했고, 처음에는 사용하지 않았다. 하지만, react-router를 이용한다면 바로 이해할 수 있을 것이다. 배포 후에 테스트를 하며 router를 이동한 채로 새로고침했을 때, 바로 404 에러가 발생했기 때문이다.

그 이유는 당연하게도 SPA인 REACT는 하나의 index.html만 존재하기 때문에 라우터를 이동한 채로 index.html을 요청하면, 해당위치의 index.html을 찾지 못한다. 이러한 문제를 막기 위해 try_files 설정을 이용하여, 정확하게 일치하는 index.html이 아닌 가장 먼저 발견되는 index.html을 제공한다.

이과정까지 하고 nginx를 새로 시작한다면 배포된 프로젝트를 볼 수 있다.

어찌 보면 비사이드 포텐데이의 10일간의 프로젝트를 진행하며 가장 걱정했던 부분인데 NCP의 공식문서를 활용하여 쉽게 배포할 수 있었던 것 같다. 10일간 개발과정에서 개발도 다 못했는데, 배포도 어렵게 했다면 정말 끔찍했을 것이다.