[React] Nginx 로 배포하기

1. Nginx 배포

1-1. React 프로젝트 빌드

react 프로젝트를 빌드합니다.

(react + vite + typescript) 구성입니다.

npm run build

 

1-2. Nginx 설치

wsl의 ubuntu로 접속합니다.

sudo apt update

 

Nginx 설치

sudo apt install nginx

 

설치 확인

// 버전 확인
nginx -v
// 실행 확인
sudo systemctl status nginx

 

1-3. 파일 복사

sudo mkdir -p /var/www/tsreact

 

폴더를 만들고 빌드 파일(dist)을 복사합니다.

sudo cp -r /mnt/c/Users/mkk/Desktop/tsreact/dist/* /var/www/tsreact/

 

1-4. Nginx 설정 파일 생성 또는 수정

server {
  listen 80;
  server_name localhost;

  root /var/www/tsreact;
  index index.html;

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

 

listen 80;	HTTP 요청을 수신할 포트입니다. 기본 포트 80으로 설정되어 있어, http://your-domain.com으로 접속 시 응답합니다.
server_name your-domain.com;	도메인을 지정하는 부분입니다. 도메인이 없으면 **서버의 공인 IP**를 넣어도 됩니다. 예: server_name 123.456.78.90;
root /var/www/myapp;	빌드된 정적 파일(index.html, assets/)이 위치한 디렉토리입니다. vite build 후 생성된 dist 폴더의 내용물을 여기에 복사합니다.
index index.html;	기본으로 로드할 파일입니다. 루트 디렉토리 접속 시 index.html을 불러옵니다.
location /	모든 요청을 처리할 URL 경로입니다.
try_files $uri /index.html;	요청된 파일($uri)이 없으면 index.html로 대체해서 반환합니다. React Router 같은 SPA에서는 이 설정이 필수입니다.

 

1-5. 심볼릭 링크 생성

sudo ln -s /etc/nginx/sites-available/tsreact /etc/nginx/sites-enabled/

 

1-6. 설정 확인

sudo nginx -t

successful

 

1-7. Nginx 재시작

sudo systemctl restart nginx

 

1-8. 접속

http://172.22.202.71/ 로 접속하면

다음과 같은 화면을 볼 수 있습니다.

 

default 설정을 제거하지 않아서 그렇습니다.

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

 

이제 다시 nginx를 재시작하고 접속하면 다음 화면을 볼 수 있습니다.