React 앱을 Nginx로 배포하는 방법 과정

1. React 앱 빌드하기

React는 개발할 때는 npm start로 개발 서버를 띄우지만, 실제 배포할 땐 정적 파일로 빌드해줍니다.

npm run build

이 명령어를 실행하면 build/ 폴더가 생기고, 여기에 index.html, JS, CSS 등 실제로 서비스될 정적 파일이 들어있어요.

2. 서버 준비 (Nginx 설치)

• 서버 환경: Ubuntu 같은 리눅스 서버(혹은 Docker 컨테이너)
• Nginx 설치하는 명령어

sudo apt update
sudo apt install nginx -y

설치 후 동작 확인!

sudo systemctl status nginx

active (running)이면 정상!

3. React 빌드 결과물을 서버로 옮기기

• build/ 폴더를 서버에 업로드 (예: /var/www/react-app 폴더에 넣기)
• 예시

sudo mkdir -p /var/www/react-app
sudo cp -r build/* /var/www/react-app/

4. Nginx 설정하기

React는 SPA(Single Page Application)이기 때문에 모든 경로를 index.html로 리다이렉트해야 해요.

Nginx 설정 파일 예 (/etc/nginx/sites-available/react-app):

server {
    listen 80;
    server_name example.com;   # 도메인이 없으면 서버 IP

    root /var/www/react-app;
    index index.html;

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

설정 활성화

sudo ln -s /etc/nginx/sites-available/react-app /etc/nginx/sites-enabled/
sudo nginx -t   # 설정 파일 문법 검사
sudo systemctl reload nginx

5. 브라우저에서 접속

• 서버 IP나 도메인으로 접속하면 React 앱이 뜹니다.
• http://your-server-ip 또는 http://example.com

6. HTTPS (선택 사항)

실서비스는 HTTPS가 필수에요.
Certbot을 이용해 무료 SSL 적용 가능

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx

7. (옵션) CDN이나 캐시 추가

• Cloudflare 같은 CDN을 Nginx 앞에 두면 더 빠르고 안전해질 수 있습니다!