오늘은 SvelteKit으로 작업한 웹페이지(또는 웹앱)를 Node.js 서버로 빌드해 보겠습니다.
1. SvelteKit 개발 환경 구축, 기본 구조 및 Rune
2. Nested component와 Loading Data
3. Node 서버로 빌드(현재 글)
3.1. 빌드
3.2. Node.js 서버 구동
3.3. prerender
3.1. 빌드
SvelteKit 빌드를 위해서는 빌드 대상에 따라서 adapter를 설치하고 연결해 주어야 합니다.
3.1.1. npm install -D @sveltejs/adapter-node 명령을 실행합니다.
3.1.2. svelte.config.js의 1행이 import adapter from ‘@sveltejs/adapter-auto’;로 되어 있을 텐데 이것을 import adapter from '@sveltejs/adapter-node';로 변경합니다.
3.1.3. 프로젝트를 빌드하려면 npm run build 명령을 실행합니다.
(1~2편에서 쓰던 npm run dev는 개발 중 출력 결과를 즉시 확인하기 위한 명령어입니다.)
3.1.4. 그러면 build 폴더 안에 빌드 결과물이 들어 있는 것을 확인하실 수 있습니다.
3.2. Node.js 서버 구동
3.2.1. 서버 포트 번호를 변경하려면 build/index.js의 237행 쯤 있는 const port = env('PORT', !path && '3000'); 부분을 수정합니다.
3.2.2. 서버를 구동하려면 터미널에서 build 폴더 안으로 이동(cd build) 후 build node .\index.js 명령을 실행합니다.
3.2.3. 웹 브라우저를 실행하고 localhost:3000을 입력하면 잘 접속되는 것을 확인하실 수 있습니다. 물론 외부에서 접속하려면 서버ip주소:포트번호를 입력해야 합니다. 공유기 사용 시 외부망에서 접속하려면 포트포워딩이 필요합니다.
포트포워딩 방법
위에 본인의 공유기가 없을 경우 인터넷에 공유기 이름을 검색해 보면 포트포워딩 하는 방법이 나오므로 검색해 보시기 바랍니다.
3.3. prerender
빌드 결과물에 막상 HTML 파일은 보이지 않습니다. 서버에서 직접 rendering(Server-Side-Rendering, 즉 SSR)되는 것입니다. 만약 HTML 파일로 결과물을 받아 보고 싶다면 prerender를 사용할 수 있습니다. prerender를 위해서는 +page.server.ts 파일에 아래 코드를 추가합니다.
export const prerender = true;
아래는 예시입니다.
src/routes/blog/+page.server.ts에 export const prerender = true;를 추가하고 빌드했더니 build/prerendered에 blog.html이 생성된 모습입니다.
build/prerenderd/blog.html을 보면 Svelte 코드 작성한 대로 HTML 코드가 생성된 것을 보실 수 있습니다.
오늘은 여기까지!
제 글을 읽어 주셔서 감사합니다. 다음에 만나요!