Flutterで開発したWebアプリをFirebaseにデプロイしようと、Firebaseに登録してみました。
URL: (Firebase CLI リファレンス) https://firebase.google.com/docs/cli?hl=ja
URL: (Firebase CLI Github) https://github.com/firebase/firebase-tools
まず、Firebase CLIをインストールする必要があります。
これはFirebaseのサービスをローカルで操作できるようにするコマンドラインツールです。
1.Firebaseプロジェクトの確認
URL: Firebase (https://console.firebase.google.com/)
Firebaseアカウント、Firebaseプロジェクトを未だ未作成の場合、ここで作成して下さい。
→別記事「[基礎知識]Firebaseの新規プロジェクト作成手順」参照
2.Nodo.js、npmの確認
Nodo.js、npmがインストールされていない場合、以下でインストールして下さい。
※node -v コマンド、npm -v コマンドでバージョン情報が表示されればインストールされています。
※Current版で動作確認済みです。
3.Firebase CLIのダウンロード
Firebase CLIがインストールされていない場合、以下でインストールして下さい。
ダウンロード元:https://firebase.tools/
4.Flutter Web アプリ の準備
(1)作成・動作確認
Flutter Web アプリを動作未確認または未作成の場合、以下で作成・動作確認して下さい。
→別記事「[基礎知識]IISへのFlutter Webデプロイ手順」参照
5.Firebaseログイン
以下のコマンドでFirebaseにログインします。
> firebase login
「Y」を選択します。
もしセキュリティソフトが接続許可を求めてきたら許可します。
アカウント選択、アカウントへのアクセス許可を行います。
6.Firebaseの初期化
ローカル環境のFlutterプロジェクトを以下の手順で接続します。
> cd <flutterプロジェクトフォルダ(※pubspec.yamlが置いてあるフォルダ)>
> firebase init hosting
以下、対話形式で質問されますので、ここでは以下の選択・入力を行います。
質問 | 選択・入力 |
---|---|
Are you ready to proceed? (Y/n) | Y |
Please select an option: (Use arrow keys) | Use an existing project ※前手順1で作成したプロジェクトを使う為 |
Select a default Firebase project for this directory: (Use arrow keys) | (前手順1で作成したプロジェクトを選択) もしくは (前手順1で作成したプロジェクト名入力) |
プロジェクトID入力を要求された場合→ | (上記と同じ文字列を入力) |
What do you want to use as your public directory? (public) | public (そのままEnterキー押下) |
Configure as a single-page app (rewrite all urls to /index.html)? (y/N) | N |
Set up automatic builds and deploys with GitHub? (y/N) | N |
上記「6.Firebase初期化」により変更されたこと:
上記作業中、What do you want to use as your public directory? という質問に対して、 public と入力、実施を完了しました。 さて、 上記の、¥build¥web フォルダ配下のファイルやフォルダに、 どのような変更が発生しているのでしょうか?という疑問が湧くかもしれませんが、
firebase init
コマンドを実行して「public」と入力した場合、build/web
フォルダの内容には直接の変更は発生しません。この操作はFirebaseプロジェクトの設定を行うもので、具体的には以下の変更が発生します:
- Firebase設定ファイルの生成:
firebase.json
という設定ファイルがプロジェクトのルートディレクトリに生成されます。このファイルはFirebaseプロジェクトの構成を定義します。 - 公開ディレクトリの指定: 「public」という入力は、Firebase Hostingで公開するファイルが格納されるディレクトリを指定します。この場合、プロジェクトのルートディレクトリ内に「public」という名前のディレクトリがFirebaseの公開対象として設定されます。
- その他の設定ファイル:
.firebaserc
や他の設定ファイルが生成される場合もあります。これらはプロジェクトのFirebaseプロジェクトIDや他の設定情報を含みます。
Flutterのbuild/web
ディレクトリには直接影響しませんが、Firebase HostingにFlutterのWebビルドをデプロイする場合、以降の「7.Webビルドのデプロイ準備」として、build/web
ディレクトリの内容をpublic
ディレクトリ(または指定したディレクトリ)にコピーする必要があります。
7.Webビルドのデプロイ準備
¥build¥web
ディレクトリの全ての内容を、¥public
ディレクトリに上書きコピーして下さい。
本作業の意味:
firebase init
コマンドを実行して「public」と入力した場合、build/web
フォルダの内容には直接の変更は発生しません。この操作はFirebaseプロジェクトの設定を行うもので、具体的には以下の変更が発生します:
- Firebase設定ファイルの生成:
firebase.json
という設定ファイルがプロジェクトのルートディレクトリに生成されます。このファイルはFirebaseプロジェクトの構成を定義します。 - 公開ディレクトリの指定: 「public」という入力は、Firebase Hostingで公開するファイルが格納されるディレクトリを指定します。この場合、プロジェクトのルートディレクトリ内に「public」という名前のディレクトリがFirebaseの公開対象として設定されます。
- その他の設定ファイル:
.firebaserc
や他の設定ファイルが生成される場合もあります。これらはプロジェクトのFirebaseプロジェクトIDや他の設定情報を含みます。
Flutterのbuild/web
ディレクトリには直接影響しませんが、Firebase HostingにFlutterのWebビルドをデプロイする場合、build/web
ディレクトリの内容をpublic
ディレクトリ(または指定したディレクトリ)にコピーする必要があります。
8.Firebaseプロジェクトページでのアプリ追加
→別記事「[基礎知識]Firebaseプロジェクトページでのアプリ追加」参照
9.公開Webアプリの動作確認
Firebaseプロジェクトページに登録されているURL(ここでは、https://our-test–app.web.app)を、ブラウザで表示して下さい。
ローカル環境で作成したWebアプリが動作したら成功です。
Firebase HostingへのFlutter Web登録手順は、以上です。