[React, express] 배포/개발 환경 나누기

프로젝트에서 로컬/배포 환경에서 각각 따로 설정해주어야 하는 부분이 있었는데, 매번 배포할 때마다 코드 일부분을 수정했다. 너무 번거롭기도 하고, 맞는 방법이 아닌 것같아서 개발 모드와 배포 모드 각각의 환경에서 다르게 동작할 수 있도록 코드를 수정해주었다.

 

node환경에서 개발 모드를 감지하려면 process.env.NODE_ENV를 확인해주면 된다.

 

1. React

if (process.env.NODE_ENV === 'development') {
  // development 환경일 때 실행할 코드
} else {
  // development 환경이 아닐 때 실행할 코드
}

이런 식으로 process.env.NODE_ENV가 'development'인지 또는 'production'인지 확인해주는 if문을 통해서 분기 처리를 해줄 수 있다.

 

실제로 프로젝트에서는 아래처럼 사용했다.

constants/index.ts

const BACKEND_PORT_NUMBER = '5001';

export const SERVER_URL = (() => {
  if (process.env.NODE_ENV === 'development') {
    return `${window.location.protocol}//${window.location.hostname}:${BACKEND_PORT_NUMBER}`;
  }
  return `http://${window.location.hostname}:${BACKEND_PORT_NUMBER}/api`;
})();

 

2. Node.js(express)

일단 express의 root디렉토리에 있는 app.mjs에 아래와 같이 NODE_ENV를 전역적으로 지정해준다.

app.mjs

process.env.NODE_ENV =
  process.env.NODE_ENV && process.env.NODE_ENV.trim().toLowerCase() == 'production' ? 'production' : 'development';

이렇게 하면 이 앱 어디에서나 사용할 수 있다.

 

그리고 아래처럼 NODE_ENV 값에 따라 하고 싶은 일을 함으로써 개발과 배포용 코드를 따로 분리할 수 있다.

if (process.env.NODE_ENV === 'development') {
  app.use('/', router);
} else {
  app.use('/api', router);
}

 

이렇게만 하면 끝인 줄 알았으나 자꾸 배포환경에서 오류가 발생했다.

터미널에서 export NODE_ENV=production을 입력하면 된다는데, 그래도 되지 않았다. :-(

그래서 package.json의 scripts에서 NODE_ENV를 따로 설정해주는 것으로 해결했다.

package.json

"scripts": {
  // ...
  "build": "NODE_ENV=production node index.js"
},

 

 

References

https://stackoverflow.com/questions/35469836/detecting-production-vs-development-react-at-runtime

https://ui.toast.com/weekly-pick/ko_20191212

https://steemit.com/kr/@inspiredjw/node-js-nodeenv