[基礎知識]Firebaseプロジェクトページでのアプリ追加

1月 8, 2024
0 0
Read Time:1 Minute, 30 Second

1.Firebaseプロジェクトの確認

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

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

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

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

2.アプリの追加

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

以下の手順でアプリの追加を行って下さい。

①アプリを追加したいプロジェクトを選択して下さい。

②「+アプリを追加」をクリック後、表示されたウェブアイコンをクリックして下さい。

③ニックネーム、サブドメインを入力し、「アプリを登録」をクリックして下さい。
※『このアプリのFirebase Hostingも設定します』にチェックを入れるとサブドメイン設定ができます。

④必要な方は、Firebase SDK の追加を行います。
※ここでは何もせず「次へ」をクリックします。

上記記載の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でしょう。
※ここでは何もせず「次へ」をクリックします。

CLI(firebase-tools)を最新版に更新(もしくは新規インストール)するコマンド:

> npm install -g firebase-tools

上手に複数あるリンク内容:

Firebase CLI リファレンス
npmのアクセス権

⑥以下の手順で、Firebase Hosting へのデプロイを行って下さい。

(a)firebase.jsonでサイトを指定する:

flutterプロジェクトディレクトリにfirebase.jsonが出来ていますので、以下の様に1行追加して下さい。
※下図の追加部分には、前手順③で設定したサブドメイン(ここでは『our-test–app』)です。

(b)Webアプリをデプロイする:

> firebase deploy –only hosting:our-test–app

(c)Webアプリの表示(確認)

上記(b)実行結果にあるHosting URL(ここでは、https://our-test–app.web.app)をブラウザで表示して下さい。ローカル環境で作成したWebアプリが動作したら成功です。

もし以下の画面が表示された場合は、Webビルドのデプロイ準備作業を見直して下さい。

別記事「Webビルドのデプロイ準備」参照

以上で「[基礎知識]Firebaseプロジェクトページでのアプリ追加」は完了です。この作業の前後の流れについては、別記事「[基礎知識]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%

コメントを残す