GitHub 등에서 웹 앱의 CI/CD를 할 수 있는 AWS Amplify입니다만,
이번에는 환경 변수를 설정하는 방법과 Amplify에서 호스팅하는 React 앱에서 읽는 방법을 비망록으로 남겨 둡니다.
(나중에 일본어 문서가 없었다)

React 등의 웹 앱에서는 .env 파일 등에 환경 변수를 정의하고,process.env.{任意の名前}에서 읽을 수 있다고 생각하지만,
자격증명 등을 기재하고 있는 경우는 소스 제어에는 올려지지 않고, Amplify로 환경 변수를 설정해 읽어들일 필요가 있습니다.

덧붙여서 Amplify에서는 백엔드의 구축도 가능합니다만, 환경 변수의 이용은 프런트 엔드만의 앱에서도 할 수 있습니다.
약간의 프런트 엔드만의 앱 만들어 환경 변수의 로드만 하고 싶은 경우, Amplify CLI를 사용한 백엔드의 구축 등은 하지 않고 환경 변수의 설정, 이용이 가능합니다.

환경 변수 설정

환경 변수 등록

Amplify에서 환경 변수를 정의하려면 먼저 AWS Console에서 Amplify 페이지로 이동하여
사이드 메뉴에서 환경 변수를 선택합니다.


환경 변수의 메뉴가 열리므로 「변수의 관리」로부터 변수의 등록・편집을 할 수 있습니다.
이번에는 React 앱으로 로드하므로 REACT_APP_ 를 변수명에 접두사로 붙여 둡니다.
또한 여러 브랜치를 호스팅하는 경우 브랜치별로 변수를 설정할 수 있습니다.

빌드 설정

그런 다음 메뉴에서 빌드 설정을 선택하여 다음 화면을 엽니다.

여기에서는 배포시의 빌드의 설정을 yaml 형식으로 정의할 수 있으므로, 여기서 환경 변수의 export를 합니다.
build의 commands에 ↓ 이런 느낌으로 써 둡니다.
출력하는 경로는 앱에 따라 변경됩니다. 이번에는 루트에 쓰고 있습니다.

echo "REACT_APP_HOGE=$REACT_APP_HOGE" >> .env

앱에서 로드

나머지는 앱에서

process.env.REACT_APP_HOGE

로 읽으면 완료입니다.

참고

Environment variables - AWS Amplify