Read Time:1 Minute, 38 Second

Flutterで開発したWebアプリをFirebaseにデプロイしようと、Firebaseに登録してみました。

目次 index【閲覧時間3分】　click !!>>

URL: (Firebase CLI リファレンス) https://firebase.google.com/docs/cli?hl=ja
URL: (Firebase CLI Github) https://github.com/firebase/firebase-tools

まず、Firebase CLIをインストールする必要があります。
これはFirebaseのサービスをローカルで操作できるようにするコマンドラインツールです。

１．Firebaseプロジェクトの確認

URL: Firebase (https://console.firebase.google.com/)

Firebaseアカウント、Firebaseプロジェクトを未だ未作成の場合、ここで作成して下さい。

→別記事｢[基礎知識]Firebaseの新規プロジェクト作成手順｣参照

２．Nodo.js、npmの確認

Nodo.js、npmがインストールされていない場合、以下でインストールして下さい。

URL: https://nodejs.org/en

※node -v　コマンド、npm -v　コマンドでバージョン情報が表示されればインストールされています。
※Current版で動作確認済みです。

３．Firebase CLIのダウンロード

Firebase CLIがインストールされていない場合、以下でインストールして下さい。

ダウンロード元：https://firebase.tools/

４．Flutter Web アプリの準備

（１）作成・動作確認

Flutter Web アプリを動作未確認または未作成の場合、以下で作成･動作確認して下さい。

→別記事｢[基礎知識]Flutter開発環境準備｣参照

→別記事｢[基礎知識]IISへのFlutter Webデプロイ手順｣参照

５．Firebaseログイン

以下のコマンドでFirebaseにログインします。

>　firebase login

｢Y｣を選択します。

もしセキュリティソフトが接続許可を求めてきたら許可します。

アカウント選択、アカウントへのアクセス許可を行います。

６．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 ※前手順１で作成したプロジェクトを使う為
Select a default Firebase project for this directory: (Use arrow keys)	（前手順１で作成したプロジェクトを選択）もしくは（前手順１で作成したプロジェクト名入力）
プロジェクト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

上記「６．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ビルドをデプロイする場合、以降の「７．Webビルドのデプロイ準備」として、build/webディレクトリの内容をpublicディレクトリ（または指定したディレクトリ）にコピーする必要があります。

７．Webビルドのデプロイ準備

￥build￥web　ディレクトリの全ての内容を、￥public　ディレクトリに上書きコピーして下さい。

本作業の意味：

Firebase設定ファイルの生成: firebase.json という設定ファイルがプロジェクトのルートディレクトリに生成されます。このファイルはFirebaseプロジェクトの構成を定義します。
公開ディレクトリの指定: 「public」という入力は、Firebase Hostingで公開するファイルが格納されるディレクトリを指定します。この場合、プロジェクトのルートディレクトリ内に「public」という名前のディレクトリがFirebaseの公開対象として設定されます。
その他の設定ファイル: .firebaserc や他の設定ファイルが生成される場合もあります。これらはプロジェクトのFirebaseプロジェクトIDや他の設定情報を含みます。

Flutterのbuild/webディレクトリには直接影響しませんが、Firebase HostingにFlutterのWebビルドをデプロイする場合、build/webディレクトリの内容をpublicディレクトリ（または指定したディレクトリ）にコピーする必要があります。