🐷

Firebase HostingにGitHub Actionsでデプロイする

2024/11/27に公開

Firebase

GitHub Actions

Firebase Hosting

tech

GitHubにプッシュ(or マージ)したら自動でFirebase Hostingにデプロイされるようにします。
今回は簡単のためデプロイするものはbuildなどの必要のないただのHTMLファイルを用います。

こちらのドキュメントの通り進めていきます。

ライブラリのバージョン

firebase-tools: 13.27.0

GitHub リポジトリを用意

GitHub Actionsを使うのでGitHubのリポジトリを用意します。

今回はこちらのリポジトリを用意しました。

Firebaseプロジェクトの作成

Firebaseプロジェクトを作成する必要があります。
Firebaseコンソールで作成してもいいですし、firebase init hostingコマンドでも作成できるのでそちらで作成してもいいです。
今回はFirebaseコンソールで作成します。

プロジェクトを作成

今回はこのまま続行します。

アナリティクスは今回は無効としておきます

作成完了です。

新しくGoogle Cloudプロジェクトも作成されています。

firebase init hosting 実行

このコマンドを実行することで

各種ファイルの生成
Google Cloudでのサービスアカウントの作成
GitHubリポジトリへのシークレットの設定

を行ってくれます。

firebaseコマンドはこちらを参考に導入してください。

firebase-toolsを導入したあとは、ローカルのリポジトリでhostingの初期化コマンドを実行します。

firebase init hosting

実行すると色々聞かれるので設定していきます。

ログインしていない場合はログインが必要なので

firebase login

でログインしてください。

Firebaseプロジェクトを作成するか、既存のものを使うか選択します。

? Please select an option: (Use arrow keys)
❯ Use an existing project 
  Create a new project 
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project

使用したいFirebaseプロジェクトがすでにある場合は一番上の選択肢を選べばいいです。
新しく作りたい場合は2番目か3番目の選択肢となります。
Firebaseプロジェクトを新規作成したいが、Google Cloudプロジェクトは既存のものを使いたい場合は3番目の選択肢を選ぶことになるかと思います。

今回はFirebaseコンソールでプロジェクトを作成したので1番目のUse an existing projectを選択してみます。


? Please select an option: Use an existing project
? Select a default Firebase project for this directory: (Use arrow keys)
❯ fir-example-9902b (firebase-example) 
  fir-hosting-example-1fd34 (firebase-hosting-example)

先ほど作成したfirebase-hosting-exampleを選択します。

? Select a default Firebase project for this directory: fir-hosting-example-1fd34 
(firebase-hosting-example)
i  Using project fir-hosting-example-1fd34 (firebase-hosting-example)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? (public)

どのディレクトリのファイルを公開するか設定します。
ひとまずデフォルトのpublicにします。

? Configure as a single-page app (rewrite all urls to /index.html)?

リライトの設定をするか聞かれます。
今回はページごとにファイルを用意する想定なのでNoとします。

? Set up automatic builds and deploys with GitHub?

今回はYesとします。
Yesにすると以下のようにFirebaseからGitHubへのリソースのアクセスの許可を求めれられるので許可します。

この時以下の2ファイルが生成されました。
public/404.html
public/index.html

? For which GitHub repository would you like to set up a GitHub workflow? (format: 
user/repository) (hid3h/firebase-hosting-example)

使用するリポジトリを聞かれるので設定します。

? Set up the workflow to run a build script before every deploy?

デプロイ前にbuildをするか聞かれます。
今回は簡単のためbuildの必要のないHTMLファイル(先ほど生成された2ファイル)を用いるのでNoとします。

? Set up automatic deployment to your site's live channel when a PR is merged? (Y/n)

live channel、いわゆる本番環境にデプロイするか聞かれます。
Yesとします。

? What is the name of the GitHub branch associated with your site's live channel?

どのブランチにpushされたらlive channelにデプロイするGitHub Actionsを起動するか聞かれます。
デフォルトのmainブランチとします。

これでコマンドは終わりです。

コマンドによって生成、設定されたものを確認

firebase init hostingコマンドで生成されたファイルは以下です。

.github/workflows/firebase-hosting-merge.yml
.github/workflows/firebase-hosting-pull-request.yml
public/404.html
public/index.html
.firebaserc
firebase.json

FirebaseExtended/action-hosting-deployを使ったGithub Actionsのyamlファイルが生成されました。
mainブランチにpush(マージ)された時に起動するようになっています。

.github/workflows/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@v4
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_FIR_HOSTING_EXAMPLE_1FD34 }}
          channelId: live
          projectId: fir-hosting-example-1fd34

FIREBASE_SERVICE_ACCOUNT_FIR_HOSTING_EXAMPLE_1FD34はGitHubのSecretsに設定されています。

Google CloudのIAMを見ると、github-action-から始まるサービスアカウントが生成されているのを確認できます。

次のファイルはプレビューの用のデプロイのyamlファイルです。
プルリクエスト作成時に起動するようになっていて、本番デプロイ前に一時的なURLでサイトを確認することができます。
参照

.github/workflows/firebase-hosting-pull-request.yml

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

name: Deploy to Firebase Hosting on PR
on: pull_request
permissions:
  checks: write
  contents: read
  pull-requests: write
jobs:
  build_and_preview:
    if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_FIR_HOSTING_EXAMPLE_1FD34 }}
          projectId: fir-hosting-example-1fd34

Firebaseではpublic/404.htmlを用意することで存在しないページにアクセスがあった時にこのファイルの内容を表示させることができます。
参照

public/404.html

割愛

トップページです。

public/index.html

割愛

Firebaseのプロジェクトidが設定されています。

.firebaserc

{
  "projects": {
    "default": "fir-hosting-example-1fd34"
  }
}

デプロイ対象のディレクトリ等が設定されています。

firebase.json

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

デプロイ

上記の内容でmainブランチにpushすると無事デプロイされました。