[Github] Github Actions와 Firebase Channel을 이용한 스테이지 환경 구축

프로젝트 개발 환경을 구축하는 방법에는 두 방법이 있습니다. 개발 초기에 가까이 있는 서버를 이용해 변경 사항을 빠르게 반영할 수 있는 개발(Dev) 환경, 실제 Production 환경에 올리기 전, Production과 똑같은 환경에서 테스트 해보기 위한 Stage 환경이 있습니다.

 

2019.08.27 - [DevOps/Git] - Github Actions - React 프로젝트를 Firebase에 Deploy 하기

Github Actions - React 프로젝트를 Firebase에 Deploy 하기

2년 전, Github Actions가 초기에 나왔을 때 React 프로젝트를 Firebase에 배포하는 것을 시도하였습니다. 당시에는 firebase-tools라는 npm 패키지를 Github actions에서 제공하는 컨테이너에 주입하여 사용했었는데요.

 

하지만 이 배포 방식은 공교롭게도 배포는 쉽지만 우리가 배포 전 같은 환경에서 테스트를 미리 해볼 수 없다는 단점이 있었습니다. 따라서 이번 글에서는 Firebase에서 새로이 공개한 Preview Channel을 이용해 똑같은 Firebase 환경에서 테스트할 수 있는 환경을 만들어 보는 시간을 가져보겠습니다.

 

 

 

Preview Channel

Firebase에서는 유저들에게 보여질 페이지(Live) 이전에 개발자가 개발한 페이지를 미리 볼 수 있는 Preview Channel을 이번에 새로이 공개하였습니다. 우리는 이 Preview Channel을 이용해서 Firebase의 똑같은 환경에서 테스트 해볼 수 있게 된 것입니다.

 

우리가 Firebase에 React 프로젝트를 빌드해 배포하면 기본적으로 Live Channel에 배포됩니다. 우리는 여기에 똑같은 환경으로 구성되어 있는 또 다른 채널을 만들 수 있는데, 이를 Preview Channel이라 합니다.

 

Preview Channel은 미리 볼 수 있는 채널로 유효기간을 정할 수 있습니다. 따라서 우리는 이를 이용하여 Github에 React 프로젝트를 Pull Request 요청할 때 해당 코드가 Preview Channel에 빌드되어 올라갈 수 있는 파이프라인을 만들어서 사용해보도록 하겠습니다.

 

 

 

How to use

우리는 지난 포스트에서 Github actions의 workflow에 직접 Node 컨테이너를 이용하여 npm으로 firebase-tools를 설치하고 빌드해 배포했습니다. 하지만 이번에는 조금 다릅니다.

 

Firebase에서는 Github actions에서 Preview Channel을 사용할 수 있도록 actions 도구를 Marketplace에서 제공합니다.

 

https://github.com/marketplace/actions/deploy-to-firebase-hosting

Deploy to Firebase Hosting - GitHub Marketplace

우리는 이를 이용해서 Preview Channel을 사용하겠습니다.

 

먼저 자신의 프로젝트에서 기존에 사용했던 Github Actions Workflow에 아래의 코드를 추가합니다.

 

여기서 firebaseServiceAccount 부분이 Github Secrets를 사용했음을 알 수 있습니다. 우리는 이 Workflow를 돌리기 전에 Google Cloud Platform에서 Service Account를 생성하고 그 Key를 받아 Github Secrets에 주입해줘야 합니다.

 

각 Pull Request 별로 생성되는 Preview channel의 유효기간을 7일로 설정하였습니다. 이 부분은 여러분들이 자유로이 바꿔서 사용해도 됩니다.

 

https://console.cloud.google.com/iam-admin/serviceaccounts

Google Cloud Platform

위 페이지에 접속하면 서비스 계정을 생성할 수 있습니다.

 

반드시 현재 선택된 프로젝트가 Firebase의 프로젝트인지 확인합니다. 그러고 나서 서비스 계정 생성 버튼을 클릭합니다. 

 

적당한 계정 이름과 ID를 입력한 후 다음으로 진행합니다. 

(Google에서 권장하는 방법은 github-actions-{레포지터리 이름} 으로 지정하는 것입니다.)

 

총 4가지의 Role을 부여합니다. 각 Role이 필요한 이유를 설명드리자면..

 

• Firebase Authentication Admin
  
  Preview URL을 만들기 위해 사용합니다. 우리가 PR을 올리고 배포한 Preview Channel의 사이트에 접속하기 위해서는 임시 주소가 필요합니다. 임시 주소 생성을 위해 이 규칙을 사용해야 합니다.
  
• Firebase Hosting Admin
  
  수정한 코드를 직접 Firebase에 배포하는 Role입니다. 
  
  
• Cloud Run Viewer
  
  만약 프로젝트에 Cloud Functions 혹은 Cloud Run을 모놀리스로 포함하고 있다면 해당 Role이 rewrite 할 수 있도록 도와줄 것입니다.
  
  
• API Keys Viewer
  
  Firebase actions에 사용되는 firebase-tools 명령어가 내 프로젝트에 배포할 수 있도록 API key를 볼 수 있는 Role 입니다.
  
  

