FE/React
[React, express] 배포/개발 환경 나누기
SH_Roh
2023. 2. 8. 03:11
반응형
프로젝트에서 로컬/배포 환경에서 각각 따로 설정해주어야 하는 부분이 있었는데, 매번 배포할 때마다 코드 일부분을 수정했다. 너무 번거롭기도 하고, 맞는 방법이 아닌 것같아서 개발 모드와 배포 모드 각각의 환경에서 다르게 동작할 수 있도록 코드를 수정해주었다.
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
반응형