amplify에서 NODE_ENV = production을 설정하고 리액트를 배포하면 빌드에러가 난다?

amplify에서 NODE_ENV = production을 설정

회사에서 amplify를 이용해서 배포를 하는데, 배포가 되지 않은 상황에 대한 리포트이다.

1. npm ERR! command sh -c --husky install

amplify로 리액트 어플리케이션을 배포하는데 빌드에러가 났다.

 

처음에는 husky 에서 에러가 났다.

npm run build가 돌기 전 npm install 도중에 나타나는 에러였다.

처음부터 지금까지 변한것이 없는데 왜 갑자기 husky에서 에러가 나지?? 하는 의아함이 들었지만 일단 husky는 production에서 패스하도록 package.json을 변경하고 재배포했다.

// package.json

"script":{
  "prepare": "if [[ $NODE_ENV != \"production\" ]]; then husky install; fi",
}

위와 같이 재배포하니 husky를 건너뛰고 바로 npm build로 넘어갔다.

2. typescript 모듈을 찾을 수 없어

그런데 build에서 typescript모듈을 찾을 수 없다는 메시지가 떴다.

 

npm install 이후에 build를 하기 때문에 있을 수 없는 일이라고 생각해서 옆팀 백엔드 개발자 분께 도움을 요청했다.

 

그분도 의아하다고 생각하시고, 리스크가 있지만 main과 연결된 배포환경을 리셋시키자고 제안하셨다.

 

방법은 다음과 같다.

1. 배포할 adm-v2.2.0 브랜치를 배포해봄
2. adm-v2.2.0 이 정상 작동 하는 것이 확인되면 main을 날림
3. adm-v2.2.0을 main에 밀어넣고 재배포

위와 같이 main을 재배포 하니 모든것이 다 잘 작동하였다.. 는 착각을 했다.

 

해결된 줄 알았는데, 자세히 보니 main브랜치의 환경변수들이 dev로 설정되어 있었다.

 

3. 원점으로

환경변수를 아래와 같이 main브랜치에 production이 꽃히게끔 설정하고 재배포 하였다.

그러자 다시 맨 처음과 똑같은 상황이 발생하였다.

 

production일때만 타입스크립트를 불러오지 못한다?? devDependencies에만 typescript가 있나?? 하고 package.json을 보니 그렇지 않았다.

 

원점으로...

 

4. 문제가 되는 환경변수만 지워보자

나는 에러메시지에 매몰되어 있었는데, 팀 동료분이 우회하여 문제를 해결 할 수 있는 방식을 제안해주셨다.

 

문제가 되는 환경변수 NODE_ENV를 development로 변경하고 main을 배포해보자고 하셨다.

 

그렇게 배포하니 잘 되었다.

 

코드를 보니 NODE_ENV를 사용하는 코드가 없었다.. 띠용.. 그럼 왜있는거지..

 

알게 된 것

1. 일단 코드에는 NODE_ENV가 없음
2. amplify에서 NODE_ENV를 development로 설정하고 콘솔이 찍히게끔 코드를 설정하고 배포했을때, NODE_ENV가 production으로 찍힘
   1. amplify에서 설정한 NODE_ENV는 리액트 어플리케이션 동작에 영향을 미치지 않는다. 그런데 배포에는 영향을 줌
   2. REACT_APP을 안붙혔기 때문
3. 그럼 NODE_ENV는 도데체 뭘까??
   
   1. 이 글에 보면 build하면 NODE_ENV는 무조건 production이고, npm start하면 development라고 한다

There is also a built-in environment variable called NODE_ENV. You can read it from process.env.NODE_ENV. When you run npm start, it is always equal to 'development', when you run npm test it is always equal to 'test', and when you run npm run build to make a production bundle, it is always equal to 'production'. You cannot override NODE_ENV manually.

 

결론 : 아 ! NODE_ENV는 리액트 내부에서 설정해주는 값이라, amplify에서 설정하는것과 관련이 없구나! 다만 배포시에 리액트의 내부 로직과 관계없는 NODE_ENV가 나타나서 어디선가 빌드가 꼬인거군

 

아쉬운 점  : 그럼 왜 지금까지는 문제가 없었다가 이제서야 문제가 나타난거지.. amplify의 빌드 로직이 수정된건가..

관련해서 아무리 검색을 해봐도 NODE_ENV를 환경변수로 넣고 리액트를 배포하는 경우가 없었다.

아마 우리만 그런 짓을 한 것 같다.

 

명확한 근거를 찾지 못하고 여러 시도를 통해 귀납적으로 해결한 것이 아쉽다.