환경변수 사용하기

환경변수는 고정된 값이 아닌 변수를 사용하게 해 주어 개발환경과 프로덕션환경 사이에서 필요한 설정 값을 변경할 필요 없이 한 번의 설정으로 모두 적용되게 하며, 민감한 정보의 노출을 숨길 수 있는 장점이 있습니다 (프로젝트 빌드 파일에 포함되므로 완벽히 보호되는 것은 아님).

 

웹 애플리케이션을 만드는데 다양한 프레임워크와 도구가 사용되는 만큼 환경변수를 지정하는 방법도 조금씩 다르므로 다양한 예시를 통해 환경변수를 설정하는 방법을 볼까 합니다.

목차

• 공통사항
• 프론트엔드
  • 앵귤러
  • 리액트
• 백엔드
  • 노드제이에스
  • 닷넷 에이피아이
  • 스프링 부트

공통사항

환경변수를 저장하는 파일을 생성하는 경우, 깃 등 형상관리 도구에 해당 파일을 숨기기 위해 .gitignore 파일에 추가합니다 (커밋하면 번거로워지기 때문에 파일 생성 후 바로 목록에 추가하는 것을 권장합니다).

/* .gitignore */

# .env
.env

프론트엔드

앵귤러

앵귤러의 경우 environments라는 폴더가 프로젝트 생성 시 자동 생성되지 않은 경우 두 가지 방법으로 추가 가능합니다.

 

첫 번째는 아래 CLI 커맨드를 사용하는 방법

ng g environments

다른 방법은 src아래 만들고 그 안에 개발환경변수와 프로덕션변수 파일을 아래와 같이 생성하는 방법입니다.

environment.prod.ts

environment.ts

어느 방법을 택하든 파일 안에 값은 아래와 같이 직접 넣어주어야 합니다.

// environment.prod.ts

export const environment = {
  production: true,
  url: 'http://localhost:3000/'
}

// environment.ts

export const environment = {
  production: false,
  url: 'http://localhost:3000/'
}

▶ 사용하기

환경변수 지정파일을 가져오고 environment 다음에 지정한 이름을 통해 사용

▶ 자동치환 설정

배포 시 자동으로 프로덕션  변수를 사용하도록 angular.json 파일의 프로덕션 설정에 아래 설정코드를 추가합니다

"fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.prod.ts"
  }
],

리액트

설정을 위해 먼저 루트에 .env라는 파일을 만들고 사용할 변수를 지정합니다. 변수병은 아래와 같이 지정합니다.

/* .env */

REACT_APP_<name> = "http://localhost:whatever"

▶ 사용하기

설정한 변수는 아래와 같이 프로세스 이엔브이 다음에 지정한 변수명으로 가능합니다.

process.env.<name>

백엔드

노드제이에스

설정을 위해 먼저 루트에 .env라는 파일을 만들고 사용할 변수를 지정합니다. 주로 모두 대문자로 작성하며 단어 간 구분은 언더바로 합니다.

/* .env */

MG_LINK = "http://localhost:whatever"

▶ 사용하기

설정된 변수의 사용을 위해서는 .env 파일을 공유하게 해 주는 패키지의 설치가 필요한데요. 콘솔에 아래와 같이 패키지를 설치합니다.

npm i dotenv

이후 서버를 연결하는 파일에서 아래와 같이 구성설정을 하면 환경변수의 사용이 가능해집니다.

/* app.js */

require("dotenv").config();

사용은 아래와 같이 'process.env + 변수명'의 형태로 호출합니다.

/* config/mongo-db.js */

const mongoose = require("mongoose");

exports.mongoDB = () => {
  mongoose
  .connect(process.env.MG_LINK)
  .then(() => console.log("mongodb connected"))
  .catch(() => console.log("mongodb connection failed"));  
}

닷넷 에이피아이

에이피아이 폴더 안에 아래와 같이 두 설정파일이 있는데 이곳에 환경변수 설정합니다.

appsetting.json

appsetting.Development.json

▶ 사용하기

닷넷의 환경변수는 사용하는 방법이 여러 가지입니다.

 

커넥션 스트링이라는 변수 명으로 지정한 경우 아래와 같이 커넥션스트링을 가져오는 메서드를 통해 커넥션 스트링 하위에 지정한 변수들의 이름을 통해 사용합니다

커넥션 스트링처럼 지정된 변수명이 제공되지 않는 경우는 IConfiguration 인터페이스를 주입하고 이를 통해 해당 변수를 사용합니다. 하나의 변수 내에 여러 변수명이 있는 경우 콜론 ':'을 사용하여 구분합니다.

스프링 부트

스프링 부트는 application.properties 파일을 사용해서 환경변수를 추가합니다 (이름이나 수 제한 없음).

설정한 변수사용은 아래 문법을 사용

${<varName>}

이상으로 환경변수를 설정하고 사용하는 방법에 대해 알아보았습니다.