[Svelte] Environment

스벨트는 vite에 의존해서 돌아가기 때문에, vite에서 사용되는 파일 네이밍 양식 을 그대로 사용할 수 있다.

 

https://vitejs.dev/guide/env-and-mode.html#env-files

Vite

 

스벨트에서 환경변수는 public/private, static/dynamic으로 구분된다.

 

Public은 서버 컴포넌트가 아닌 파일에서도 불러올 수 있는 환경변수들이다.

 

public 환경변수를 사용하고 싶을 때는 접두사로 PUBLIC_ 을 붙여줘야만 한다.

public이 붙지 않은 모든 환경변수는 private 취급되며 서버 컴포넌트에서만 불러올 수 있고, 외부에 노출되지 않는다.

 

 

스벨트를 typescript와 사용할 때, 환경 변수를 보통 이렇게 불러올 것이다.

import { DATABASE_URL } from "$env/static/private";

 

typescript는 강타입 언어인데, env에 DATABASE_URL Key가 있는지 어떻게 알고 타입 에러가 나지 않을까?

 

 

스벨트에서는 이를 아주 모던하게 처리하였다.

 

스벨트가 컴파일될때 생성되는 .svelte-kit 폴더의 ambient.d.ts를 보면 env에 대한 타입을 정의해주고 있다.

 

이는 컴파일 될 때 현재 모든 환경변수를 긁어온 뒤, 모든 키에 대해서 선언을 하여 타입 지원을 해주고 있다.

 

 

static은 위와 같이 고정된(알려진) 환경변수들을 불러올 때 사용할 수 있다.

그럼 dynamic은 어디서 사용할까?

 

dynamic의 타입은 static과 같지만, 여기에 [key: string]: string | undefined 프로퍼티가 추가되어있다.

 

만약 컴파일 타임에서 불러올수 있는 환경변수가 아닌 경우 (실행시 변수 주입이나, docker를 통해 주입) 에는

스벨트가 자동으로 해당 변수에 대한 값을 수집해서 타입을 만들어주지 못할 것이고, static을 쓴다면 오류가 날것이다.

 

이런 경우에는 dynamic을 사용해서 환경변수를 가져와주면 된다.

import { env } from '$env/dynamic/private';

console.log(env.GENERAL_TEST_1);

dynamic 또한 기본적으로 static의 모든 KeyValue를 상속받으므로 자동완성도 지원한다.

 

로컬 작업 환경에서는 .env.local 에 키를 명시해두고 개발한다면, 아주 편리하게 환경변수를 불러올 수 있다.