TIL 230122 - SvelteKit에서 환경변수 사용법

SvelteKit에서 환경변수 사용법

SvelteKit에서 환경변수를 사용하는 방법은 여러 가지가 있다. JS기반으로 라이브러리를 사용할 수도 있고, Vite에 있는 기능이나 dotenv 등을 사용할 수도 있다. 그러나 SvelteKit에는 자체적으로 제공하는 환경변수 기능이 있다. 이를 사용하면 보안 등에서 이점이 있다.

SvelteKit에는 2가지 기준으로 분류해 4가지의 환경변수 기능을 지원한다. Static / Dynamic값인지, Public / Private 한지를 따져 4가지 방식으로 사용할 수 있다.

 

우선 환경변수 저장파일인 .env를 프로젝트 루트에 생성해 준다.

아래에 Private Key와 Public Key를 예시로 작성했다.

# .env

# Private
SECRET_API_KEY=blahblahhahahathisissecret

# Public
PUBLIC_API_SERVER=localhost:8000

다음은 Static한 Public Key의 접근법의 예시이다.

// +page.svelte
<script>
    import { PUBLIC_API_SERVER } from '$env/static/public';
    console.log(PUBLIC_API.SERVER)
</script>

다음은 Static한 Private Key의 접근법의 예시이다.

환경변수를 오직 server.js 파일에서만 접근하여 볼 수 있게 하려면 Private 방식을 사용하면 된다.

// +page.server.js

/** @type {import('./$types').PageLoad} */
import { SECRET_API_KEY } from '$env/static/private';
export function load({ fetch, params }) {
    console.log(SECRET_API_KEY);
}

다음은 Dynamic한 값의 접근법의 예시이다.

import { env } from '$env/dynamic/private'; 
const DEPLOYMENT_ENV = env.SECRET_API_KEY;

 

레퍼런스 https://joyofcode.xyz/sveltekit-environment-variables