[React] 애플리케이션 정적 파일로 배포하기 - Nginx

React는 내장 웹서버를 포함하고 있어서 개발단계에서 실행할 때는 별도의 웹서버를 사용하지않고 start, dev 또는 Vite와 같은 별도의 번들러 라이브러리를 사용한다면 vite, preview 등의 명령어로도 실행이 가능하다.

하지만 이러한 개발 서버는 프로덕션 환경에서의 높은 트래픽을 처리하기에 적합하지 않고 보안 및 안정성 측면에서 내장 개발 서버를 사용하는 것은 위험하다.

운영 환경에서 이러한 문제를 해결하기 위해 가장 많이 쓰는 것이 Nginx이다.

1. 애플리케이션 빌드

# yarn 사용할 경우
> yarn build

# npm 사용할 경우
> npm run build

우선 위 명령어를 사용해 build를 진행하고 정적 파일로 변환해준다. build 명령어가 실행하는 스크립트는 환경마다 달라서 package.json 파일에서 확인해야겠지만, 일반적으로 npm/yarn에서 명령어를 사용해 생성한 프로젝트라면 build 명령어가 기본적으로 포함되어 있을 것이다.

예를 들어 vite와 typescrip를 사용하는 프로젝트라면 아래와 같이 정의되어 있을 것이다.

{
	...
  	"script": { 
      	...
		"build": "tsc && vite build",
      	...
    }
	...
}

build가 완료되면 루트 경로에 dist 디렉토리가 생기고 안에 assets 디렉토리와 index.html 파일이 생성되었을 것이다.

2. dist 폴더 원하는 경로로 이동

# ubuntu 기준
> cp -r ./dist /home/ubuntu/app

3. nginx 설치

# ubuntu 기준
> sudo apt install nginx

++

default로 서버 실행시 자동 실행 되도록 설정 되어 있을 것이다.

만약 pm2로 프로세스를 관리하거나, 자동 실행을 끄고 싶다면 아래 명령어로 꺼주자.

> sudo systemctl disable nginx

4. nginx 환경 설정

/etc/nginx 디렉토리 하위에 sites-available 디렉토리에 defaults 파일이 있을것이다.

그리고 sites-enabled에 보면 defaults 파일이 심볼릭 링크로 따져있을 것이다.

둘 다 지워주고 vi 명령어로 프로젝트명.conf 파일을 생성한다. (defaults에 작성해도 상관없으니 편한대로 해도 된다)

# /etc/nginx/sites-available/practice.conf

server {
    listen 원하는_포트_입력;
    server_name 도메인_입력;

    root dist_디렉토리_경로;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

wq 명령어로 나와준다.

# 심볼릭 링크 생성
> sudo ln -s /etc/nginx/sites-available/practice.conf /etc/nginx/sites-enabled/

# nginx 재실행
> sudo systemctl restart nginx

이제 해당 주소로 접속해보면 실행이 될 것이다.

++

500 에러가 뜨는 경우도 있는데 이 경우는 dist파일이 속한 경로가 권한이 열려있지 않아서일 수 있다.

AWS EC2의 경우 /home/ubuntu경로 하위에 dist 폴더를 올렸다면 아래의 명령어로 실행 권한을 주자

> sudo chmod +x /home/ubuntu