Zakku-Spot.com

気になる情報のリサーチブログ - Reserch blog of information you care about -

[基礎知識]Firebase HostingへのFlutter Web登録手順

1月 6, 2024
0 0
Read Time:1 Minute, 38 Second

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がインストールされていない場合、以下でインストールして下さい。

URL: https://nodejs.org/en

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

3.Firebase CLIのダウンロード

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

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

4.Flutter Web アプリ の準備

(1)作成・動作確認

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

別記事「[基礎知識]Flutter開発環境準備」参照

→別記事「[基礎知識]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プロジェクトの設定を行うもので、具体的には以下の変更が発生します:

  1. Firebase設定ファイルの生成: firebase.json という設定ファイルがプロジェクトのルートディレクトリに生成されます。このファイルはFirebaseプロジェクトの構成を定義します。
  2. 公開ディレクトリの指定: 「public」という入力は、Firebase Hostingで公開するファイルが格納されるディレクトリを指定します。この場合、プロジェクトのルートディレクトリ内に「public」という名前のディレクトリがFirebaseの公開対象として設定されます。
  3. その他の設定ファイル: .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プロジェクトの設定を行うもので、具体的には以下の変更が発生します:

  1. Firebase設定ファイルの生成: firebase.json という設定ファイルがプロジェクトのルートディレクトリに生成されます。このファイルはFirebaseプロジェクトの構成を定義します。
  2. 公開ディレクトリの指定: 「public」という入力は、Firebase Hostingで公開するファイルが格納されるディレクトリを指定します。この場合、プロジェクトのルートディレクトリ内に「public」という名前のディレクトリがFirebaseの公開対象として設定されます。
  3. その他の設定ファイル: .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登録手順は、以上です。

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

コメントを残す