も、木村です。本業はデータサイエンティスト、副業でアプリ開発をしています。
本記事は、Flutter製WebアプリをFirebase Hostingにデプロイする方法の記事です。
Flutter製WebアプリをFirebase Hostingにデプロイしたい方
検証環境
macOS Big Sur 11.5.2
Flutter 2.8.1前提
本記事の内容は以下の環境構築が完了していることを前提としています。
- Flutterを導入済
- GitHubアカウント作成済み
- Git導入済み
- Firebase CLI 導入済み
作業の流れ
- Flutterアプリを作成（デフォルトプロジェクトを使用）
- GitHubにFlutterプロジェクトを連携
- Firebaseでアプリ登録
- Firebase CLI でFirebase Hostingを導入する
- GitHub Actions の設定
- デプロイ
1. Flutterアプリを作成（デフォルトプロジェクトを使用）
任意のディレクトリでFlutterプロジェクトを作成します。
# プロジェクト作成
flutter create firebase_deploy_demo
# プロジェクト配下に移動
cd firebase_deploy_demo
# Flutterの実行
flutter run2. GitHubにFlutterプロジェクトを連携
GitHubで新規レポジトリを作成してください。
任意のRepository nameを設定して「Create repository」を押下してください。
レポジトリが作成された以下のコマンドからローカル環境にあるFlutterプロジェクトをGitHubのレポジトリへ連携します。
# firebase_deploy_demo直下で実行
git init
git add *
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/<ユーザー名>/firebase_deploy_demo.git
git push -u origin mainこれでソースコードがGitHubで連携されました。
3. Firebaseでアプリ登録
Firebaseのホームページにアクセスしましょう。
Googleアカウントでログインし、「コンソールへ移動」を押下します。
任意のプロジェクト名を入力します。
入力が終わったら「続行」を押下してください。
今回はGoogleアナリティクスを使用しないので、有効をオフにしましょう。
最後に「プロジェクトの作成」を押下します。
プロジェクトの準備ができたら「続行」を
以下のようなダッシュボードが表示されば無事Firebaseプロジェクトが作成されたことになります。
これでFirebase側の登録が完了しました。
4. Firebase CLI でFirebase Hostingを導入する
# firebase_deploy_demo直下で実行
firebase init hosting
...省略...
# すでに作成済みのプロジェクトを使うようにする
? Please select an option: Use an existing project
# Firebaseに設定したプロジェクト名を指定する
? Select a default Firebase project for this directory: fir-deploy-demo-3fb89 (Firebase-deploy-demo)
i Using project fir-deploy-demo-3fb89 (Firebase-deploy-demo)
...省略...
# 公開する資材のディレクトリを指定する
? What do you want to use as your public directory? build/web
# SPAとして設定しない
? Configure as a single-page app (rewrite all urls to /index.html)? No
# GitHubと連携して自動デプロイをする
? Set up automatic builds and deploys with GitHub? Yes
# どのGitHubレポジトリを自動デプロイの対象にするか？
? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) kimuson/firebase_deploy_demo
...省略...
# 毎回のデプロイの前にビルドスクリプトを実行するようにワークフローを設定する？
? Set up the workflow to run a build script before every deploy? Yes
# デプロイの前に実行すべきスクリプトは何ですか？
? What script should be run before every deploy? flutter build web
# PRがマージされたときに、あなたのサイトのライブチャンネルに自動的にデプロイされるように設定する？
? Set up automatic deployment to your site's live channel when a PR is merged? Yes
# あなたのサイトのライブチャンネルに関連する GitHub のブランチの名前は何ですか？
? What is the name of the GitHub branch associated with your site's live channel? main
...省略...
✔ Firebase initialization complete! Firebase Hosting の導入が完了しました。
5. GitHub Actions の設定
先ほどGithubに自動生成されたworkflowのファイルを修正します。
修正対象となるのは以下のファイルです。
- /.github/workflows/firebase-hosting-pull-request.yml
- /.github/workflows/firebase-hosting-merge.yml
上記のファイルに以下を追記してください。
- name: Install Flutter
run: git clone https://github.com/flutter/flutter.git
- name: Add path
run: echo "$(pwd)/flutter/bin" >> $GITHUB_PATH
- name: Download Flutter packages
run: flutter pub get具体的な追加場所はGitHubのソースコードをご確認ください。
6. デプロイ
最後は、ソースコードをGitHubに連携して資材をデプロイします。
git add -A
git commit -m "deploy test"
git push
ここまで来たらGitHub Actionsのタブを確認してデプロイ状況を確認してください。
以下のように緑色のラベルが表示されたら正常にデプロイ処理が完了したことになります。
Firebaseの「Hosting」ページを開くとURLが公開されているのでアクセスするとデプロイした資材を確認できます。
まとめ
スムーズにいけば３０分〜１時間ほどで本手順を完了することができます。
デプロイが思ったより簡単ではなかったでしょうか？
簡単なWebアプリケーションをサクッと公開したいときにおすすめです。
本記事のソースコードは以下で公開しています。
最新のFlutterの勉強方法 まとめ
Flutterを入門から実践レベルまで一通り学習できる方法をまとめました。
