SvelteKit node adapter로 node.js 서버 배포 방법

SvelteKit을 이용해서 개발한 후 서버에 배포하는 다양한 방법이 있습니다. 이를 위해서 다양한 공식 어댑터가 있습니다. 여기에서는 node.js 서버로 SvelteKit 프로젝트를 빌드하는 방법을 알아보도록 하겠습니다.

SvelteKit 어댑터 auto를 node로 변경

SvelteKit에서는 다양한 서버 배포에 맞게 각 어댑터를 제공하고 있습니다. 오늘은 Node.js서버로 SvelteKit 프로젝트를 구동하기 위해서 배포 설정하는 과정을 알아보도록 하겠습니다.

SvelteKit프로젝트의 기본 adapter 설정은 아래 그림 1과 같이 adapter-auto로 설정돼 있습니다.

그림 1. SvelteKit 기본 배포 어댑터는 auto로 설정돼 있음
그림 1. SvelteKit 기본 배포 어댑터는 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
ShellScript

SvelteKit node adapter 설정

@sveltejs/adapter-node로 패키지를 변경한 후 해야 할 일이 하나 더 있습니다. 그건 바로 프로젝트 루트 디렉토리에 있는 svelte.config.js 파일에서 사용하는 어댑터의 패키지명을 변경해 주어야 합니다.

그림 3. 기존 @sveltejs/adapter-auto로 설정된 부분
그림 3. 기존 @sveltejs/adapter-auto로 설정된 부분

위의 그림 3의 Line 1을 보면 adapter를 @sveltejs/adapter-auto에서 import하는 부분이 있습니다. 여기를 아래와 같이 @sveltejs/adapter-node로 변경해 주셔야 합니다.

그림 4. SvelteKit node adapter로 설정 변경
그림 4. SvelteKit node adapter로 설정 변경

SvelteKit node adapter에 대한 설정을 마쳤습니다. 이제 빌드한 후에 무엇을 어떻게 배포해야 하는지 확인하셔야겠죠?

Node.js 서버에 배포하기 위한 빌드

이제는 어댑터를 변경했으므로 node 서버에 배포할 수 있게 준비되기 때문에 빌드 후의 결과물이 다릅니다. 우선 SvelteKit 배포를 위한 빌드 명령어를 실행하겠습니다.

yarn build
ShellScript

이제 node.js로 서버를 실행해 주면 됩니다.

node build
ShellScript

아래와 같이 서버가 3000번 포트에서 잘 구동하는 것을 확인할 수 있습니다.

그림 5. node.js로 sveltekit 프로젝트 서버 구동
그림 5. node.js로 sveltekit 프로젝트 서버 구동

빌드 결과가 어디에 저장됐을까요? 눈치 채셨을까요? 루트 디렉토리 하위에 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
ShellScript

여기까지 SvelteKit node adapter 설정 방법을 알아보았습니다. node 서버로 SvelteKit 프로젝트를 배포해야 하는 분들에게 도움이 되셨길 바랍니다.

관련자료

SvelteKit의 Node servers 페이지를 참고했습니다. 더 자세한 내용은 이 페이지를 참고하시기 바랍니다.

같이 읽으면 좋은 글

SvelteKit 라우팅 +page와 +layout 사용 방법(SvelteKit 1.0 기준)

SvelteKit이 지난 12월 14일 1.0 출시를 했습니다. 기존에는 아무래도 1.0 출시 이전이라 페이지 라우팅 방식에 변경이 있었습니다. 이제는 1.0 출시를 했으니 안정이 좀 됐다고 봐도 괜찮을 것 같습니다. 그럼 SvelteKit 라우팅 +page, +layout 사용 방법을 알아보겠습니다.

SvelteKit 라우팅 방식의 변경

