FlutterプロジェクトでFirebase Hostingを使っています。
これはプロトタイプではありますが、ローカルでビルドしてデプロイを手動で行うのが面倒でした。
このブログも記事を書き終えてgit pushするたびにGitHub Actionでデプロイしているので、
GitHub ActionでFlutter Webもデプロイすることにしました。
意外と難しいかと思いましたが、実際にやってみるとそこまで難しくありませんでした。
まず設定が必要なのは2つです。
まずFlutter Web統合の手順に従って設定し、FlutterプロジェクトでFirebase Hostingを有効にする必要があります。
既存プロジェクトの初期化の部分で指示された設定の代わりに、firebase.jsonに以下のように設定しました。
"hosting": {
"public": "build/web",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"frameworksBackend": {
"region": "asia-east1"
},
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}そしてfirebase init hosting:githubを実行すると.github/workflowsにファイルが2つ生成されます。
デプロイ設定はfirebase-hosting-merge.ymlファイルで行うことにしました。
使用しているシークレットキーがあるのでUsing secrets in GitHub Actionsの手順に従って使用するシークレットキーを追加してください。いくつかのキーを使用しているので追加しました。
そしてfirebase_options.dartファイルの内容もシークレットキーとして追加しました。これをアクション内で生成したかったのですが、そうするとfirebase、flutterfireもインストールする必要があるため、簡単に解決するためにシークレットキーとして設定しました。
では今回の記事の核心であるaction用ymlファイルを見ていきましょう。
name: Deploy to Firebase Hosting on merge
'on':
push:
branches:
- main
jobs:
build_and_deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Set up Flutter
uses: subosito/flutter-action@v2
with:
channel: stable
flutter-version-file: pubspec.yaml
- name: Decode firebase_option
run: echo "$firebase_options_dart" > lib/firebase_options.dart
env:
firebase_options_dart: ${{secrets.ファイル用シークレットキー}}
- name: Install dependencies
run: dart pub get
- name: Build runner
run: dart run build_runner build --delete-conflicting-outputs
- name: Build for the web
run: flutter build web --wasm
- name: Deploy to Firebase
uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: '${{ secrets.Firebaseが自動追加したシークレットキー }}'
firebaseServiceAccount: '${{ secrets.Firebaseが自動追加したシークレットキー }}'
projectId: 連携したfirebaseプロジェクトID
channelId: liveファイル内のDeploy to Firebaseの部分はfirebase init hosting:githubコマンドを実行済みであれば自動で追加されているため、特に変更する必要はありません。
ビルド段階の前に以下のようなファイルが必要です。
ex) firebase_options.dart, *.freezed.dart, *.g.dart
そのため、Decode firebase_optionとBuild runnerでファイルを生成しました。
このファイルが全体的に行うことは以下の通りです。
- デプロイ環境にFlutterをインストール
- firebase_options.dartを作成
- 依存関係のインストール
- Code generatorの実行
- Webビルド
- Firebaseにデプロイ
これで5分ほどかかりますが、FlutterをWebとしてデプロイできます。
安全のために2FAも追加することをお勧めします！
上記の内容からflutter actionでキャッシュする部分を削除しましたが、必要な方は適用してみてください！
flutter-version-fileはバージョンを固定しているためこのように使用しました。
状況が異なる方はこの部分を変更する必要があります。
Presents are made for the pleasure of who gives them, not the merits of who receives them.
— Carlos Ruiz Zafon
