[Sveltekit] 환경변수 설정 - 필수! 과정

개발 시스템 마다 다른 환경변수 세팅!

이번 게시글에서는 Sveltekit을 위한 환경변수 세팅을 해보겠습니다.

 

 

환경변수가 뭐냐면, 

환경에 따른 변수 입니다. (?)

 

로컬환경에서 테스트 할때와

개발서버에서 테스트 할때,

스테이지 서버에서 테스트 할때,

운영서버에서 실행할때

 

모두 api주소나 db주소가 다를 수 있습니다.

매번 값을 변경하고 서버에 올리는 일을 하긴 너무나 힘들고 번거롭고 실수하기 마련입니다.

환경에 맞춰서 변수를 바꿔주는 변수를 환경변수라고 합니다.

 

 

 

 

 

 

node.js에서 하는 방법 

nodejs같은 환경에서는 

.env 파일을 가지고 변수를 컨트롤합니다.

nodejs는 dotenv 라는 패키지를 사용합니다.

https://github.com/motdotla/dotenv

GitHub - motdotla/dotenv: Loads environment variables from .env for nodejs projects.

process에 env 객체를 만들어놓고, env파일로부터 읽어서 env객체에 변수를 세팅해주는 방법 입니다.

그리고 다른 코드에서는 env객체 안의 변수를 가져오는 방법으로 환경세팅을 합니다.

 

 

 

 

 

 

sveltekit에서 적용하는 방법

svelte는 기본적으로 vite를 이용해서 빌드를 하고 있기 때문에

dotenv같은 패키지를 안깔아도 이미 환경변수를 지원하고 있습니다.

 

 

0. 모드 (브랜치, 분기)

개발할때 수 많은 환경을 만들 수 있지만 대부분 아래와 같은 단계로 나눕니다.

1) local : 개발 컴퓨터에서 셀프 테스트 모드.

2) development : 개발용 서버에서 테스트 전용 모드

3) staging : 운영서버에 배포하기전 최종 테스트용 모드

4) preview : 운영서버 배포하기 전 최종 관찰용 모드. 왠만한 작은 규모의 회사에선 preview와 staging이 비슷한 느낌으로 구동되거나 한가지만 구동 됩니다.

5) production : 운영서버에서 고객을 위해 배포하는 모드.

 

1. env 파일 이름

.env                # 모든 상황에서 사용될 환경 변수 (최상위 환경변수)
.env.local          # 모든 상황에서 사용되나, 로컬 개발 환경에서만 사용될(Git에 의해 무시될) 환경 변수
.env.[mode]         # 특정 모드에서만 사용될 환경 변수
.env.[mode].local   # 특정 모드에서만 사용되나, 로컬 개발 환경에서만 사용될(Git에 의해 무시될) 환경 변수

 

개발용 env파일이름은 .env.development 가 되고.

로컬에서 테스트할 개발 모드는 .env.development.local이 됩니다.

사용할 모드의 파일들을 만들어 놓습니다.

 

 

2. env 파일 내용

key=value 형태로 값이 들어가며, 자동형변환이 되지않습니다.

그래서 문자일경우는 꼭 "" 쌍 따옴표를 넣어줘야 합니다.

URL="example.com"
KEY="12341qwer"
SOME_KEY=2

이런식으로 될 수 있습니다.

내용도 복붙이 심하면 틀릴수도 있습니다.

URL="example.com"
URL_A="example.com/A"
URL_B="example.com/B"
...

그래서 이런 불편함을 해소하는 dotenv-expand 패키지가 있지만 필요하신분은 직접 찾아보시기 바랍니다. 

 

하지만 저희는 sveltekit이죠?

# Private
SECRET_API_KEY=secret

# Public
PUBLIC_API_KEY=public

 

파일 내용은 이런식으로 적으며, key의 헤더에 SECRET 또는 PUBLIC이 붙습니다.

서버에 사용되며 비밀스런 데이터를 원할땐 SECRET을 붙이고, 

클라이언트에서 사용자들이 봐도 되거나, 볼수밖에 없는곳엔 PUBLIC을 붙여서 사용합니다.

 

이런 방법은 단순하면서도, 빌드를 하게 되었을때 실수로 키 값이 노출되는걸 알려줘서 사고를 사전에 방지할 수 있습니다.

 

 

*추가로 key값을 VITE_로 시작하는 변수는 자제...

 

 

 

 

 

 

 

3. env 적용해서 서버 실행하는 방법

package.json파일을 보면 scripts 부분에 dev, build, preview가 기본으로 세팅되어있습니다.

이 scripts는 우리가 서버를 실행할때 사용되는데. 

"$npm run dev" 명령어를 실행하면 "$npm run vite dev"명령어가 실행되는 것입니다.

vite dev는 개발환경(mode:development)이고, 

vite build는 운영서버를 위한 서버 파일을 만드는 과정이고, 이때 mode:production 로 실행됩니다.

vite preview는 mode:preview가 실행됩니다.

다른 모드를 사용하고 싶을땐 "--mode staging 또는 --mode testing" 을 이용하면 됩니다. 

scripts에 적용하고 싶으면 "vite build --mode staging" 이런식으로 변경하면 됩니다.

 

 

 

 

4. env 값 가져오는 방법

vite가 시작될때 env파일이 읽어지며, 파일이 변경되면 서버를 재시작 해줘야 합니다.

sveltekit은 hot-reload가 되기 때문에 서버를 직접 재시작할 필요는 없습니다.

console.log(import.meta.env.VITE_SOME_KEY) // 123
console.log(import.meta.env.DB_PASSWORD) // undefined

vite를 사용하는 js에서는 이런식으로 호출해서 가져옵니다. 

 

하지만 저희는 sveltekit이죠?

 

env파일에 적었던 환경변수를 가져올때 

static과 dynamic으로 값을 가져옵니다.

static은 파일에 적은 데이터를 고정적으로 가져올때 사용되고,

dynamic은 sveltekit이 실행되는 플랫폼에서 환경변수에 액세스 하는 곳입니다.

.env파일을 모드별로 적을 필요없이 플랫폼에서 환경변수를 설정하고, dynamic 설정으로 가져오면 됩니다.

 

import { PUBLIC_API_KEY } from '$env/static/public'

export async function load() {
  console.log(PUBLIC_API_KEY) // public 📣
}

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

export async function load() {
  console.log(env.SECRET_API_KEY) // secret 🤫
}

 

 

 

 

 

 

5. 마무리

즐코딩 되시고 

궁금한점은 댓글로 달아주세요~