호스팅서비스, dist 폴더 만드는 방법(+npm run build 동작 과정 포함)

dist 폴더 만드는 방법(+npm run build 동작 과정)

dist 폴더는 Vite나 React 프로젝트를 프로덕션 빌드할 때 자동 생성되는 배포용 최적화 파일 모음입니다. AI Studio에서 다운로드한 Vite 기반 프로젝트의 경우 npm run build 명령으로 생성합니다.

1.dist 폴더 만드는 방법:환경 준비

• Node.js가 설치되어 있어야 하며, 프로젝트 루트(package.json 있는 폴더)에서 터미널을 엽니다.
• 의존성 설치: npm install 실행(이미 설치됐다면 생략).

빌드 과정

1. 터미널에서 npm run build 입력(또는 yarn build).
2. 빌드 완료 시 "dist" 폴더가 루트에 생성(index.html, assets 폴더 포함).
3. 확인: ls dist 또는 파일 탐색기로 열기.

문제 해결

• 에러 발생 시 npm install 재실행하거나 vite.config.js의 outDir: 'dist' 확인.
• CRA(React Scripts)라면 npm run build로 build 폴더 생성되니 vite.config.js 추가 필요.
• 빌드 후 npm run preview로 로컬 테스트.

2. npm run build 동작 과정

npm run build 명령은 개발 코드(큰 파일, 디버그 정보)를 프로덕션 배포용으로 최적화해 압축된 정적 파일들로 변환하는 과정입니다. 입력 시 Vite가 자동으로 JS/CSS 번들링, 압축, 트리 쉐이킹(불필요 코드 제거)을 수행해 dist 폴더를 만듭니다.

명령 입력 위치

프로젝트 루트 폴더(package.json 있는 곳)에서 VS Code 터미널이나 명령 프롬프트를 열고 입력합니다. 예: AI Studio ZIP 풀린 src, index.html 있는 디렉토리.

내부 동작 과정

1. package.json "scripts": {"build": "vite build"}를 읽음.
2. 소스 코드 변환(ES 모듈 → 브라우저 호환 JS).
3. 파일 병합/압축(assets 폴더에 JS/CSS 최적화 버전 저장).
4. index.html 업데이트(압축 파일 경로 연결).
5. 완료: dist/index.html, dist/assets/... 생성(로컬 dev와 달리 고정 파일).

확인 및 다음 단계

빌드 로그에 "dist built in X ms" 나오면 성공; 터미널에 npx serve dist로 http://localhost:3000 테스트. 이 dist를 hPanel에 업로드하면 호스팅에서 동작합니다.