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 프로젝트를 처음 빌드해 보고 로컬에서 테스트 해 보고 싶으셨던 분들께 도움이 되셨길 바랍니다.

같이 읽으면 좋은 글

vite 호스트와 포트 설정하기(feat. cli 명령어)

Vite(비트)를 번들러로 사용하여 개발하다보면 모바일 장비로 확인할 수 있도록 호스트나 포트를 설정해야 하는 경우가 생깁니다. svelte 등으로 개발할 때 호스트와 포트 설정 방법을 안내해 드립니다.

기본 설정

Vite를 번들러는 yarn dev 명령을 이용해서 개발 서버를 띄울 때 기본적으로 호스트는 localhost로 설정되고, 기본 포트는 5173 으로 설정됩니다.

호스트 설정 및 포트 설정

호스트가 localhost로만 작동하는 경우 개발 서버를 띄운 곳에서만 접속이 가능하므로, 모바일 장비나 함께 일하는 동료의 외부 접속을 원한다면 호스트를 설정해 주어야 합니다. 현 개발 서버의 IP 주소가 192.168.0.10 이라면 아래와 같이 명령하여 개발 서버를 띄우면 됩니다. 그런데 포트 번호가 복잡해 보여서 5173이 싫고 4000으로 하고 싶다면 아래와 같이 하면 됩니다.

vite --host 0.0.0.0 --port 4000

package.json 설정

늘 그렇듯, 다들 귀찮은 걸 싫어하시죠? yarn dev 명령어 한 방에 위의 스크립트가 실행되게 하려면 당연히 package.json을 수정해주면 된다. package.json의 scripts는 다음과 같은 내용으로 되어 있습니다.

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
},

위에서 사용한 명령어를 dev에 있는 vite 대신에 아래와 같이 채워주면 됩니다.

"scripts": {
    "dev": "vite --host 0.0.0.0 --port 4000",
    "build": "vite build",
    "preview": "vite preview"
},

이제는 yarn dev만 입력해서 개발 서버를 띄우면 됩니다. 이와 같이 설정하면, localhost로도 접속할 수 있고, 192.168.0.10으로도 접속이 가능합니다. 호스트주소 설정과 포트 설정에 도움이 되셨길 바랍니다.

관련 자료

관련된 내용은 vite 공식 홈페이지의 서버 옵션 문서를 참조했습니다.

같이 읽으면 좋은 글