[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:
 
<a rel="noopener" href="https://github.com/login/oauth/authorize?client_id=89cf50f02ac6aaed3484&state=278749156&redirect_uri=http%3A%2F%2Flocalhost%3A9005&scope=read%3Auser%20repo%20public_repo" title="Build software better, together" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAABaAQAAAAAXvWD/AAAAAnRSTlMAAHaTzTgAAAAWSURBVBgZYxgFo2AUjIJRMApGAQ0AAAdiAAHF+dYVAAAAAElFTkSuQmCC" alt="" class="blogcard-thumb-image external-blogcard-thumb-image lazyload" width="160" height="90" data-src="https://github.githubassets.com/assets/github-octocat-13c86b8b336d.png" data-eio-rwidth="160" data-eio-rheight="90"><noscript><img decoding="async" src="https://github.githubassets.com/assets/github-octocat-13c86b8b336d.png" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" data-eio="l" /></noscript></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Build software better, together</div><div class="blogcard-snippet external-blogcard-snippet">GitHub is where people build software. More than 150 million people use GitHub to discover, fork, and contribute to over...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQAAAAA3iMLMAAAAAnRSTlMAAHaTzTgAAAAMSURBVAjXY2AgDQAAADAAAceqhY4AAAAASUVORK5CYII=" alt="" class="blogcard-favicon-image external-blogcard-favicon-image lazyload" width="16" height="16" data-src="https://www.google.com/s2/favicons?domain=https://github.com" data-eio-rwidth="16" data-eio-rheight="16"><noscript><img decoding="async" src="https://www.google.com/s2/favicons?domain=https://github.com" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" data-eio="l" /></noscript></div><div class="blogcard-domain external-blogcard-domain">github.com</div></div></div></div></a>
 
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:
 
<a rel="noopener" href="https://github.com/settings/connections/applications/89cf50f02ac6aaed3484" title="Build software better, together" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAABaAQAAAAAXvWD/AAAAAnRSTlMAAHaTzTgAAAAWSURBVBgZYxgFo2AUjIJRMApGAQ0AAAdiAAHF+dYVAAAAAElFTkSuQmCC" alt="" class="blogcard-thumb-image external-blogcard-thumb-image lazyload" width="160" height="90" data-src="https://github.githubassets.com/assets/github-octocat-13c86b8b336d.png" data-eio-rwidth="160" data-eio-rheight="90"><noscript><img decoding="async" src="https://github.githubassets.com/assets/github-octocat-13c86b8b336d.png" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" data-eio="l" /></noscript></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Build software better, together</div><div class="blogcard-snippet external-blogcard-snippet">GitHub is where people build software. More than 150 million people use GitHub to discover, fork, and contribute to over...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQAAAAA3iMLMAAAAAnRSTlMAAHaTzTgAAAAMSURBVAjXY2AgDQAAADAAAceqhY4AAAAASUVORK5CYII=" alt="" class="blogcard-favicon-image external-blogcard-favicon-image lazyload" width="16" height="16" data-src="https://www.google.com/s2/favicons?domain=https://github.com" data-eio-rwidth="16" data-eio-rheight="16"><noscript><img decoding="async" src="https://www.google.com/s2/favicons?domain=https://github.com" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" data-eio="l" /></noscript></div><div class="blogcard-domain external-blogcard-domain">github.com</div></div></div></div></a>
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