조금 복잡한 권한 체계이지만 각 4가지 Role이 모두 필요하며 모두 선택하셨으면 생성을 마칩니다.

 

생성이 끝났으면 이렇게 계정이 하나 목록에 추가될 것입니다. 이 ID를 클릭합니다.

 

KEYS에 들어가서 ADD KEY를 눌러 Firebase CLI가 배포할 때 쓸 키를 발급해줍니다. 이 키가 바로 Github Secrets에 적재할 Firebase 배포 키입니다.

 

KEY는 반드시 JSON울 발급 받아 PC에 저장해둡니다.

 

저장이 끝났으면 위와 같은 화면이 표시됩니다.

 

 

이제 프로젝트 레포지터리에서 Secrets에 들어간 후 아까 위에서 지정한 Secret 이름으로 Secret을 만든 다음 JSON으로 발급 받은 키를 넣어주고 Secret을 추가하면 됩니다.

 

 

 

Firebase CLI를 이용한 키 발급

이렇게 키를 발급 받는 과정이 쉽지만은 않습니다. 따라서 이를 자동화한 스크립트가 있는데요. 기존의 Firebase CLI에서 아래의 명령어를 이용한다면 쉽게 키를 발급 받을 수 있습니다.

 

$ firebase init hosting:github

 

이 명령어를 이용하면 기존의 프로젝트에서도 똑같이 진행되며 Github의 로그인 과정을 거치고, 사용할 레포지터리의 이름만 입력한다면 나머지 키 발급과 Workflow의 생성을 모두 자동으로 처리해줍니다.

 

하지만 workflow 생성시 기존의 파일에 Merge를 해주지는 않기 때문에 CLI가 추가한 스크립트에서 Merge 작업은 수동으로 해줘야 합니다.

 

 

 

 

Firebase Hosting API 활성화

키를 자동 혹은 수동으로 발급받고 workflow를 추가했다 하더라도 Google Cloud Platform에서 Hosting API가 활성화 되어 있지 않았다면 Preview Channel 배포가 이뤄지지 않습니다. 

 

따라서 우리는 아래의 링크로 접속하여 Firebase Hosting API를 활성화 해줘야 합니다.

 

https://console.cloud.google.com/marketplace/product/google/firebasehosting.googleapis.com?q=search&referrer=search&project=nk-project-8ec03

Google Cloud Platform

위 링크를 클릭해 API 활성화를 클릭하기만 하면 됩니다.

 

 

 

 

Firebase가 주소를 만드는 방식

모든 작업이 끝난 다음 PR을 올리면 아래와 같이 PR 진행시, Bot이 사이트를 생성했다는 알림을 주며 해당 링크로 접속하면 수정된 코드로 프로젝트가 올라간 것을 볼 수 있습니다.

 

이 링크는 Firebase에서 생성해주는 주소이며 주소의 규칙은 아래와 같습니다.

 

주소 맨 왼쪽에 위치하는 Site name은 프로젝트 이름, -- 다음 부분이 채널 ID이며 그 다음이 바로 랜덤으로 생성되는 해시값입니다. 해시값을 가지고 있음으로 인하여 PR 마다 다른 해시값을 가지게 되며 테스트시 유용하게 쓸 수 있습니다.

 

 

 

 

Channel 관리

현재 운영 중인 채널을 보고 싶다면 Firebase 콘솔에서 확인할 수 있습니다.

 

콘솔에서 사용하고 있는 서비스 계정과 URL 그리고 삭제 기능을 포함합니다.

 

$ firebase hosting:channel:list

Firebase CLI 명령어를 이용해서도 볼 수 있습니다. 위 명령어를 이용해서 리스트를 보거나 삭제, 배포가 가능하며 만약 수동으로 Preview Channel 배포를 원하는 경우 아래의 명령어를 이용할 수 있습니다.

 

$ firebase hosting:channel:deploy preview --expires 1d

expires를 주지 않는 경우 forever가 되버리며 해당 프리뷰 채널은 지속적으로 유지됩니다.

 

 

 

 

마치며..

Firebase의 Preview Channel을 이용해서 Stage 환경을 만드는 것에 대해 알아봤습니다. 비슷한 환경을 제공하는 것으로 Netlify를 이용해볼 수도 있지만 기존에 Firebase를 사용하고, 현재도 Firebase로 운영 중인 페이지가 있어 포스팅하게 되었습니다.

 

현재 Preview Channel은 베타 버전으로 운영 중에 있습니다. 아직 공식적인 기능은 아님에도 불구하고 Google Firebase의 공식 문서나 블로그에도 상세히 사용법이 기재되어 있다는 점을 미루어 볼 때 곧 정식 버전으로 릴리즈 될 것으로 보입니다.

 

 

 

 

참고:

- Google Firebase Blog (https://firebase.googleblog.com/2020/10/preview-channels-firebase-hosting.htm)

- Google Firebase Offical Docs https://firebase.google.com/docs/hosting/manage-hosting-resources