react-native dotenv 설정하기

 react-native-dotenv란

React Native 애플리케이션에서 .env 파일을 활용할 수 있도록 도와주는 라이브러리다. 이를 통해, 애플리케이션에서 사용되는 환경 변수들을 관리할 수 있다.

라이브러리 설치

react-native-dotenv을 기본적으로 설정하며 TypeScript를 함께 사용하는 경우 @types/react-native-dotenv를 함께 설치한다.

 

# npm
$ npm i react-native-dotenv

# yarn
$ yarn add react-native-dotenv

 

babel.config.js 수정

나의 경우에는 expo를 사용하고 있기 때문에 expo와 같이 사용할 수 있게 수정했다.

module.exports = function(api) {
  api.cache(true);
  
  return {
    presets: [
      'module:metro-react-native-babel-preset',
      'babel-preset-expo',
    ],
    plugins: [
      // react-native-dotenv
      [
        'module:react-native-dotenv',
        {
          "envName": "APP_ENV",
          "moduleName": "@env",
          "path": ".env.local",
          "blocklist": null,
          "allowlist": null,
          "blacklist": null, 
          "whitelist": null, 
          "safe": false,
          "allowUndefined": true,
          "verbose": false
        },
      ],
    ],
  };
};

expo를 사용하지 않는 경우는 아래와 같이 설정한다.

module.exports = {
	presets: ['module:metro-react-native-babel-preset'],
	plugins: [
		// react-native-dotenv
		[
			'module:react-native-dotenv',
			{
				"envName": "APP_ENV",
				"moduleName": "@env",
				"path": ".env.local",
				"blocklist": null,
				"allowlist": null,
				"blacklist": null, 
				"whitelist": null, 
				"safe": false,
				"allowUndefined": true,
				"verbose": false
			},
		],
	]
}

 

속성	설명
envName	.env 파일에서 로드할 환경 변수 이름
moduleName	앱에서 process.env를 통해 접근할 수 있는 모듈 이름
path	.env 파일 경로
blocklist	블랙리스트로 지정된 키를 제외한 모든 키를 가져옴
allowlist	화이트리스트로 지정된 키만 가져옴
blacklist	블랙리스트로 지정된 키를 제외함 (이전 버전과의 호환성을 위해 사용)
whitelist	화이트리스트로 지정된 키만 가져옴 (이전 버전과의 호환성을 위해 사용)
safe	true로 설정 시 .env 파일에서 민감한 정보가 노출되지 않음
allowUndefined	true로 설정 시 .env 파일에서 정의되지 않은 변수에 대한 경고를 표시하지 않음
verbose	true로 설정 시 .env 파일에서 불러온 모든 환경 변수 이름을 로그에 출력함

 

 .env 파일을 생성

javascript 용

API_URL=http://localhost:8000

typescript용

declare module '@env' {
    export const API_URL: string;
}

 

 

.env 파일 불러오기

 

import { API_URL } from '@env';

const App = () => {
    console.log("APP_URL :: ", API_URL)
}

 

환경 분리하기

local 환경

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module:react-native-dotenv',
        {
          moduleName: '@env',
          path: '.env.local',
          blacklist: null,
          whitelist: null,
          safe: false,
          allowUndefined: true,
        },
      ],
    ],
  };
};

prod 환경

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module:react-native-dotenv',
        {
          moduleName: '@env',
          path: '.env.prod',
          blacklist: null,
          whitelist: null,
          safe: false,
          allowUndefined: true,
        },
      ],
    ],
  };
};

pacakage.json : 실행 스크립트

 

.env 파일을 수정하기에 react-native의 캐시를 초기화하는 작업을 포함되어 있다.

"scripts": {
    "start:clean": "npx react-native start --reset-cache",
  },