Firebase Hosting + GitHub Actions でデプロイ

はじめに

GitHub Actions を使って Firebase Hosting にデプロイします。

Deploy to Firebase Hosting という GitHub Action が Firebase より Github Marketplace に公開されているので、これを使っていきます。

GitHubプルリクエストを介してライブチャンネルとプレビューチャンネルにデプロイするのドキュメントも参考になります。

ゴールは以下とします。

main ブランチにマージする Pull Request は、プレビューチャンネルにデプロイ
main ブランチにマージした場合、ライブチャンネルにデプロイ

また、Firebase Hosting , GitHub Actions 自体については今回は記載致しません。

準備

Deploy to Firebase Hosting を使用する準備をします。

Firebase Hosting に GitHub Actions からデプロイするには以下を準備する必要があります。

Firebase Hosting にデプロイする権限を持つサービスアカウントを、該当する Firebase プロジェクトに作成する
作成したサービスアカウントの Json キーを、該当する GitHub リポジトリの Secrets に登録する

各管理画面からでも設定可能ではありますが、 Firebase CLI から登録できるようになっているのでそれを使用します。

Firebase Hosting を使用するプロジェクトのルートディレクトリで以下のコマンドを実行して、指示に従って処理をすると上記 2 点の設定が完了できます。

# Firebase Hosting 未設定の場合
firebase init hosting

# FIrebase Hosting 設定済みの場合
firebase init hosting:github

また、 GitHub Actions の処理内容を記載する YAML ファイルも作成してくれます。(リポジトリのルートディレクトリ / .github/workflows 以下に作成される)

GitHub Actions のワークフローの設定

GitHub Actions はワークフローを YAML にて定義します。定義する YAML ファイルは、リポジトリのルートディレクトリ /.github/workflows 以下に配置します。

準備で実行したコマンドにてサンプルの YAML が作成されています。

YAML の内容について確認します。

on ブロックについてです。 on ブロックには起動するイベントを定義します。

以下のように定義します。

on:
  イベント:
    branches:
      - ブランチ

今回のゴールに合わせた形は以下になります。

on:
  pull_request:
    branches:
      - main # マージ先(base)のブランチ名を指定する
  push:
    branches:
      - main

pull_request を指定した場合は、デフォルトでは opened, synchronize, reopened の場合のみ実行されます。 pull_request にはその他にもアサイン( assigned )、編集( edited )など細かくアクティビティタイプを指定できます。

アクティビティタイプを指定する場合は、 types を使って定義します。

# types を使った例
on:
  pull_request:
    types: [assigned, opened, synchronize, reopened]
    〜

その他の on での記載方法については GitHub Actionsのワークフロー構文や、ワークフローをトリガーするイベントを参照ください。

アクティビティタイプについては、ワークフローをトリガーするイベントに詳細が記載されています。

次に、 Firebase Hosting へのデプロイ部分について確認します。

以下を例として確認してます。 (Deploy to Firebase Hosting に記載されている例です)

jobs:
  build_and_preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      # ビルドなど必要な処理があれば追加する
      # - run: npm ci && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT }}"
          expires: 30d
          projectId: your-Firebase-project-ID

これはプレビューチャンネルにデプロイする例となっています。

steps の 1 つ目でリポジトリからチェックアウトして、2 つ目でデプロイする流れになっています。

例えばリポジトリに静的ファイルのみがあり、そのままデプロイするだけでよければこれでデプロイできます。

その他デプロイ前にビルドなどする必要がある場合は、デプロイの前にビルドのステップを追加できます。

デプロイの設定については以下となります。 ( uses: FirebaseExtended/action-hosting-deploy@v0 の with の箇所 )

repoToken: GitHub の Token を指定します。上記例の通りに設定すれば問題ありません。 secrets.GITHUB_TOKEN は GitHub 側で自動設定されます。
firebaseServiceAccount: 準備の際に GitHub の Secrets に登録した Name を指定します。
expires: プレビューチャンネルにデプロイしたサイトの有効期限を指定します。この期限を過ぎると自動でサイトにアクセスできなくなります。
projectId: デプロイ先の Firebase のプロジェクト ID を指定します。

以上でプレビューチャンネルへのデプロイ設定は完了です。

また、ライブチャンネルへのデプロイは以下の様になります。

jobs:
  deploy_live_website:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      # ビルドなど必要な処理があれば追加する
      # - run: npm ci && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT }}"
          projectId: your-Firebase-project-ID
          channelId: live

プレビューチャンネルとの違いは、 expires と channelId です。 expires は無くし、 channelId: live を追加します。

今回のゴールに合わせた形は以下になります。

if にて PullRequest イベントの時は、プレビューチャンネルにデプロイ、main にマージした場合はライブチャンネルへデプロイするようにしています。

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      # ビルドなど必要な処理があれば追加する
      # - run: npm ci && npm run build
      - name: Deploy preview channel
        uses: FirebaseExtended/action-hosting-deploy@v0
        if: github.event_name == 'pull_request'
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT }}"
          expires: 7d
          projectId: your-Firebase-project-ID
        env:
          FIREBASE_CLI_PREVIEWS: hostingchannels
      - name: Deploy live channel
        uses: FirebaseExtended/action-hosting-deploy@v0
        if: github.event_name == 'push'
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT }}"
          projectId: your-Firebase-project-ID
          channelId: live

動作確認

動作確認をします。

ローカルで feature/1 ブランチを作成し commit & push します。 (main でなければブランチ名は任意で問題ありません)

GitHub にて Pull Request を作成します。 Pull Request を作成する時には、 base のブランチに main を指定してください。違うブランチを base に指定すると動作しません。

Pull Request が作成されると、ワークフローが実行されます。

Pull Request の画面の Checks タブ等で実行が確認できます。

ワークフローの実行が完了すると、 Pull Request の画面の Conversation タブに以下の通知が投稿されデプロイしたプレビューチャンネルの URL が記載されます。

記載されている URL にアクセスして動作確認ができます。

github-actions bot 〜

Visit the preview URL for this PR (updated for commit XXXXXXX):

https://プレビューチャンネルのURL

(expires 期限が切れる時間)

🔥 via Firebase Hosting GitHub Action 🌎

次に Pull Request をマージします。マージするとライブチャンネルへデプロイするワークフローが実行されます。

この実行の確認は GitHub の画面の Pull Requests タブの並びにある Actions タブにて確認できます。

ワークフロー完了後、サイトの URL にアクセスすればデプロイされていることが確認できます。

まとめ

GitHub Actions を使った Firebase Hosting へのデプロイについて確認しました。

これを使えば、ビルドからデプロイの流れを GitHub Actions でおこない、CI/CD (継続的インテグレーション/継続的デリバリー) を実現できます。

最後まで読んで頂きありがとうございました！

Firebase Hosting + GitHub Actions でデプロイ

はじめに

準備

GitHub Actions のワークフローの設定

動作確認

まとめ

More articles from YSD Developers Blog

Golang で Web API - テストを実装

Slack + Google Calendar