React 프로덕트를 AWS Amplify를 이용해 배포 시 환경 변수를 통해 간편하게 개발과 운영 환경을 분기할 수 있습니다.

예를 들어 요청 API 도메인이 개발과 운영이 다른 경우 요청 도메인을 외부 변수로 빼서 관리를 해야합니다. 이를 기존에는 .env를 통해 처리했지만 Amplify에서는 환경 변수를 세팅할 수 있는 기능을 제공합니다.

AWS Amplify > 앱 설정 > 환경 변수 > REACT_APP_API_URL 변수명을 추가하고 해당하는 API URL을 넣어줍니다. 하나의 앱환경에 Git 브랜치 별로 구성되어있다면 대상 브랜치도 선택할 수 있습니다.

설정된 REACT_APP_API_URL 이라는 변수는 React 소스상에서 기존 .env 환경 변수 사용법과 동일하게 process.env.REACT_APP_API_URL로 설정 값을 사용할 수 있습니다.

단, 이미 배포된 상태에서 환경 변수를 추가하는 경우 적용되지 않고 재배포를 해야 추가/변경된 환경변수가 적용됩니다.