Gitpod로 SvelteKit용 HMR 설정

SvelteKit 및 Gitpod

SvelteKit과 Gitpod의 "Hot Module Reloading"을 최대한 활용하려면 구성을 약간 변경해야 작동합니다. 그렇지 않은 경우 변경 사항을 저장할 때만이 아니라 몇 초마다 새로 고침이 발생할 가능성이 큽니다.

Gitpod에서 Vite의 HMR 사용하기

다음 코드 스니펫은 Vite가 작동하도록 관련 부분을 변경하는 간단한 구성을 보여줍니다.

Gitpod의 컨텍스트에서 HTTPS가 아닌 WebSocket을 사용해야 하므로 기본적으로 Vite에 URL이 실제로 어떻게 보이는지, 어떤 프로토콜을 사용할지 알려줍니다.

import adapter from "@sveltejs/adapter-auto";
import preprocess from "svelte-preprocess";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: preprocess(),
  kit: {
    adapter: adapter(),
    vite: {
      server: {
        // Configure Vite for HMR with Gitpod.
        hmr: process.env.GITPOD_WORKSPACE_URL
          ? {
              // Due to port fowarding, we have to replace
              // 'https' with the forwarded port, as this
              // is the URI created by Gitpod.
              host: process.env.GITPOD_WORKSPACE_URL.replace("https://", "3000-"),
              protocol: "wss",
              clientPort: 443
            }
          : true
      }
    }
  }
};

export default config;

이 작은 변화로 SvelteKit으로 다음 PWA를 개발하는 것이 Gitpod에서 완벽하게 작동합니다!