[Vite] Vite 프로젝트 빌드 및 배포

Vite로 개발한 Vue.js 프로젝트를 빌드하여 최적화된 정적 파일을 생성하고, 이를 배포하는 방법에 대해 알아보겠습니다.

---

프로젝트 빌드하기

Vite는 빌드 시스템을 내장하고 있어 프로젝트를 빌드하는 과정이 간단합니다. 빌드는 개발 중에 사용하는 개발 서버와는 달리, 최적화된 정적 파일을 생성하는 과정입니다.

먼저, 프로젝트 루트 디렉토리에서 다음 명령어를 실행하여 프로젝트를 빌드합니다.

npm run build

위 명령어를 실행하면 Vite가 프로젝트를 빌드하고 dist 폴더에 최적화된 파일들을 생성합니다. 빌드 과정에서 코드는 압축되고 최적화되어 더 작고 빠른 앱을 생성합니다.

---

정적 파일 배포하기

빌드된 정적 파일을 배포하려면 dist 폴더를 웹 서버에 호스팅하면 됩니다. Vite는 빌드된 파일들이 모두 자체 적인 경로를 갖고 있으므로, 웹 서버에서 정적 파일들을 적절히 설정하여 호스팅하면 됩니다.

Vite는 기본적으로 상대 경로를 사용하기 때문에, 빌드된 파일들을 서버의 루트 디렉토리에 배포하려면 아무런 설정 없이 호스팅하면 됩니다. 하지만, 서브 디렉토리에 배포하려면 base 옵션을 설정해야 합니다.

예를 들어, base 옵션을 '/'로 설정한 경우에는 빌드된 파일들을 서버의 루트 디렉토리에 배포할 수 있습니다.

// vite.config.js
module.exports = {
  base: '/',
};

만약 빌드된 파일들을 서버의 하위 디렉토리에 배포하려면 base 옵션을 해당 디렉토리에 맞게 설정해주어야 합니다.

배포 전에 정적 파일을 최종적으로 확인하고 테스트하기 위해 로컬 웹 서버를 이용하여 확인하는 것을 추천합니다.

---

배포 시 주의사항

• 배포 시에는 개발 모드가 아닌 프로덕션 모드로 빌드해야 합니다. 프로덕션 모드로 빌드하면 불필요한 디버깅 코드가 제거되고, 코드가 최적화되어 성능 향상을 기대할 수 있습니다.
• 배포 전에 반드시 빌드된 정적 파일들을 테스트하고 정상적으로 동작하는지 확인해야 합니다. 호스팅 환경에 따라 일부 설정이 변경될 수 있으므로 충분한 테스트가 필요합니다.
• 필요한 파일만 호스팅하도록 서버 설정을 조정하여 불필요한 파일의 다운로드를 방지하고, 보안에 유의해야 합니다.
• 배포 시에는 캐싱 설정을 고려하여 사용자의 브라우저에 저장된 캐시를 적절히 관리해야 합니다. 파일의 버전 번호를 변경하거나 캐시 무효화 기능을 사용하여 새로운 버전이 반영되도록 할 수 있습니다.

Vite를 사용하여 빠르고 가벼운 앱을 개발하고 빌드하여 배포하는 과정을 통해 최적화된 웹 앱을 제공할 수 있습니다. 이제 당신의 Vue.js 앱을 성공적으로 빌드하고 배포할 준비가 된 것입니다!