Firebase hosting with Github actions

사이드 프로젝트에 들어가는 개인정보 처리 방침 페이지를 firebase hosting을 이용해서 만들었었습니다.

firebase hosting은 firebase에서 무료로 제공하는 호스팅 기능입니다. 사용방법이 꽤 쉽기 때문에 어렵지 않게 사용할 수 있는데, 사이드 프로젝트를 같이 하는 개발자에게 배포하는 방법을 알려줘야 하니 귀찮은 마음이 생겨... github actions를 적용해보기로 했습니다.

 

firebase 공식문서

firebase.google.com/docs/hosting/github-integration

GitHub 풀 요청을 통해 라이브 및 미리보기 채널에 배포  |  Firebase

 

1. github에 기존에 사용하던 저장소를 사용하고 없다면 저장소를 하나 생성합니다. (해당 레포지토리에 권한이 있어야 함)

2. 저장소의 로컬 버전에서 firebase init 명령어를 사용하여 firebase hosting을 설정한다.

• 호스팅을 설정하지 않은 경우 로컬 디렉터리의 루트에서 다음 버전의 명령을 실행합니다.

firebase init hosting

 

• 이미 호스팅을 설정했다면 호스팅의 GitHub 작업 부분 만 설정하면 됩니다. 로컬 디렉터리의 루트에서 이 버전의 명령을 실행합니다.

firebase init hosting:github

 

그럼 터미널에 위의 사진과 같은 로그가 나오고 github 계정 이메일로 메일 하나가 도착합니다.

터미널에서 해당 저장소에 직접 접근을 해야 하기 때문에 권한이 필요합니다. 그래서 이메일의 링크를 눌러 나온 페이지에서 Firebase CLI를 Authorized 한 후 해당 레포의 오른쪽에 있는 빨간 X 버튼을 눌러 초록색 체크로 바뀌도록 합니다. (-> 이쪽은 사진을 추가해보도록 하겠습니다 ㅠ)

 

이렇게 되었을 때 Firebase CLI에서 해당 저장소에 접근할 수 있어 다음 단계를 진행할 수 있습니다.

 

 

화면의 파란 배경과 주황 배경을 참고하여 작성하시면 됩니다.

Firebase CLI 에서 몇 가지 질문을 하는 데 1번 질문은 No를 선택하시면 됩니다. (yes로 했더니 npm ci && npm run build 이 부분에서 자꾸 실패를 하더라고요.)

 

1, 2번에 답을 하면 PR이 들어왔을 때 실행할 workflow 하나가 생성되고

merge 될 때 자동 배포를 할건지 설정하고 싶다면 3번 항목에서 yes로 답하시면 됩니다. 그럼 merge 될 때 실행할 workflow 하나가 생성됩니다. Firebase CLI가 secret key 생성하는 등의 작업은 알아서 해주기 때문에 여기까지 하면 완료됩니다.

 

- yml 파일 내용이 github.com/marketplace/actions/deploy-to-firebase-hosting 이 링크의 yml과 같이 되어있는지 확인해주세요

 

이제 저희가 할 일은 두개가 남았습니다. 사진 속 주황색 박스입니다.

일단 앞서 권한을 준 Firebase CLI의 권한 해제를 해야 합니다. 

두 번째는 위 생성된 workflow를 원격 저장소에 반영해야 합니다.

 

.github 폴더 통째로 commit 하고 원격 저장소에 push 하게 되면 yml 파일이 actions에 등록이 되고 아래와 같이 동작하는 걸 볼 수 있습니다.

 

 

merge 하면 라이브에 배포되도록 workflow를 추가했기 때문에 수초가 지난 뒤 호스팅 페이지에 반영이 됩니다!!!

 

처음으로 github acions를 사용해봤는데 아직 뭐 어떻게 쓰는 건지는 잘 모르겠습니다만.. 그래도 뭔가 되긴 하는 거 같아 신기합니다.