깃헙 액션으로 빌드 후 배포까지 성공했는데 dotenv 를 읽어오지 못하는 경우
.env 환경변수 파일은 보통 ignore 처리를 해두기 때문에 커밋에 반영되지 않는다.
따라서 빌드 / 배포 자동화 시 별도 처리가 필요하다.
vue-cli 나 create-react-app 을 사용할 경우 빌드 시 루트 경로에 있는 .env 파일을 알아서 환경변수로 등록해주므로 올바른 위치에 .env 만 위치시킨다면 process.env 를 통해 환경변수에 접근할 수 있다.
해결
배포 환경의 루트 경로에
.env를 생성하는 bash script 를 워크플로우 파일에 추가해 이를 빌드시 사용할 수 있도록 한다.
과정
1. 필요한 환경변수를 해당 깃허브 레포지토리 secrets 에 등록하기
그래야 깃헙 액션 job 이 실행될 때 해당 값을 가져올 수 있다.
커밋에 .env 가 포함되지 않으므로 action workflow 과정에서 로컬의 .env 를 읽을 수 없는게 당연한데 이걸 생각 못해서 이상한 설정 변경하면서 한참 삽질했다.
해당 레포지토리 > Settings > Security > Actions > New repository secret 에서 key-value 를 추가할 수 있다.
-> 이는 action workflow 중 {{ secrets.$KEY }} 와 같이 접근 가능
요런 식으로 추가해준다.
2. workflow 에 .env 생성 스크립트 작성
웹 앱이라면 기본적으로
체크아웃 -> 의존성 패키지 설치 -> 빌드 -> 호스팅 서비스로 배포와 비슷한 형태를 띌 것이다.
빌드 전에 환경변수 파일을 만들어주면 된다.
- workflow.yml
...
jobs:
deploy:
runs-on: ubuntu-latest
steps:
# 체크아웃
- name: Checkout Repo
uses: actions/checkout@v2
# 패키지 설치
- name: Install Dependencies
run: npm ci
working-directory: ./monorepo
# .env 생성
- name: create dotenv
run: |
touch ./monorepo/.env
echo "YOUR_KEY1=${{ secrets.YOUR_KEY1 }}" >> ./monorepo/.env
echo "YOUR_KEY2=${{ secrets.YOUR_KEY2 }}" >> ./monorepo/.env
# ... 빌드 후 배포touch 로 원하는 위치에 .env 를 생성한 뒤 1 에서 등록한 키를 해당 파일에 작성한다.
내 경우 모노레포 형식으로 특정 폴더에서 .env 를 찾아야 해 해당 경로인 ./monorepo 를 입력했다.
루트 경로에 생성하고 싶을 경우 touch .env 로만 해도 무방.
그리고 빌드하면 번들러가 .env 경로로 설정된 위치를 찾아 환경변수로 등록해준다.
