🐈

Docker環境からFireaseにGithubActionsでデプロイできるようにする

2022/10/20に公開

Docker

GitHub

tech

Dockerで構築したReact環境からFirebaseのGithubActionsデプロイ設定を行ったのですが、CLIからそのまま利用できなかったため、備忘録として手動での設定方法を残します。

事象

Firebaseをインストールしたコンテナ内より、firebase initで諸々の設定を行っていこうとした際に、Githubとの連携部分でつまづきました。
Githubと連携するためにGithub連携用のURLへアクセスする必要があるのですが、認証後のリダイレクト先がlocalhostとなっており、Docker環境に閉じているためlocalhostのURLにアクセスできません。
そのため、GithubActionsの設定を手動で行う必要がありました。

Firebase CLI

Firebase CLIで初期化を行います。ここはいろんな記事があるため、そちらを参照していただければと思います。
コンテナ内で実施する際の注意としては、localhostのURLへアクセスできないため、firebase loginもそのままでは使えず、firebase login --no-localhostのコマンドに変更する必要があります。
また、GithubActionsのデプロイは手動での実行となるため、CLI上では選択しないでください。

Google CloudのIAMと管理

ここはGithubActionsでデプロイする際に利用する拡張機能のドキュメントを参考にします。

1. サービスアカウント作成

Google Cloudへアクセスし、「サービスアカウント」より「サービスアカウントを作成」します。
サービスアカウント名は上記ドキュメントに記載されているgithub-action-<my repository name>などが良いでしょう。

2. ロールの設定

以下のロールを追加します。

ロールの追加が終わったら「完了」をクリックします。

3. キーの作成

サービスアカウント一覧に今回作成したサービスアカウントが表示されているので、メールアドレスをクリックします。
「キー」タブより「鍵を追加」をクリックします。
「新しい鍵を作成」をクリックします。

続いて、キーの種類を選択します。
「JSON」を選択し、「作成」をクリックします。

その後、JSONファイルがダウンロードされるため大切に保管します。
くれぐれも外部に漏らさないようご注意ください。

4. GithubActionsの設定

先程取得したJSONをGithubのActions Secretに設定します。
名前は任意で結構です。例としてFIREBASE_TOKENと設定します。
その後、自身のリポジトリの.github/workflows配下にYAMLファイルを作成します。

deploy.yml

name: Deploy to Firebase Hosting on merge
'on':
 push:
   branches:
     - main
jobs:
  build_and_deploy:
    name: Deploy
    runs-on: ubuntu-latest
    timeout-minutes: 10
    steps:
      - name: Deploy
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_TOKEN }}'
          channelId: live
          projectId: '${{ secrets.FIREBASE_PROJECTID }}'

あとはmainブランチが更新されたらGithubActionsが動作し、FirebaseのHostingにデプロイされます。

おわりに

ホスト環境にFirebaseを入れることに抵抗があり、ついついDockerで環境を構築するのですが、こういったブラウザでの操作を挟むときにうまく行かないことが多々あります。
DockerのネットワークをHOSTにしたら問題ないとは思いますが、それも悩ましいところです。
CLIが自動で実施する部分を手動でできたので、どんな設定が行われているのか理解することができました。
権限周りは勝手に設定されてしまい、想定外の権限が与えられていたりすることもあるため、自動で作成するものについては理解しておくとセキュリティリスクを低減することに繋がります。
どなたかのお役に立てば幸いです。

事象