3. 프로덕션 빌드
개인이 완료되면 웹 애플리케이션을 배포 가능한 형태로 변환하는 빌드 과정이 필요합니다. Vite는 Rollup을 기반으로 하여 최적화된 결과물을 생성합니다.
3.1. 빌드 명령어 실행
프로젝트 디렉토리에서 다음 명령어를 실행하여 프로덕션 빌드를 수행합니다.
npm run build이 명령어는 소스 코드를 최적화하고, 번들링하며, 압축하여 dist 디렉토리에 정적 파일들(HTML, CSS, JavaScript)을 생성합니다.
3.2. 빌드 결과물 확인
빌드가 성공적으로 완료되면, 프로젝트 루트에 dist 디렉토리가 생성됩니다. 이 디렉토리 안의 파일들이 웹 서버에 배포될 최종 결과물입니다.
dist/
├── index.html
├── assets/
│ ├── index-XXXXXX.js # 번들링된 JS (해시 포함)
│ ├── index-XXXXXX.css # 번들링된 CSS (해시 포함)
│ └── react-XXXXXX.svg # 이미지 등 정적 자산파일 이름에 포함된 해시(-XXXXXX)는 브라우저 캐싱을 효율적으로 관리하기 위한 것입니다. 파일 내용이 변경되면 해시도 변경되어 새로운 버전의 파일을 가져오도록 합니다.
3.3. 빌드된 앱 로컬에서 테스트
실제로 배포하기 전에 빌드된 결과물이 올바르게 작동하는지 확인하려면 npm run preview 명령어를 사용할 수 있습니다. 이 명령어는 dist 디렉토리를 서빙하는 간단한 로컬 서버를 시작합니다.
npm run preview