Zenn
📌

【Flutter web】GitHub ActionsでFirebase Hostingに自動デプロイ

2024/04/09に公開
GitHub
GitHub Actions
deploy
Firebase Hosting
FlutterWeb
tech

ゴール

ブランチを develop ブランチにマージしたら、 GitHub Actions を使って Firebase Hosting に自動でアプリがデプロイされるようにします。

やってみた結果

めちゃくちゃ楽

開発環境

事前準備

  • Flutter プロジェクトを作成
  • Firebase のアカウント作成
  • firebase CLI をインストール

設定手順

firebase init に従って設定していき、最後にファイルを少し書き換えるという流れです。

  1. プロジェクト直下でターミナルを開いて以下のコマンドを実行
firebase init

 

  1. Firebase のどの機能を使うのか聞かれるので、Hosting の2つを選択

     

  2. 適宜設定していくと "Set up automatic builds and deploys with GitHub?" と聞かれるので、yes と答える

     

  3. GitHub のどの repository に対するGitHub Actions なのかを入力する
    例）https://github.com/nobu74658/flutter_template　このレポジトリに対して設定する場合は nobu74658/flutter_template

     

  4. "Set up the workflow to run a build script before every deploy?" と聞かれるので、yes と答える

     

  5. Flutter webのビルドコマンドを入力

     

  6. "Set up automatic deployment to your site's live channel when a PR is merged?" と聞かれるので、Yesと答える。
     

  7. 続く質問でどのブランチにマージした時にアプリを自動デプロイするかを答える。
    自分の場合は develop

     

  8. 必要なファイルが生成されていることを確認する。
    今回は上のファイル（firebase-hosting-merge.yml）だけが必要。下のファイルは削除してOK。

     

  9. firebase-hosting-merge.yml を書き換える

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:
      - develop
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
-     - uses: actions/checkout@v3
+     - uses: actions/checkout@v4
+     - name: Set up Flutter
+       uses: subosito/flutter-action@v2 # https://github.com/subosito/flutter-action
+       with:
+         channel: 'stable'
+         flutter-version: 3.16.9 # プロジェクトの Flutter バージョンに合わせる
+     - name: Get Flutter dependencies
+       run: flutter pub get
      - run: flutter build web # ビルドコマンドは必要に応じてオプションを指定
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_HOGE_HOGE }}'
          channelId: live
          projectId: hoge-hoge-12345

解説

firebase-hosting-merge.yml で書き換えが必要なのは、 flutter build web が動く環境を用意する必要があるためです。
具体的には Set up Flutter の部分で Flutterが動く環境を用意しています。バージョンは必要に応じて変更してください

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:
      - develop
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
　     - uses: actions/checkout@v4
　     - name: Set up Flutter
　       uses: subosito/flutter-action@v2 # https://github.com/subosito/flutter-action
　       with:
　         channel: 'stable'
　         flutter-version: 3.16.9
　     - name: Get Flutter dependencies
　       run: flutter pub get
    　　　- run: flutter build web
　　　　　　　　　　　- uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_HOGE_HOGE }}'
          channelId: live
          projectId: hoge-hoge-12345

終わりに

一度設定してしまえば、Flutter web のアプリを自動でデプロイできて、すごく楽なのでおすすめです。
今回はdevelopブランチにマージした時に自動デプロイしていますが、設定次第では他のイベントで発火させることもできるはずです。（参考：https://docs.github.com/ja/actions/using-workflows/events-that-trigger-workflows ）
わかりにくい部分などあればコメントお願いします。

追記

記事を書いた後に気づいたのですが、すでにわかりやすくまとめてくれていました。
https://zenn.dev/pressedkonbu/articles/deploy-flutter-web-app-with-firebase-hosting

Discussion