Firebase Hosting 시 GitHub Actions 사용해서 CI/CD 구축하기

CI/CD란?

• CI (지속적 통합, Continuous Integration)
  • 개발자들이 소스 코드 변경 사항을 깃에 푸시할 때마다 자동으로 코드 변경을 통합하고 테스트하는 프로세스
  • 여러 개발자가 동시에 작업하는 프로젝트에서 코드 충돌을 방지하고, 코드 품질을 유지하며, 빠른 오류 검출을 가능하게 함
  • 자동화된 빌드 및 테스트 작업 실행
  • ex) Jenkins, Travis CI, CircleCI, GitHub Actions
• CD (지속적 배포, Continuous Deployment)
  • 소프트웨어 변경 사항을 자동으로 프로덕션 환경으로 배포하는 것
• 주요 이점
  1. 코드 품질 향상
  2. 개발 및 배포 속도 향상
  3. 신속한 오류 감지
  4. 반복 가능한 프로세스

 

GitHub Actions란?

GitHub에서 제공하는 CI/CD 도구로, 레포지토리에서 코드 변경 및 이벤트에 반응하여 다양한 자동화 워크 플로우를 설정할 수 있다.

 

https://docs.github.com/ko/actions

GitHub Actions 설명서 - GitHub Docs

 

---

Firebase Hosting & GitHub Actions 연결하기

Firebase에서 제공하는 호스팅 서비스를 이미 사용하고 있다는 전제 하에,

터미널에 firebase init을 입력하면, 아래와 같은 내용을 확인할 수 있는데 차례차례 설정해주면 된다.

  * You are initializing within an existing Firebase project directory

? Which Firebase features do you want to set up for this directory? Press Space to 
select features, then Enter to confirm your choices. Hosting: Set up GitHub Action 
deploys

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

i  Using project "사용하고자 하는 프로젝트 명 선택"

=== Hosting:github Setup

i  Detected a .git folder at /Users/innerstella/portfolio
i  Authorizing with GitHub to upload your service account to a GitHub repository's secrets store.

Visit this URL on this device to log in:

Waiting for authentication...

✔  Success! Logged into GitHub as innerstella

? For which GitHub repository would you like to set up a GitHub workflow? (format: 
user/repository) "깃허브 유저 이름"/"레포지토리 이름"

✔  Created service account github-action-690008000 with Firebase Hosting admin permissions.
✔  Uploaded service account JSON to GitHub as secret FIREBASE_SERVICE_ACCOUNT_INNERSTELLA_PORTFOLIO.
i  You can manage your secrets at 

? Set up the workflow to run a build script before every deploy? No
? GitHub workflow file for PR previews exists. Overwrite? 
firebase-hosting-pull-request.yml Yes

✔  Created workflow file /Users/innerstella/portfolio/.github/workflows/firebase-hosting-pull-request.yml
? Set up automatic deployment to your site's live channel when a PR is merged? Yes
? What is the name of the GitHub branch associated with your site's live channel? main
? The GitHub workflow file for deploying to the live channel already exists. Overwrite?
 firebase-hosting-merge.yml Yes

✔  Created workflow file /Users/innerstella/portfolio/.github/workflows/firebase-hosting-merge.yml

i  Action required: Visit this URL to revoke authorization for the Firebase CLI GitHub OAuth App:
https://github.com/settings/connections/applications/89cf50f02ac6aaed3484
i  Action required: Push any new workflow file(s) to your repo

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

 

설정 후, 변경 사항을 푸시하고 깃허브에 들어가면 Actions 탭에서 진행 상황을 확인할 수 있다.

 

내가 여러번 실패한 이유는 깃허브에 build 폴더를 올리지 않았기 때문이었다.

.gitignore 파일에서 /build 부분을 주석처리 해준 후 GitHub Actions 연결에 성공했다.

 

+ 에러가 날 경우, 클릭해서 로그를 확인하면 어떤 부분에서 에러가 발생했는지 알 수 있다.

 

---

참고한 글

- https://velog.io/@chaerin00/FirebaseGitbub-Actions%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-CICD-%EA%B5%AC%EC%B6%95

- https://hyesunzzang.tistory.com/226