기본 라우팅 페이지를 index.svelte로 사용했던 적이 있었습니다. 하지만, 현재는 +page.svelte를 인덱스 페이지로 사용하고 있습니다. __layout.svelte도 +layout.svelte로 변경되었습니다. 그래서 다른 블로그나 유튜브 등에 아직도 과거에 작성했던 코드들이 혼란을 주는 지점이 있습니다.

이제 정식으로 1.0 릴리즈를 했다는 것만으로도 안정감이 느껴집니다. 이처럼, +page와 +layout으로 파일명을 사용하는 간단한 라우팅 방식은 매우 맘에 드네요.
그러면 SvelteKit의 라우팅 구조를 간단히 살펴보겠습니다.

라우팅 경로 = 디렉토리 경로

SvelteKit에서는 디렉토리 경로를 그대로 라우팅 경로로 사용합니다.

src/routes/+page.svelte 파일이 바로 루트 경로(/)가 됩니다.
src/routes/about/+page.svelte 파일은 /about 이라는 경로가 됩니다.

그럼 +page.svelte 파일이 무엇인지 확인해 봅시다.

+page.svelte

우선 src/routes 하위 디렉토리에 있는 모든 +page.svelte가 index 파일의 역할을 합니다.

+layout.svelte

웹 페이지의 공통 레이아웃에 대한 설정입니다. 아래 코드는 SvelteKit 공식문서에서 가져왔습니다.

<nav>
  <a href="/">홈페이지</a>
  <a href="/about">오솔길은?</a>
  <a href="/settings">설정</a>
</nav>

<slot></slot>
Svelte

위의 코드에서 nav 영역은 공통으로 들어가는 부분이고, slot이 각 페이지마다 다르게 들어가는 부분입니다. 위와 같이 +layout을 설정하면, 네비게이션이 모든 페이지에 공통으로 들어가고 각 페이지는 slot에 들어가게 됩니다.

<h1>홈페이지</h1>
Svelte

홈페이지를 위와 같이 작성하고, 이제 아래와 같이 /about 페이지를 작성해 보겠습니다.

<h1>오솔길은?</h1>
Svelte

/about를 브라우저로 열면, 다음과 같이 slot 부분에 src/routes/about/+page.svelte의 내용이 들어갑니다.

<nav>
  <a href="/">홈페이지</a>
  <a href="/about">오솔길은?</a>
  <a href="/settings">설정</a>
</nav>

<h1>오솔길은?</h1>
Svelte

중첩 +layout

+layout을 각 라우팅에서 사용하면 중첩하여 사용할 수 있습니다. 이를테면, src/routes/about/+layout.svelte를 작성하면, about 하위에 있는 +page는 해당 레이아웃을 추가 적용받게 된다.
예를들어 about 하위에 introduction 이라는 페이지가 더 있는 경우 +layout가 있다고 가정해 봅시다.

<nav>
  <a href="/about">오솔길은?</a>
  <a href="/about/introduction">소개</a>
<nav>

<slot></slot>
Svelte

그리고 introduction을 다음과 같이 작성해 줍니다.

<h1>소개</h1>
Svelte

브라우저에서 /about/introduction을 열면 아래와 같은 페이지가 열립니다.

<nav>
  <a href="/">홈페이지</a>
  <a href="/about">오솔길은?</a>
  <a href="/settings">설정</a>
</nav>

<nav>
  <a href="/about">오솔길은?</a>
  <a href="/about/introduction">소개</a>
<nav>

<h1>소개</h1>
Svelte

스타일링만 잘 해 주면 사용자가 접근하기 좋은 네비게이션이 완성되겠죠.

관련 자료

SvelteKit을 처음 사용하면서 저는+page.svelte가 뭐지? 하는 궁금함에 공식 문서 확인하다가 알게 됐습니다. 자세한 내용은 https://kit.svelte.dev/docs/routing을 확인하시면 됩니다.
SvelteKit 라우팅 개념을 잡는데 도움이 되길 바랍니다.

같이 읽으면 좋은 글