SvelteKit에서 환경변수에 접근하기

Svelte와 SvelteKit은 기본적인 환경변수 접근 방법이 다르다. 이 다름을 모르고 SvelteKit 앱에서 Svelte 스타일의 환경변수에 접근하려다 안 돼서 문제를 못 찾고 고생한 경험이 있다. 글 주제도 떨어져 가는 김에 이에 관해 간단히 정리해 본다.

우선 SvelteKit에서 자체적으로 제공하는 환경변수 액세스 방법은 정적(static) 및 동적(dynamic) 두 가지 방식과 함께 private 및 public 개념이 있다는 것은 알아둬야 할 것 같다.

SvelteKit에서 정적으로 환경변수 읽기

정적 환경변수 읽기는 해당 환경변수 심볼을 특정 모듈 시스템을 통해 import 해서 쓰는 독특한 방식이다. 대충 아래와 같은 식이다.

import { PRIVATE_ENV_VAR } from '$env/static/private';
import { PUBLIC_ENV_VAR } from '$env/static/public';

정적 환경변수는 빌드 과정에서 값이 고정되는 것 같으며 따라서 앱이 실행된 이후에 환경변수 값이 바뀌어도 아마도 바뀐 값을 읽을 수 없을 것 같다.

특이사항으로 private와 public이라는 두 가지로 분류되어 있다는 점인데, private는 서버사이드 즉 파일 이름에 .server가 붙은 서버코드에서만 액세스가 가능하기에 비밀 키 등을 전달하기에 적절한 방식 같다. 나머지 public은 예상 가능하다시피 서버와 클라이언트 양쪽에서 다 액세스 할 수 있는 환경변수다.

한 가지 더 특이한 점으로 정적 public 환경변수 이름에는 PUBLIC_ 접두어가 강제된다는 점이다. 아마도 모든 코드에서 읽을 수 있으니 조심하라는 의도가 숨어있는 것으로 보인다. 클라이언트 코드에서 비밀 키를 알게 되는 게 보안 상 별로 좋지는 못 할 일임은 분명해 보이니 말이다.

어쨌든 일반적인 환경에서는 정적으로 환경변수를 읽는 방법이 대체로 권장된다고 한다. 아마도 성능보다는 보안적인 사유로 추측된다.

SvelteKit에서 동적으로 환경변수 읽기

동적으로 환경변수를 읽을 때는 아래와 같이 조금은 더 일반적인(?) 방식이다.

import { env } from '$env/dynamic/private';
console.log(env.SECRET_KEY);

위 코드는 기존 SvelteKit에서 환경변수를 액세스 할 때 사용하던 process.env와 동일한 방식으로 이용할 수 있다. 다만 private이기 때문에 서버사이드에서만 사용할 수 있다는 특징이 있다.

클라이언트와 서버 모두 공용으로 사용하려면 여기서도 public을 사용해야 한다.

import { env } from '$env/dynamic/public';
console.log(env.PUBLIC_ACCESS_KEY);

public 환경변수는 역시 PUBLIC_이라는 접두어가 붙은 것만 사용할 수 있다.

동적 환경변수는 꼭 필요할 때만 사용하라는 지침이 있는데 역시 보안상 사유가 관련이 있을 것 같다. 동적 방식이 약간 더 편한 감이 없지 않아 있긴 한데 컴파일 과정을 통해 버그를 줄일 수 있는 타입스크립트의 장점을 약간은 훼손하기도 하는 느낌이 들기도 한다.

환경변수 시험해 보기

환경변수를 만들어서 넘겨주는 방법은 여러 방법이 있다. .bashrc나 .zshrc와 같은 셸 초기화 파일에 아예 export 등으로 넣어버리는 방법도 있겠지만, 인스턴트 하게는 아래와 같은 식으로도 시험할 수 있다.

$ PUBLIC_ENV_VAR="foobar" SECRET_ENV_VAR="oops" npm run dev

위의 경우 npm run dev를 실행시키면서 여기에 PUBLIC_ENV_VAR와 SECRET_ENV_VAR라는 두 가지 환경변수를 넘겨주는 셸 커맨드 예제다. 참고로 제일 앞의 $는 셸 프롬프트이니 오해하지 말자.

이 외에도 특정 환경변수를 계속 액세스 해야 한다면 앱 프로젝트의 루트에 .env 파일을 만들어서 여기에 정의하는 방법도 있다.

# .env file
PUBLIC_ENV_VAR="foobar"
SECRET_ENV_VAR="oops"

편한 방법을 이용하면 될 것 같다.

그냥 SevelteKit 관련 글의 썸네일용 이미지