Firebase 활용한 토이 프로젝트 hosting 설정을 마치고 배포를 했지만 추가 및 수정 하게되면 매번 build후 Firebase deploy을 통해 배포를 해야한다. 그래서 이 번거로움을 해결하고자 Github Actions 및 Firebase hosting 재설정을 통하여 자동 배포로 변경하려고 한다.
Firebase hosting 설정
-
먼저 hosting 시작 후 Firebase login을 통해 Firebase init으로 다시 설정을 한다.
-
Firebase에서 시작할 기능으로 hosting을 선택
- build 되는 public 폴더를 dist로 설정
- single-page-app으로 구성
- github에서 자동 배포 선택 (처음 배포할때 선택하지 않았음)
- 전에 build한 index 파일로 덮어쓰기 선택
- 이 과정을 거치면 Github 연결을 위한 인증을 통하고 해당 repository 경로를 입력한다.
- 배포 전에 빌드에 대한 명령어를 작성 선택
- 어떤 명령어로 빌드할지 작성
- PR이 merge 되었을 경우 자동배포 선택
- 배포되는 브랜치의 이름 (이 프로젝트는 main 브랜치)
❓ 이렇게 Firebase 자동 배포 설정을 마쳤다. 이렇게 하고 프로젝트 배포 결과를 확인 하려는데 아래와 같은 에러가 나왔다.
로컬에서 Firebase api-key들을 보안상 env 파일에 환경변수로 사용하여 gitignore에 추가해 버전관리에서 제외했다.
그래서 기존에 build 후 배포할때는 환경변수 파일도 같이 build 되어서 에러가 나오지 않았지만 Github에서 자동 배포를 하려는 경우에는 당연히 저장소에 env 파일이 없기 때문에 api-key를 읽을 수 없는 에러다.
GitHub Actions 환경 설정
✅ 해결 방법으로 보안에 민감한 데이터들을 해당 Repository secrets에 추가하면된다.
보안 및 구성을 위해 중요한 정보를 안전하게 저장하고 사용하기 위해 해당 repository 들어가서
setting 탭 -> 좌측 security 메뉴 -> secrets and variables -> Actions에서 보안에 민감한 데이터들을 추가하고 저장하면 된다.
이 프로젝트에서는 아래와 같이 Firebase에 필요한 key들을 저장했다.
Repository secrets에 추가 및 저장을 마치면 이제 활용 해야하는데 아래와 같이 변수를 정의하면된다.
변수명:' ${{ secrets.변수명 }}'그리고 workflows 파일에 아래와 같이 env를 적용하면 에러 해결과 동시에 성공적으로 자동 배포를 할 수 있고 commit 후 push하면 Actions에 작업한 workflow를 볼 수 있다.
// workflows 파일
name: Deploy to Firebase Hosting on merge
'on':
push:
branches:
- main
env:
VITE_API_KEY: '${{ secrets.VITE_API_KEY }}'
VITE_AUTH_DOMAIN: '${{ secrets.VITE_AUTH_DOMAIN }}'
VITE_PROJECT_ID: '${{ secrets.VITE_PROJECT_ID }}'
VITE_STORAGE_BUCKET: '${{ secrets.VITE_STORAGE_BUCKET }}'
VITE_MESSAGING_SENDER_ID: '${{ secrets.VITE_MESSAGING_SENDER_ID }}'
VITE_ID: '${{ secrets.VITE_ID }}'
VITE_MEASUREMENT_ID: '${{ secrets.VITE_MEASUREMENT_ID }}'
jobs:
build_and_deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- run: npm install && npm run build
- uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: '${{ secrets.GITHUB_TOKEN }}'
firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_HANDAL_SOBI }}'
channelId: live
projectId: handal-sobi
