[Svelte] .env 빌드환경 설정 및 프로퍼티 사용하기 (dotenv, rollup)

빌드환경에 해당하는 .env 파일 사용하기

먼저, 필요한 노드모듈을 설치한다.

npm install --save-dev dotenv @rollup/plugin-replace

 

빌드환경은 로컬PC(local), 개발서버(development), 운영서버(production) 총 3가지로 분류할 것이며 이를 Mode라 명칭할 것이다.

프로젝트 루트경로에 모드별 .env 파일을 생성하고 프로퍼티를 작성한다.

.env.local (mode: local)

.env.dev (mode: dev)

.env.real (mode: real)

 

앱 실행 스크립트에 mode 환경변수를 추가한다.

--environment MODE:[모드]

// package.json
{
  "scripts": {
    "build-development": "rollup -c --environment MODE:real",
    "build-production": "rollup -c --environment MODE:dev",
    "local": "rollup -c -w --environment MODE:local",
    "start": "sirv public --single --host 127.0.0.1"
  }
}

 

앱 실행 시 모드에 해당하는 .env 파일을 사용하도록 rollup.config.js를 수정한다.

import dotenv from 'dotenv';

dotenv.config({
	override: true ,
	path: ".env." + process.env.MODE
});

const isLocal = process.env.IS_LOCAL;

 

 

svelte 컴포넌트에서 Property 사용하기 (process.env 사용불가함)

rollup.config.js에서 replace 플러그인을 설정해준다.

export default {
  ....
  plugins: [
    replace({
      // stringify the object       
      __myapp: JSON.stringify({
        env: {
          "isLocal": isLocal,
          "baseUrl": process.env.BASE_URL
        }
      }),
    }),
  ],

 

컴포넌트에서 __myapp.env.xxx 로 사용할 수 있다.

<script>
const isLocal = __myapp.env.isLocal

if (isLocal){
	//
}
</script>

{isLocal}

 

---

https://medium.com/dev-cafe/how-to-setup-env-variables-to-your-svelte-js-app-c1579430f032

How to setup .env variables to your Svelte JS app