Flutter入門

【5分で分かる】Flutter製WebアプリをFirebase Hostingにデプロイする | Flutter入門

も、木村です。本業はデータサイエンティスト、副業でアプリ開発をしています。

本記事は、Flutter製WebアプリをFirebase Hostingにデプロイする方法の記事です。

想定読者

Flutter製WebアプリをFirebase Hostingにデプロイしたい方

検証環境

macOS Big Sur 11.5.2
Flutter 2.8.1

前提

本記事の内容は以下の環境構築が完了していることを前提としています。

  • Flutterを導入済
  • GitHubアカウント作成済み
  • Git導入済み
  • Firebase CLI 導入済み

作業の流れ

  1. Flutterアプリを作成(デフォルトプロジェクトを使用)
  2. GitHubにFlutterプロジェクトを連携
  3. Firebaseでアプリ登録
  4. Firebase CLI でFirebase Hostingを導入する
  5. GitHub Actions の設定
  6. デプロイ

1. Flutterアプリを作成(デフォルトプロジェクトを使用)

任意のディレクトリでFlutterプロジェクトを作成します。

# プロジェクト作成
flutter create firebase_deploy_demo
# プロジェクト配下に移動
cd firebase_deploy_demo
# Flutterの実行
flutter run

2. 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のソースコードをご確認ください。

https://github.com/kimuson/firebase_deploy_demo/blob/d156a26ba48b2e4e6901fd5bb67dce013a4e711d/.github/workflows/firebase-hosting-merge.yml#L14-L20

https://github.com/kimuson/firebase_deploy_demo/blob/d156a26ba48b2e4e6901fd5bb67dce013a4e711d/.github/workflows/firebase-hosting-pull-request.yml#L11-L18

6. デプロイ

最後は、ソースコードをGitHubに連携して資材をデプロイします。

git add -A
git commit -m "deploy test"
git push

ここまで来たらGitHub Actionsのタブを確認してデプロイ状況を確認してください。

以下のように緑色のラベルが表示されたら正常にデプロイ処理が完了したことになります。

Firebaseの「Hosting」ページを開くとURLが公開されているのでアクセスするとデプロイした資材を確認できます。

まとめ

スムーズにいけば30分〜1時間ほどで本手順を完了することができます。

デプロイが思ったより簡単ではなかったでしょうか?

簡単なWebアプリケーションをサクッと公開したいときにおすすめです。

本記事のソースコードは以下で公開しています。

https://github.com/kimuson/firebase_deploy_demo

最新のFlutterの勉強方法 まとめ

Flutterを入門から実践レベルまで一通り学習できる方法をまとめました。

Flutterの勉強方法を知る

Flutterを動画で学習する

Flutterを書籍で学習する