vite로 Svelte 배포용 빌드하고 테스트 서버 띄우는 방법

Svelte를 사용해서 개발을 열심히 해서 완성했다면, 당연히 서버에 배포를 해야겠죠? 이를 위해서 배포용으로 빌드하고 로컬에서 테스트까지 해 볼 수 있다면 좋겠죠? 자 그럼 Vite 명령어를 사용하여 Svelte 배포버전을 빌드하는 방법과 테스팅하는 방법을 확인하겠습니다.

Svelte 배포용 빌드 방법

매우 간단하게도 yarn build 명령어 한 줄이면 모든 것이 끝납니다. package.json의 scripts를 확인해 보면 yarn build를 실행하면 vite build가 실행되게 되어 있습니다.

다음과 같이 실행하면 현재 개발한 프로젝트가 dist 하위 디렉토리에 배포본으로 생성됩니다.

Svelte 배포용 빌드 명령어 실행 방법
배포용 빌드 명령어 실행 방법

빌드를 모두 마치면 아래와 같이 어떤 파일들이 빌드되었는지 확인할 수 있으며, 해당 파일의 용량은 어떻게 되는지, 심지어 gzip으로 압축하는 경우에는 어느정도의 용량이 되는지까지 확인할 수 있습니다.

Svelte 배포용 빌드 명령어 실행 결과
배포용 빌드 명령어 실행 결과

Svelte 배포본 테스트 서버 띄우는 방법

이제 위에서 생성한 Svelte 배포본에 대해 서버에 띄워서 확인을 해야 하는데, 물론 별도로 개발 테스트 서버를 구축해서 활용하시겠지만, 그 전에 로컬에서 기능들을 테스트 해 보면 좋겠죠. 그 때 사용하는 것이 yarn preview 입니다. 마찬가지로 package.json을 확인해 보시면 vite preview를 실행하게 되어 있습니다. 기본적으로 개발을 위한 포트를 5173으로 띄우다 보니 preview를 위한 포트는 아래와 같이 4173번으로 뜹니다.

Svelte 배포본 테스트 서버 띄우는 방법
배포본 테스트 서버 띄우는 방법

정리

어차피 yarn을 쓰나 vite를 쓰나 명령어에 차이는 없으니, 편한 방식으로 이용하면 되겠습니다. 추가로 필요한 옵션이 있는 분들은 package.json의 scripts에 추가해서 사용하시면 보다 편리하게 이용할 수 있겠죠? Svelte 프로젝트를 처음 빌드해 보고 로컬에서 테스트 해 보고 싶으셨던 분들께 도움이 되셨길 바랍니다.

같이 읽으면 좋은 글