[pnpm] firebase hosting과 github action 연결하기

이 포스트는 pnpm 기반의 프로젝트에서 firebase hosting과 github action 연결하는 법에 대해서 설명한다.

기본적으로 firebase hosting 에서는 github action과 연결을 제공한다.

GitHub pull 요청을 통해 실시간 및 미리보기 채널에 배포

이 방법을 통해 생성을 하게 되면 github workflow 파일이 생성된다.
(firebase-hosting-merge.yml, firebase-hosting-pull-request.yml)

내용은 다음과 같다. (jobs 부분만 보면 된다. 두 파일 다 원리는 동일하기 때문에 firebase-hosting-merge.yml 을 기준으로 설명한다.)

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm ci && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '$'
          firebaseServiceAccount: '$'
          channelId: live
          projectId: your_project_id

이 상태에서 pnpm을 통해 install 과 build를 진행하려면 다음과 같이 수정해주면 된다.

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on merge
"on":
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 8

      - name: install dependencies and build
        run: pnpm install --frozen-lockfile && pnpm run build

      - name: deploy to firebase
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "$"
          firebaseServiceAccount: "$"
          channelId: live
          projectId: your_project_id

코드를 수정하여 반영하면 정상적으로 빌드되고 반영되는 것을 확인할 수 있다.