리엑트 빌드시 개발환경에 따라 API 주소 설정 (Custom Environment)

웹프로젝트 개발시 개발,QA,상용 서버로 개발환경을 나누게 됩니다.
그럴 경우 각 환경에 따라 API 주소가 https://dev.service.com, https://qa.service.com 등으로 다르게 되는데
리엑트에서 빌드시 환경에 따른 API주소를 설정하는 방법을 알아보려고 합니다.

빌드시 각 환경은 아래와 같은 명령으로 구분하겠습니다.

1
$ yarn build <dev | qa | prd>

우선 create-react-app으로 프로젝트 생성을 합니다.

1
$ create-react-app <project-directory>

BuildConfig.js 생성

기존 설정파일 수정을 최소한으로 하는 방향으로 구성했습니다.
리엑트에서 커스텀 환경변수를 사용하기 위해서는 REACTAPP 로 시작하는 환경변수를 사용해야 합니다.
리엑트에서 기본으로 PUBLIC_URL 변수가 있지만 REACT_APP_SERVICE_URL 로 따로 지정해서 사용하겠습니다.

1
process.env.REACT_APP_SERVICE_URL = serviceUrl

아래 파일을 생성 후 코드를 작성합니다.
/tasks/BuildConfig.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
class BuildConfig {

	constructor () {
		let processEnv, serviceUrl

		const processArgv = process.argv
		this.currentEnv  = processArgv[2] // dev | qa | prd Argument 담는 변수 

		switch (this.currentEnv) {
			case 'dev':
				processEnv = 'development'
				serviceUrl = 'https://dev.service.com'
				break
			case 'qa':
				processEnv = 'production'
				serviceUrl = 'https://qa.service.com'
				break
			default:
				processEnv = 'production'
				serviceUrl = 'https://www.service.com'
		}

		process.env.REACT_APP_SERVICE_URL = serviceUrl
		process.env.BABEL_ENV   = processEnv
		process.env.NODE_ENV    = processEnv
	}

	getConfigData () {

		const data = {
			config: this.getConfig()
		}

		return data

	}

	getConfig () {
		let config

		switch (this.currentEnv) {
			case 'dev':
				config     = require('../configs/webpack.config.dev')
				break
			case 'qa':
				config     = require('../configs/webpack.config.prod')
				break
			default:
				config     = require('../configs/webpack.config.prod')
		}

		return config
	}
}

const buildConfig = new BuildConfig()
const data   = buildConfig.getConfigData()

module.exports = data

빌드 코드 수정

/tasks/build.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const { config, timestamp } = require('./buildConfig')

// Do this as the first thing so that any code reading it knows the right env.
//process.env.BABEL_ENV = 'production'; // 주석처리
//process.env.NODE_ENV = 'production';  // 주석처리

// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
  throw err;
});

// Ensure environment variables are read.
require('../configs/env');

const path = require('path');
const chalk = require('chalk');
const fs = require('fs-extra');
const webpack = require('webpack');
//const config = require('../configs/webpack.config.prod'); // 주석처리
const paths = require('../configs/paths');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
const printBuildError = require('react-dev-utils/printBuildError');

  ...

여기까지 작성하면 빌드 설정관련 작업은 끝납니다.
이제 위에서 할당한 환경변수 사용방법을 알아 보겠습니다.

REACT_APP_SERVICE_URL 변수 사용방법

axios의 baseURL에 할당하면 다른 컴포넌트에서 편하게 사용할 수 있습니다.

/src/axios.js

1
2
3
4
5
import axios from 'axios'

axios.defaults.baseURL = process.env.REACT_APP_SERVICE_URL

export default axios

빌드

위 작업을 다 마치고 빌드를 하게되면 개발환경에 맞는 API주소로 통신을 하게 됩니다.

1
$ yarn build <dev | qa | prd>

위 코드를 조금 더 수정하면 빌드시 원하는 작업을 쉽게 추가할 수 있습니다.

필요하신 분들은 활용하시면 좋을거 같습니다.

Resource