Flutterで構築したWebアプリを、とりあえずFirebaseに乗っける

掲題の通り。

冗長な手順もあるかと思いますので適宜読み替えてください。

1. Flutterの初期化

• GitHub上でリポジトリを作成
  • 💡 Flutterがsnake_caseなので、リポジトリ名もsnake_caseにしておくとわかりやすい
• 作成したリポジトリをClone
• Cloneしたディレクトリの一つ上のフォルダに移動
  • Git BashやVSCodeのターミナルを使うと良い
• Flutterを最新化
  • flutter upgrade
• Flutterプロジェクトを作成する
  • flutter create your_app_name
• your_app_nameフォルダに移動し、実行する
  • cd your_app_name
  • flutter run -d chrome
• デフォルトのカウンタアプリが正常に起動できたら、ブラウザを閉じる
• pubspec.yamlを更新して、パッケージを取得する
  • flutter pub get

2. Firebaseプロジェクトの作成

Firebaseコンソールで操作する。
https://console.firebase.google.com/u/3/?hl=ja

• Firebaseのプロジェクトを新規作成する
• Firebase Authentificationの「プロバイダ」でメール/パスワードを追加する
• 「Firebase Datastore」を有効化する（データベースの作成）
• 「Hosting」を有効化する

3. Firebaseプロジェクトの初期化

• firebaseをインストールする
  • npm install firebase
• firebaseのツールをインストールする
  • npm install firebase-tools（-gは外しておく）
• firebaseのツールにログインする
  • firebase login
    • うまくいかない時は下記で再実行
      • --interactiveを足す firebase login --interactive
      • ネットワークの接続状況を確認しつつ、--reauthを足す firebase login --interactive --reauth
• firebaseプロジェクトとして初期化する
  • firebase init
    • Use an existing projectを選択し、作成したFirebaseプロジェクトを指定
    • What do you want to use as your public directory? ⇒ build/web
    • Set up automatic builds and deploys with GitHub? ⇒ Y

4. 自動デプロイの設定

• firebase-hosting-pull-request.ymlおよびfirebase-hosting-merge.ymlを下記のように修正する

修正前

      - run: npm ci && npm run build

修正後

      - uses: subosito/flutter-action@v2
        with:
          channel: 'stable'
      - run: flutter pub get
      - run: flutter build web --release

5. FlutterとFirebaseの連携部分を調整する

参考：https://firebase.google.com/docs/flutter/setup?hl=ja&platform=web

• コマンドライン ツールをインストールする
  • dart pub global activate flutterfire_cli
• firebase.jsonをfirebase_bk.jsonにリネームして、退避しておく
• firebase.jsonを作成する
  • flutterfire configure
    • firebase_oprions.dartを生成するため、noを入力する
    • 💡 更新されたfirebase.jsonにbuild/webの記載が残っている場合は、取っておいたfirebase_bk.jsonを削除する。残っていない場合は両者の記載をくっつける
• 関連パッケージをインストールする
  • flutter pub add cloud_firestore firebase_auth
• lib/main.dartのvoid main()を下記のように調整する（importも併せて追加する）

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'firebase_options.dart';

void main() async {
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

最初のデプロイ

• アプリをビルドする
  • flutter build web --release
• 最初のデプロイをする
  • firebase deploy

firebase.jsonのpublicに記述しているテキストが想定通りbuild/webになっていることを確認する（綴りミスに注意）