React 앱 배포 (빌드 & 서버 실행)

1) 개발 서버 중단

빌드 전 반드시 기존 개발 서버 중단

Ctrl + C

 

2) 빌드 명령 실행

npm run build

 

• 실행하면 build/ 디렉터리가 생성됨
• 이 폴더에 최적화된 HTML/CSS/JS 파일이 포함됨

3) build 폴더 확인

좌측 프로젝트 디렉터리에서 build/ 폴더가 생성된 것 확인

4) build 폴더 서버 실행

간단하게 build 폴더를 실행하는 방법:

npx serve -s build

 

• serve 패키지를 이용한 정적 파일 서빙
• 기본적으로 localhost에서 배포 결과 확인 가능

참고

• 실제 운영 서버 배포 시 build 폴더의 내용을 **웹 서버(Nginx, S3, Vercel 등)**에 업로드
• Vite, Next.js와 같은 다른 빌드 툴도 있음