nginx를 사용하여 React를 빌드하는 과정에서
api가 제대로 읽히지 않은 이슈가 발생했다.
로컬에서는 잘됐는데 빌드하니 서버연결이 안돼서 당황했고, 잘 살펴보니
Cannot read property 'protocol' of undefined라고 한다.
개발자 도구를 확인하니 port 넘버는 제대로 가져오는데 url이 undefined였다.
react에서 env파일작성 후 api가 제대로 작동되지 않는 경우에는 vscode를 전제를 다 닫은 후 다시 실행했을때 됐었는데(왜 그런지모를..다른분 글에서도 전체 닫고 다시 실행했다는데.. 진짜 모를...) 빌드때는 조금 달랐다.
나는 env 파일에 여러개의 url과 port를 사용했다.
이유는 하나의 페이지(툴)에
여러개의 호출변수들을 만들어야했는데
내 기준으로 봤을때 많지 않아서 하나의 env.dev 파일안에 다음과 같이 넣었다.
*글 하단에 나눠야하는 이유 설명
그리고 package.json에서
scripts의 build부분을
env-cmd -f .env.dev react-scripts build로 변경했다.
기존에는 start부분에만
env-cmd -f .env.dev react-scripts start를 했었는데
추가된 개발환경 url+port 생성에 적용이 안되는 부분을 찾다가
빌드에도 작성했다니 바로 적용되었다 .
그리고 이렇게 사용한 이유를 찾던 중
env-cmd -f .env.dev react-scripts build 명령어는 다음과 같은 이유로 사용됩니다:
- 환경 설정 로드: .env.dev 파일에 정의된 환경 변수를 로드하여 빌드 과정에서 사용합니다.
- 환경별 구성: 서로 다른 환경(dev, test, prod)에 맞춰 애플리케이션을 빌드할 수 있습니다.
3.React 애플리케이션 빌드: Create React App의 빌드 스크립트를 실행하여 최적화된 정적 파일을 생성합니다.
이렇게 하면 개발 환경에 맞춘 설정 값으로 애플리케이션을 빌드할 수 있게 됩니다.
라고 한다.
- 해당 이슈를 해결하기위해 다른 블로그에서 글을 읽으면서 배포환경마다 env 파일을 따로 저장하는것이 바람직하다고 한다.
- 각각의 변수를 관리하기 쉽고
- 혹시 모를 다른변수에 영향주거나, 배포시 실수하는 일을 줄일 수 있기 때문이다.
이번 프로젝트는 나 혼자하는 규모가 작은 부분이었음지만 그래도 환경별로 나눠서 관리해보려고 한다.
