[Flutter] カウンターアプリを Firebase Hosting で Web アプリとして動かす (Github Actions からデプロイ)

概要
チュートリアル
エラー
1. ! [remote rejected] main -> main (refusing to allow a Personal Access Token to create or update workflow .github/workflows/firebase-hosting-merge.yml without workflow scope)
まとめ
参考

概要

Firebase Hosting 上でカウンターアプリを動かす。

デプロイ方法はいくつかあるが、今回は Github Actions でデプロイする。

下記記事を大参考にさせていただきましたmm

【Flutter】Web アプリを🚀爆速🚀で Firebase Hosting にデプロイする

環境

Flutter 2.10.2

チュートリアル

Firebase プロジェクト準備

Firebase のコンソールより、Firebase プロジェクトを作成する。

今回は tutorial-firebase-github 。

Firebase CLI 準備

Firebase CLI をインストール。

brew install firebase-cli

Firebase に CLI からログインできることを確認。

firebase login

ブラウザで承認フローを完了すると以下の画面となる。

CLI より、上記で作ったプロジェクトが見れることを確認する。

firebase projects:list

Github リポジトリに Flutter プロジェクトをプッシュ

Github にリポジトリ作成（スクショは名前が重複しているため2に）。

Flutter プロジェクト作成。基本となるカウンターアプリ。

flutter create tutorial_firebase_github
cd tutorial_firebase_github

一度 git push までしておく。

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/runble1/tutorial_firebase_github.git #自分の
git push -u origin main

Firebase 用 Github Actions 設定

Flutter と Firebase を連携する設定をしていく。

firebase init hosting

下記のように答えた。

firebase init hosting

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /Users/xxxx/private/flutter/TEST/Firebase/tutorial_firebase_github


=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: tutorial-firebase-github (tutorial-firebase-github)
i  Using project tutorial-firebase-github (tutorial-firebase-github)

=== 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? build/web
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? Yes
✔  Wrote build/web/404.html
✔  Wrote build/web/index.html

i  Detected a .git folder at /Users/xxxx/private/flutter/TEST/Firebase/tutorial_firebase_github
i  Authorizing with GitHub to upload your service account to a GitHub repository's secrets store.

Visit this URL on this device to log in:
Build software better, together
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.
github.com

Waiting for authentication...

✔  Success! Logged into GitHub as runble1

? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) runble1/tutorial_firebase_github

✔  Created service account github-action-461386344 with Firebase Hosting admin permissions.
✔  Uploaded service account JSON to GitHub as secret FIREBASE_SERVICE_ACCOUNT_TUTORIAL_FIREBASE_GITHUB.
i  You can manage your secrets at https://github.com/runble1/tutorial_firebase_github/settings/secrets.

? Set up the workflow to run a build script before every deploy? Yes
? What script should be run before every deploy? flutter build web

✔  Created workflow file /Users/xxxx/private/flutter/TEST/Firebase/tutorial_firebase_github/.github/workflows/firebase-hosting-pull-request.yml
? Set up automatic deployment to your site's live channel when a PR is merged? Yes
? What is the name of the GitHub branch associated with your site's live channel? main

✔  Created workflow file /Users/xxxx/private/flutter/TEST/Firebase/tutorial_firebase_github/.github/workflows/firebase-hosting-merge.yml

i  Action required: Visit this URL to revoke authorization for the Firebase CLI GitHub OAuth App:
Build software better, together
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.
github.com
i  Action required: Push any new workflow file(s) to your repo

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

以下4つのファイルが新規作成される。

.firebaserc
.github/workflows/firebase-hosting-merge.yml
.github/workflows/firebase-hosting-pull-request.yml
firebase.json

このうち .github 配下の 2 ファイルは Github Actions の Workflow 設定ファイル。

この 2 つに以下を追記する。追記箇所はこちら参照。

     # Flutter のインストール
     - name: Install Flutter
        run: git clone https://github.com/flutter/flutter.git

      # PATH を通す
      - name: Add path
        run: echo "$(pwd)/flutter/bin" >> $GITHUB_PATH

      # パッケージのダウンロード
      - name: Download Flutter packages
        run: flutter pub get

これで準備完了。