사내 npm 만들기

main

date

Oct 24, 2024

slug

npm-만들기

author

status

Public

category

Development

updatedAt

Jun 25, 2025 01:39 AM

팀 내에서 env를 어떻게 관리해야 직관적으로 관리할 수 있는지 고민하고 있다… 레포지토리만해도 수 십 개가 되는데 음.. 🤔

가장 먼저 든 생각은 팀 어드민 대시보드에서 등록 및 수정, 그리고 env export 를 생각했었다. 하지만 이 방법은 로컬에서도 env를 수정하고… 대시보드에서도 env를 수정 해야 하는 번거로움이 발생한다.

또한 팀원이 해당 프로젝트를 clone한다고 했을 때 env를 대시보드에서 다운로드해서 넣어줘야 한다. 그래서 프로젝트 구동 시 먼저 서버에서 env를 받아와 로컬에 생성해주는 방향으로 생각했다.


const axios = require('axios');
const fs = require('fs');
const path = require('path');

async function fetchEnvAndCreateFile() {
  try {
    // 서버에서 환경 변수를 받아옴
    const response = await axios.get('http:/localhost:4000/api/env');
    const envVariables = response.data;

    // .env 파일로 변환
    const envContent = Object.entries(envVariables)
      .map(([key, value]) => `REACT_APP_${key}=${value}`) //todo 키 명은 저장된 env 받아서
      .join('\n');

    // .env 파일 생성
    fs.writeFileSync(path.join(__dirname, '../.env'), envContent); //todo 파일 명은 서버에서 받아서
  } catch (error) {
    console.error(error);
  }
}

fetchEnvAndCreateFile();

그래서 서버 구동 및 빌드할 때 로컬에 env가 존재하지 않더라도 서버에서 받아서 사용 할 수는 있는데 전혀 관리랑 상관 없는 내용인 것 같아 다시 고민….. 또한 저 함수를 여러 프로젝트에 어떻게 적용을 할 것인가 (복붙????)

다시 생각해보자

이전에 만들어둔 대시보드에서는 env 변경 사항을 추적하도록 로그 및 env 정보를 기록한다.

env 변경은 로컬 기반으로 생성한다. (get post)

fetch 함수는 npm으로 관리하여 복붙을 하지 않고 install 받아서 공유될 수 있도록한다.

위 흐름대로 생각한 방향은 어드민 대시보드 서버에 env에 관한 find 와 save 관련한 api endpoint를 만들고 쿼리스트링에 따라 해당 env 정보를 반환한다. (쿼리스트링은 뭐… 프로젝트나 deploy 환경 정도 될 것 같다.)

로컬에서 env가 필요할 경우 서버에서 받아서 생성되도록 하고, env 파일 추가 및 수정이 이루어졌다면 save endpoint로 env 정보를 보낸다. (팀 내 env 파일 명은 4 종 정해져있다.)


enum Environment {
  LOCAL = 'local',
  DEVELOPMENT = 'development',
  STAGING = 'staging',
  PRODUCTION = 'production'
}

관련 함수는 사내 서버에 npm으로 생성하여 관리한다. 일단 작업 시작.

성공! 👍 🔥

남은 건 이제 env 히스토리 내역 조회, 변경된 점 보여주기

관련 포스팅