2. Github Actions을 활용하여 배포 자동화 - SaekKkanDa/OppaManyColorTone GitHub Wiki

OMCT 프로젝트는 firebase를 이용하여 배포를 하고 있으며, production 브랜치에 Merge가 될 때 github actions을 이용하여 자동으로 배포가 될 수 있는 파이프라인을 구성하였습니다.

본 글에서는 firebase를 통해서 배포하는 방법과 github actions을 통하여 파이프라인을 구성하는 방법에 대해서 알아보겠습니다.

Firebase를 이용한 배포

먼저 firebase를 이용하여 웹앱을 배포하는 방법은 공식 홈페이지에 친절하고 자세히 나와있습니다.

아래 글을 참고하시면 좋습니다 :)

firebase 콘솔: https://console.firebase.google.com/u/0/

firebase 호스팅: https://firebase.google.com/docs/hosting

Firebase 콘솔에 프로젝트 등록

firebase 콘솔에 접속하게 되면 직관적인 UI로 구성되어있기 때문에 프로젝트를 생성하는데 어려움은 없으실 겁니다.

먼저 콘솔에 접속하게 되면 아래와 같은 사이트가 보이실 겁니다. 프로젝트 추가를 클릭합니다.

프로젝트 추가를 클릭하면 아래와 같이 프로젝트 설정을 하게 됩니다. 프로젝트의 이름, 구글 애널리틱스 등 다양한 설정을 하게 됩니다. 설정이 완료되면 Firebase 추가 를 클릭합니다

설정이 완료된 프로젝트를 보실 수 있습니다.

프로젝트를 선택하게 되면 아래와 같은 모습을 하고 있을 겁니다. 이제 콘솔에 엡을 추가해야 합니다. 중앙의 웹앱 </> 버튼을 클릭합니다.

웹앱의 닉네임을 설정하고 앱을 추가하기 위한 가이드가 표시 됩니다.

제공되는 가이드를 따라하시면 문제없이 진행하실 수 있을 겁니다.

Github Actions을 활용한 배포

github actions을 등록하기 위해서는 .github/workflows 아래에 형식에 맞는 yml 파일을 등록하시면 됩니다.

현재 OMCT 프로젝트에서 사용하고있는 firebase-hosting-merge.yml 파일을 기준으로 각 단계마다 설명을 드리겠습니다.

actions의 이름과 workflow가 실행되는 환경 설정

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - production

먼저 workflow의 이름과 어떤 상황에서 workflow가 실행될지 설정하게 됩니다. 위의 경우에는 production 브랜치에 push 될 때 workflow가 실행되게 됩니다.

이외에도 다양한 옵션이 있습니다. 브랜치가 아닌 path로 단위로 설정할 수 있으며, wildcard도 사용할 수 있고 push가 아닌 다른 이벤트에서도 이용할 수 있습니다.

더 많은 syntax는 여기를 참고 부탁드립니다.

Jobs 등록

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:

workflow에 표시되는 job을 등록하게 됩니다. 위의 경우에는 workflow를 실행하는 호스트 runnder를 가장 최신의 ubuntu로 설정하였습니다.

호스트 runner는 아래와 같이 다양한 옵션을 제공합니다. 알맞는 호스트 runner를 설정하시면 됩니다.

소드코드 접근

- name: Checkout source code
  uses: actions/checkout@v3

소스 코드에 접근하는 step 입니다.

nvmrc 읽기

- name: Read .nvmrc
  id: node_version
  run: echo ::set-output name=NODE_VERSION:$(cat .nvmrc)

프로젝트에서 사용하는 알맞는 node버전을 사용하기 위해서 cat 명령어를 이용하여 nvmrc 파일을 읽습니다. actions에서 제공하는 ::set-output 명령어를 이용하여 NODE_VERSION에 node version을 저장합니다.

node setup

- name: Setup Node.js
  uses: actions/setup-node@v3
  with:
    node-version: ${{steps.node_version.outputs.NODE_VERSION}}

NODE_VERSION에 저장된 node version을 host runner가 사용하게 setup 합니다.

Environment 변수 설정

- name: Adding environments to .env
  run: |
    echo -e "\\n
    VITE_FIREBASE_API_KEY=${{ secrets.FIREBASE_API_KEY }}\n\
    VITE_FIREBASE_AUTH_DOMAIN=${{ vars.FIREBASE_AUTH_DOMAIN }}\n\
    VITE_FIREBASE_DATABASE_URL=${{ vars.FIREBASE_DATABASE_URL }}\n\
    VITE_FIREBASE_PROJECT_ID=${{ vars.FIREBASE_PROJECT_ID }}\n\
    VITE_FIREBASE_STORAGE_BUCKET=${{ vars.FIREBASE_STORAGE_BUCKET }}\n\
    VITE_FIREBASE_MEASUREMENT_ID=${{ vars.FIREBASE_MEASUREMENT_ID }}\n\
    VITE_FIREBASE_APP_ID=${{ vars.FIREBASE_APP_ID }}\n\
    VITE_KAKAO_API_KEY=${{ secrets.KAKAO_API_KEY }}\n\
    VITE_SENTRY_DSN=${{ vars.SENTRY_DSN }}" >> ".env"

프로젝트에서 사용하는 .env 파일을 github repo에 저장되어있는 env를 이용하여 만듭니다. env 파일은 Setting-Secrets and variables-Actions에서 추가 및 삭제를 할 수 있습니다.

package 설치와 빌드

- name: Install dependencies
  run: yarn install

- name: Build application
  run: yarn run build

패키지를 설치하고 배포를 하기 위한 빌드를 진행합니다.

배포

- name: Deploy
  uses: FirebaseExtended/action-hosting-deploy@v0
  with:
    repoToken: '${{ secrets.GITHUB_TOKEN }}'
    firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_OPPAMANYCOLORTONE_5FB42 }}'
    channelId: live
    projectId: oppamanycolortone-5fb42

이전 스텝에서 만들었던 firebase 배포 스크립트를 실행합니다.