Web support for Flutter のプロジェクトを GitHub Action で Firestore Hosting にビルド&デプロイする

年末休みの間に、Flutter Webを使ったサービスを作りFirebase Hosting で公開したので公開手順をまとめました。

Flutter Webでアプリ開発する

2020年12月時点だと、Flutter でWeb開発をするには beta 版を使う必要があります。

セットアップはFlutterの環境構築後に以下コマンドを実行することでが完了します。

flutter channel beta
flutter upgrade
flutter config --enable-web

flutter.dev

セットアップ後に flutter create myapp を実行すると以下のようなディレクトリ構造でアプリが作成されます。

> myapp tree -L 1
.
├── README.md
├── android
├── build
├── integration_test
├── ios
├── lib
├── myapp.iml
├── pubspec.lock
├── pubspec.yaml
├── test
└── web // これが作成されていること

Firebase Hostingの設定を行う

Firebase Hosting にデプロイを行うのでその設定を行います。

GitHub Actionsの設定もfirebase cliがやってくれるので先にリポジトリを作り以下コマンドを実行します。
※ あとで細かい設定は手動で直せるので一旦デフォルトの設定で作ってしまっても大丈夫です。

firebase init

生成された firebase.json を以下のように修正します。

{
  "hosting": {
    "public": "build/web", // Futterが書き出すディレクトリに変更
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

ここまでできれば、以下コマンドを実行することでデプロイできます。

flutter build web
firebase deploy

GitHub Actions でデプロイを自動化する

先程のコマンドを実行時にデプロイの設定をしておけばある程度自動生成してくれていると思います。自動生成された yml ファイルは nodejs 用になっていると思うので以下のように修正をします。

name: Deploy to Firebase Hosting

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-java@v1
        with:
          java-version: '12.x'
      - uses: subosito/flutter-action@v1
        with:
          flutter-version: '1.25.0-8.1.pre'
          channel: beta
      - run: flutter config --enable-web
      - run: flutter pub get
      - run: flutter build web
      # 以下は自動生成されたものをそのまま使う
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_XXXX }}' // Firebase init で生成された環境変数
          channelId: live
          projectId: xxxx // FirebaseのプロジェクトID
        env:
          FIREBASE_CLI_PREVIEWS: hostingchannels

以上でデプロイのワークフローを設定することができました。
この設定だと main ブランチにプッシュするたびに自動デプロイされるのでお好みのワークフローに改善して使ってください。

終わりに

多くの記事では firebase ci:login で生成した token を使ってデプロイする方法が出回っています。
これだと生成したユーザーとしてFirebaseのコマンドが実行されるため、生成した人がやめたときのことや、トークンの管理を考えるとプロジェクトに紐づく Service Account で行ったほうが良いので firebase init 時に生成された Service Accountを使うのが良いと思います。