1.Firebaseプロジェクトの確認
URL: Firebase (https://console.firebase.google.com/)
Firebaseアカウント、Firebaseプロジェクトを未だ未作成の場合、ここで作成して下さい。
→別記事「[基礎知識]Firebaseの新規プロジェクト作成手順」参照
![](https://i0.wp.com/zakku-spot.com/wp-content/uploads/2024/01/image-173.png?resize=355%2C180&ssl=1)
2.アプリの追加
URL: Firebase (https://console.firebase.google.com/)
以下の手順でアプリの追加を行って下さい。
①アプリを追加したいプロジェクトを選択して下さい。
![](https://i0.wp.com/zakku-spot.com/wp-content/uploads/2024/01/image-132.png?resize=600%2C282&ssl=1)
②「+アプリを追加」をクリック後、表示されたウェブアイコンをクリックして下さい。
![](https://i0.wp.com/zakku-spot.com/wp-content/uploads/2024/01/image-175.png?resize=601%2C295&ssl=1)
③ニックネーム、サブドメインを入力し、「アプリを登録」をクリックして下さい。
※『このアプリのFirebase Hostingも設定します』にチェックを入れるとサブドメイン設定ができます。
![](https://i0.wp.com/zakku-spot.com/wp-content/uploads/2024/01/image-176.png?resize=526%2C383&ssl=1)
④必要な方は、Firebase SDK の追加を行います。
※ここでは何もせず「次へ」をクリックします。
![](https://i0.wp.com/zakku-spot.com/wp-content/uploads/2024/01/image-178.png?resize=473%2C600&ssl=1)
上記記載のFirebase SDK 追加用のコード:
npm とモジュール バンドラ(webpack や Rollup など)をすでに使用している場合は、次のコマンドを実行して最新の SDK をインストールできます。(詳細)。
npm install firebasecontent_copy
次に Firebase を初期化し、使用するプロダクトの SDK の利用を開始します。
// Import the functions you need from the SDKs you need
import { initializeApp } from “firebase/app”;
import { getAnalytics } from “firebase/analytics”;
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app’s Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: “AIzaSyB69Xt0wA46U7RX42-pQK6_MDRN01YI4HU”,
authDomain: “flutter2024010601.firebaseapp.com”,
projectId: “flutter2024010601”,
storageBucket: “flutter2024010601.appspot.com”,
messagingSenderId: “304069982134”,
appId: “1:304069982134:web:dfbe5128763353fcef7317”,
measurementId: “G-KW9PNCQ60E”
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
上図に複数あるリンク内容:
注釈)
・nmp:https://www.npmjs.com/
・webpack:https://webpack.js.org/
・Rollup:https://rollupjs.org/
・詳細:DK バージョン: 名前空間方式とモジュラー・モジュラー JavaScript SDK
・使ってみる:「Firebase を JavaScript プロジェクトに追加する」
・ウェブ SDK API リファレンス:「API Reference」
・サンプル:Fireアプリ学習用サンプル(たくさんある!)
⑤必要な方は、firebase-tools の更新(もしくは新規インストール)を行います。
※firebase-toolsがインストールされているかどうかは、次のコマンドで確認できます。
> firebase –version ※バージョンが13以上ならばひとまずOKでしょう。
※ここでは何もせず「次へ」をクリックします。
![](https://i0.wp.com/zakku-spot.com/wp-content/uploads/2024/01/image-179.png?resize=600%2C262&ssl=1)
CLI(firebase-tools)を最新版に更新(もしくは新規インストール)するコマンド:
> npm install -g firebase-tools
上手に複数あるリンク内容:
⑥以下の手順で、Firebase Hosting へのデプロイを行って下さい。
![](https://i0.wp.com/zakku-spot.com/wp-content/uploads/2024/01/image-182.png?resize=452%2C600&ssl=1)
(a)firebase.jsonでサイトを指定する:
flutterプロジェクトディレクトリにfirebase.jsonが出来ていますので、以下の様に1行追加して下さい。
※下図の追加部分には、前手順③で設定したサブドメイン(ここでは『our-test–app』)です。
![](https://i0.wp.com/zakku-spot.com/wp-content/uploads/2024/01/image-184.png?resize=408%2C293&ssl=1)
(b)Webアプリをデプロイする:
> firebase deploy –only hosting:our-test–app
![](https://i0.wp.com/zakku-spot.com/wp-content/uploads/2024/01/image-185.png?resize=600%2C247&ssl=1)
(c)Webアプリの表示(確認)
上記(b)実行結果にあるHosting URL(ここでは、https://our-test–app.web.app)をブラウザで表示して下さい。ローカル環境で作成したWebアプリが動作したら成功です。
![](https://i0.wp.com/zakku-spot.com/wp-content/uploads/2024/01/image-186.png?resize=600%2C403&ssl=1)
もし以下の画面が表示された場合は、Webビルドのデプロイ準備作業を見直して下さい。
![](https://i0.wp.com/zakku-spot.com/wp-content/uploads/2024/01/image-187.png?resize=424%2C278&ssl=1)
以上で「[基礎知識]Firebaseプロジェクトページでのアプリ追加」は完了です。この作業の前後の流れについては、別記事「[基礎知識]Firebase HostingへのFlutter Web登録手順」を参照して下さい。