Firebase HostingのPreviewチャネルへデプロイしたURLをPRにコメントするGithub Actionsを作る

【これはUnipos Advent Calendar 2021の1日目の記事です】

PRを作ると自動でFirebase HostingのPreviewチャネルにデプロイが行われ、デプロイされたチャネルのURLがコメントされる。コミットが積まれるたびに新しくデプロイされ、コメントのURLも更新される。そういうGithub Actionsを最近作ったので備忘メモ。

f:id:IzumiSy:20211201130615j:plain — Github Actionsがつけるコメントの雰囲気

今回はFirebase Hostingを使っているので、やっていることはFirebaseExtended/action-hosting-deployとほぼ同じだけれど、これを応用すればFirebase Hostingに限らず他のPaaSサービスとでも同じようなやつをサクッと作れる気がする。

たとえばAppEngineにサービスをデプロイしてそのバージョンをコメントするみたいなやつとか（すでにありそうだけど...）

実装

本番のコードを乗せるわけにはいかないので雰囲気yamlです。

name: preview-deploy

on:
  pull_request:
    types:
      - opened
      - synchronize # コミットがあるたびに動くために必要

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    container: node:14-buster
    steps:
      - name: checkout
        uses: actions/checkout@v2

      # firebase hosting:channel:deployからURLを抽出するのに必要
      - name: install tree and jq
        run: |
          apt update
          apt install -y tree jq

      - name: build
        run: |
          npm install
          npm run build

      # Previewのデプロイ
      - name: deploy preview
        id: deploy-preview
        run: |
          TOKEN="your-own-firebase-token"
          PR_NUMBER=${{ github.event.pull_request.number }}
          PREVIEW_URL=$(npx firebase hosting:channel:deploy $PR_NUMBER --token=$TOKEN --project="your-project" --json | jq -r '.result."your-project".url')
          echo $PREVIEW_URL
          echo "::set-output name=preview_url::$PREVIEW_URL"

      # すでにPreviewのURLがコメントされていたらそれを見つける
      - uses: peter-evans/find-comment@v1
        id: find-comment
        with:
          issue-number: ${{ github.event.pull_request.number }}
          comment-author: 'github-actions[bot]'
          body-includes: Storybook preview has been deployed!

      # PRがオープンされた最初にだけPreviewのURLをコメントする
      - name: comments to PR
        uses: peter-evans/create-or-update-comment@v1
        with:
          comment-id: ${{ steps.find-comment.outputs.comment-id }}
          issue-number: ${{ github.event.pull_request.number }}
          body: |
            Storybook preview has been deployed! :shipit:
            :arrow_right: ${{ steps.deploy-preview.outputs.preview_url }}
          edit-mode: replace