SvelteKit을 이용해서 개발한 후 서버에 배포하는 다양한 방법이 있습니다. 이를 위해서 다양한 공식 어댑터가 있습니다. 여기에서는 node.js 서버로 SvelteKit 프로젝트를 빌드하는 방법을 알아보도록 하겠습니다.
목차
SvelteKit 어댑터 auto를 node로 변경
SvelteKit에서는 다양한 서버 배포에 맞게 각 어댑터를 제공하고 있습니다. 오늘은 Node.js서버로 SvelteKit 프로젝트를 구동하기 위해서 배포 설정하는 과정을 알아보도록 하겠습니다.
SvelteKit프로젝트의 기본 adapter 설정은 아래 그림 1과 같이 adapter-auto로 설정돼 있습니다.
node.js 서버에 배포하려면 이 부분에 대한 수정이 필요합니다. 기본값으로 되어 있는 @sveltejs/adapter-auto 패키지를 @sveltejs/adapter-node로 변경해 주어야 합니다. 아래 명령어를 사용해서 @sveltejs/adapter-auto 패키지를 먼저 제거해 줍니다. 그리고 @sveltejs/adapter-node 패키지를 설치해 줍니다.
yarn remove @sveltejs/adapter-auto
yarn add -D @sveltejs/adapter-node
SvelteKit node adapter 설정
@sveltejs/adapter-node로 패키지를 변경한 후 해야 할 일이 하나 더 있습니다. 그건 바로 프로젝트 루트 디렉토리에 있는 svelte.config.js 파일에서 사용하는 어댑터의 패키지명을 변경해 주어야 합니다.
위의 그림 3의 Line 1을 보면 adapter를 @sveltejs/adapter-auto에서 import하는 부분이 있습니다. 여기를 아래와 같이 @sveltejs/adapter-node로 변경해 주셔야 합니다.
SvelteKit node adapter에 대한 설정을 마쳤습니다. 이제 빌드한 후에 무엇을 어떻게 배포해야 하는지 확인하셔야겠죠?
Node.js 서버에 배포하기 위한 빌드
이제는 어댑터를 변경했으므로 node 서버에 배포할 수 있게 준비되기 때문에 빌드 후의 결과물이 다릅니다. 우선 SvelteKit 배포를 위한 빌드 명령어를 실행하겠습니다.
yarn build이제 node.js로 서버를 실행해 주면 됩니다.
node build아래와 같이 서버가 3000번 포트에서 잘 구동하는 것을 확인할 수 있습니다.
빌드 결과가 어디에 저장됐을까요? 눈치 채셨을까요? 루트 디렉토리 하위에 build 디렉토리가 생성되며 그 아래에 클라이언트 코드와 서버 코드가 모두 배포를 위해 준비돼 있습니다.
그림 6을 보면 build 디렉토리 하위에 생성된 디렉토리와 파일을 볼 수 있습니다. index.js가 실행된 것이라는 걸 알 수 있습니다. 상용 서버 배포시에 index.js를 실행해 주시면 됩니다. 위의 그림 5와 같이 build 디렉토리로 지정해 주셔도 index.js가 실행되는 거 아시죠?
PORT 및 HOST(환경변수 설정)
상용 서버에서 호스트나 포트 설정이 필요한 경우가 있을 수 있습니다. 동일 서버에서 여러 포트를 사용해서 서버를 운용한다든지 하면 이런 설정은 필수겠죠? 물론 docker를 이용해서 배포한다면 크게 신경쓸 일은 아니지만 말입니다. 어쨌거나 port와 host를 설정하고 싶다면 아래와 같이 서버를 구동해 주시면 간단히 host와 port를 설정해서 production 서버를 구동할 수 있습니다.
HOST=0.0.0.0 PORT=3001 node build여기까지 SvelteKit node adapter 설정 방법을 알아보았습니다. node 서버로 SvelteKit 프로젝트를 배포해야 하는 분들에게 도움이 되셨길 바랍니다.
관련자료
SvelteKit의 Node servers 페이지를 참고했습니다. 더 자세한 내용은 이 페이지를 참고하시기 바랍니다.