[sveltekit] 2. .env 설정

sveltekit

 

1. 서론

개발을 할때도 그렇고 배포를 할 때도 그렇고 DB에 대한 접속 정보나 특정 포트, 키 값등을 내부적으로 저장해서 사용하는 경우가 있다.

소스 안에 해당 정보를 넣을 경우, 개발을 할때와 배포할때 혹은 각각 다른 개발자들의 로컬 단에서 개발을 하게 되면 접속 정보가 서로 맞지 않는 경우가 왕왕 생긴다.

그럴때 사용하는것이 .env 파일을 사용해서 특정 값에 대해 환경에 따라 값을 가져오는 방법이 있다.

여기에서는 sveletit에서 .env파일을 설정하고 사용하는 방법에 대해 정리한다.

 

2. .env 파일 생성

본인은 해당 파일을 주로 개발용과 배포용으로 나눠서 놓는다.

.env파일은 폴더의 최상단에 위치시켜놓으며 파일명은 다음과 같이 사용한다.

.env.development
.env.production

 

다음은 vscode에서 해당 파일을 만드는 방법이다.

 

 

vscode 최상단의 빈공간에서 마우스 오른쪽 클릭을 한 후 [새 파일...]을 선택한다.

 

 

파일명은 개발용 사용을 위해 [.env.production] 라고 입력한다.

 

###############################################################
## DB 접속정보
###############################################################
DB_HOST=host.docker.internal
DB_PORT=3306
DB_USERNAME=root
DB_PASSWORD=1234
DB_DATABASE=testDB

###############################################################
## 내부 URL 접속정보
###############################################################
PUBLIC_API_BASE_URL=http://localhost:
VITE_PORT=5173

###############################################################
## 토큰
###############################################################
JWT_SECRET_KEY=70cf6bf3ca7e31cc95c3f406cef8690350de162f150532352893ced2cec4b7064d5b3fffa8a4cce1069936c4c985441e71622bde6194d7038cd3067cf3a52a54																		# 토큰 비밀 키
JWT_EXPIRES_ACCESS=1															# 토큰 유효 기간(시)
JWT_EXPIRES_REFRESH=30															# 토큰 유효 기간(일)
JWT_EXPIRES_MG_REFRESH=365														# 토큰 유효 기간(일)

 

다음은 내가 개발을 위해 통상적으로 사용하는 값인데 어차피 로컬에서 사용하는 값이기에 예시로서 보면된다.

#을 이용해 주석을 표시할 수 있고 항목을 선언하고 = 후 해당 항목에 대한 값을 입력하면 됩니다.

모든 값은 string으로 해석되며 package.json에서 추가 설정을 하고나면 해당 값들을 가져가서 사용할 수 있다.

 

.env파일을 생성했다면 이제 사용을 위한 설정을 하도록 하자

 

 

다음은 최초에 프로젝트가 생성되었을 경우의 pakage.json의 script항목의 dev항목이고

 

다음과 같이 내용을 수정해주도록한다.

 

 

vite --mode development

 

이는 해당 프로젝트의 실행 명령어인

 

npm run dev

를 실행할 때 dev로 스크립트가 실행될때 추가로 실행되는 구문으로 해당 구문을 통해 .env.development 의 환경 값을 가져가 사용하게 된다.

 

이제 sveletkit에서 .env에서 환경값을 가져가 사용하는 방법이다.

 

현재 vite를 통한 환경 값을 가져오고 있으므로 개발 환경에서는 다음과 같이 사용할 수 있다.

 

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig, loadEnv } from 'vite';
import tailwindcss from '@tailwindcss/vite'

export default defineConfig(({ mode }) => {
	// Vite에서 환경 변수 로드
	// 환경변수는 root 위치의 .env 파일임.
	const env = loadEnv(mode, process.cwd(), '');
	
	return {
			plugins: [
				sveltekit(),
				tailwindcss()
			],
			server: {
				host: true,									// 해당 값이 없을 경우 docker에서 정상 실행되지 않음.
				port: parseInt(env.VITE_PORT || '5173'),	// 기본값 5173
			},
		};
	}
);

 

다음은 vite.config.ts를 설정하는 구문인데 해당 설정에 대한 설명은 다음에 하도록 하고

 

import { loadEnv } from 'vite';

 

최상단에서 다음과같이 vite를 호출하여 loadEnv 함수를 가져오고

 

const env = loadEnv(mode, process.cwd(), '');
env.[환경변수명]

 

을 사용하여 설정한 환경변수값을 가져와 사용할 수 있다.

 

실제 프로덕션 단계에서의 .env파일을 가져오는 방법은 약간 다르다.

프로덕션 환경에서는 node를 이용해서 프로그램이 빌드되므로 dotenv 라이브러리를 사용해서 가져오게된다.

 

해당 내용은 추후 글을 쓰도록 하고 자세한 내용은 해당 공식 사이트에서 확인할 수 있다.

https://svelte.dev/docs/kit/adapter-node#Environment-variables

Node servers • Docs • Svelte

 

3. 추후 내용

이제 환경파일 설정을 끝냈으므로 해당 프로젝트를 docker에서 빌드하는 방법을 포스팅 하려고한다.

추가로 port를 설정하는 방법도 같이 설명을 하려고하는데 docker를 사용하므로 크게 설정할 필요는 없는 내용이기는한다.