esbuild 번들링 시 환경변수 관리하기

문제 상황

현재 사내 서비스는 자체적으로 개발/배포하는 github private package를 사용하고 있습니다.

해당 패키지에서는 각 운영 환경에 따라 달라지는 값들이 존재하는데...

// some-module.ts
class Module {
    // private BASE_URL = 'https://production.com';
    // private BASE_URL = 'https://development.com';
}

(대표적으로, 개발 OR 배포에 따라 end-point인 server 주소가 달라지는 모습)

이러한 값들을 개발자가 배포 시 일일이 변경해 상당한 비효율이 발생했습니다!

 

즉 개발 환경 배포 시에는 → BASE_URL을 development.com으로

프로덕션 환경 배포 시에는 → BASE_URL을 production.com으로 변경해줘야 했는데...

 

매 배포 직전마다, 개발자가 확인 후 임의로 해당 값들을 변경하다 보니

반복작업 + 실수 가능성 큼(깜빡하고 프로덕션 환경에 개발 환경 주소가 반영된다거나)과 같은 문제가 발생했습니다.

 

해결 방안

따라서 해당 값들을 환경 변수(env)로 관리하고,

파일 번들링 시, publish 타입에 따라 알맞은 환경 변수 내 값들이 반영될 수 있게 하였습니다.

이때 번들러로 esbuild를 사용 중!

1. env 파일 작성

각 환경 별 env 파일을 작성합니다.

// .env.development
BASE_URL='https://development.com'

// .env.production
BASE_URL='https://production.com'

 

2. esbuild.config 내 define 옵션 적용

빌드 시 실행될 esbuild.config 파일을 작성합니다.

 

esbuild는 define 옵션을 통해, 파일 내 전역 식별자를 상수 표현식으로 변경할 수 있습니다.

https://esbuild.github.io/api/#define

esbuild - API

 

이 때 제가 원하는 건

1. build:dev시, env.development 내 작성된 환경 변수로 변경

2. build:prod시, env.production 내 작성된 환경 변수로 변경

// esbuild.config.js

const define = {};

for (const k in process.env) {
  define[`process.env.${k}`] = JSON.stringify(process.env[k]);
}

require('esbuild')
  .build({
    entryPoints: ['src/index.ts'],
    outdir: 'dist',
    //...
    define, // here!
  })
  .catch(() => process.exit(1));

따라서 우선적으로 process.env를 순회하며, 각 key-value 값들을 define 옵션으로 지정해 줬습니다.

 

3. publish script 변경

기존에는 yarn publish 명령어를 통해 main 경로의 파일을 배포했습니다.

(prepublish를 지정해, build후 publish가 이뤄지도록 함)

 

제가 원하는 건 yarn publish:[환경] 명령어를 통해,

[환경]에 해당하는 환경 변수 파일을 참조할 수 있게 만드는 것!

 

https://www.daleseo.com/js-dotenv/

dotenv로 환경 변수를 .env 파일로 관리하기

 yarn add -D dotenv

Node.js에서 환경 변수를 사용하기 위해 dotenv를 설치한 후,

 

// package.json
 "scripts": {
    "build:dev": "DOTENV_CONFIG_PATH=.env.development node -r dotenv/config scripts/esbuild.config.js",
    "build:prod": "DOTENV_CONFIG_PATH=.env.production node -r dotenv/config scripts/esbuild.config.js",
  },

dotenv/config에 환경 변수를 넘겨준 모습!

build 명령어 실행 시, postfix에 따라 각기 다른 env 파일을 참조하게 되었습니다.

 

// package.json
 "scripts": {
    "build:dev": "DOTENV_CONFIG_PATH=.env.development node -r dotenv/config scripts/esbuild.config.js",
    "build:prod": "DOTENV_CONFIG_PATH=.env.production node -r dotenv/config scripts/esbuild.config.js",
    
    "publish:dev": "yarn build:dev && yarn publish",
    "publish:prod": "yarn build:prod && yarn publish"
  },

publish 명령어 역시 postfix에 맞는 build script가 실행될 수 있도록 해준 모습!

 

결과

// 프로그램 내 사용처.ts

// private BASE_URL = 'https://production.com'
private BASE_URL = process.env.BASE_URL // 수정!

기존 하드코딩 되어었던 값들을 환경 변수를 참조하도록 변경한 뒤, 번들링 해줍니다.

yarn publish:dev시 dist파일(번들링 결과물)

yarn publish:prod시 dist파일(번들링 결과물)

 

일일이 값을 수정하지 않고도, 빌드 시 설정한 환경에 맞는 값으로 변경됨을 확인할 수 있습니다.