엘리스 프로젝트를 하면서 서버 API를 요청할 때 Base URL을 직접 넣지 않고 "/api"로 접근하는 것이 좋다는 조언을 들은 적이 있다.
이렇게 하면 도메인을 바꾸더라도 코드 변경 없이 서버로 연결되기 때문에 확장성 있는 코드가 된다.
실제로 티니박스 프로젝트에서 main 브랜치는 실서비스 도메인(teenybox.com)으로 배포하고 dev 브랜치는 개발 도메인(dailytopia2.shop)으로 배포하여 두 개의 사이트를 사용하고 있는데, 이때 Base URL을 /api로 두면서 굳이 각 환경마다 URL을 변경해주지 않아도 돼서 유지보수가 편해졌다.
트러블 슈팅
근데 문제는... 이렇게 하다 보니 local 환경에서는 localhost:3000/api로 요청이 보내진다는 점!
그러다 보니 주석으로 바꿔가며 사용하다가 결국 /api도 지워지고 하드코딩이 되어버렸다.
이렇게는 안 되겠다 싶어서 .env를 사용하는 방법을 알아봤다.
처음엔 그저 저 (하드)코드를 .env에서 실행하며 깃허브에만 올라가지 않도록 할 예정이었는데, 알고 보니 파일 종류를 여러 개 두면 스크립트에 따라 자동으로 다른 파일이 실행되더라...!!!(구글링 하다 발견)
심지어 각 파일에 따라 우선순위도 있어서 다양한 활용이 가능할 것으로 예상
실제 배포할 때는 Github Actions를 통해 npm run build만 사용하도록 해놨고, 개발 중에는 npm start만 사용하므로
production에서는 /api, development에서는 배포 도메인 주소를 사용할 수 있도록 했다.
// .env.production
REACT_APP_BASE_URL=/api
// .env.development
REACT_APP_BASE_URL=https://dailytopia2.shop/api
// apiUrls.js
const root = process.env.REACT_APP_BASE_URL;덕분에 하드 코딩 없이 수월하게 진행할 수 있었다.👍🏻
CRA 에서 ENV(환경 변수) 사용법
CRA(Create-React-App)를 사용한 경우 위 예시와 같이 REACT_APP_으로 시작하도록 변수를 등록할 수 있다.
사용할 때는 process.env.변수명으로 쓸 수 있다.
⚠️ CRA가 아닌 다른 환경에서는 정상 작동하지 않을 수 있다.
라이브러리를 깔거나 환경에 맞는 사용법을 확인할 것!
예외로 REACT_APP으로 시작하지 않는, 내장된 환경 변수인 NODE_ENV가 있다.
NODE_ENV는 실행 환경 정보를 담고있으며, CRA에서 자체적으로 설정되어 변경할 수 없다.
npm start -> development
npm test -> test
npm run build -> production
실제로 해봄
- npm start
- serve -s build
(빌드 환경에서는 http://localhost:57511/api로 요청이 가서 에러가 나는 걸 확인할 수 있음)
이를 잘 활용하면 이런 식으로도 사용 가능하다.
export const BASE_URL;
if (process.env.NODE_ENV !== 'production') {
BASE_URL = "/api";
}
하지만 이번 프로젝트에서는 파일을 나눠서 사용하는 걸로 해결했다.
- 직접 생성한 코드보단 파일이 더 믿음직함
- 개발용 배포 서버 말고 실서비스 api를 테스트하고 싶을 때 .env 파일에서 도메인을 변경하면 깃에 변경된 코드가 올라가지 않는다(.gitignore 추가 필수).
참고 자료
