firebase

2025/10/27 Electron

firebase料金体系

	Freeプラン	Blazeプラン
firebase hosting（データ転送）		10GB 360MB/dayまで無料（超過すると$0.026/GBストレージ、$0.15/GB転送）
データベース	使用不可	NoSQL
firebase storage	使用不可	5GBストレージ、1GB/日転送まで無料（超過すると1GBストレージあたり$0.026、1GB転送あたり$0.12かかる）※1
firebase authentication		メールやパスワード認証が無制限に無料で使える（電話認証は1万回まで無料）

※1 … Storage作成画面で「料金不要のロケーション」（US-CENTRAL1、East、Westの3択）を選ばないと無料枠が適用されない。また、fierbase initで使う機能にStorageを選んだ場合、Firebaseの管理画面でStorageを使わずに「firebase deploy」すると「Error: Firebase Storage has not been set up on project ‘reduxproject-26f9a’. Go to https://console.firebase.google.com/project/reduxproject-26f9a/storage and click ‘Get Started’ to set up Firebase Storage.」というエラーが発生します

プロジェクトの作成とアプリの登録

[https://blog.shinonome.io/yi-nian-sheng/]

Firebase Hosting: アプリ公開用のサーバーなので「設定する」にチェック

プロジェクト名	project202509
アプリ名	app202509

src > firebase.js （FirebaseSDKの追加）

// 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 = {
   /// 省略 ///
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

Firebase CLIのインストール

npm install -g firebase-tools

インストールされたか確認します

firebase --version

Firebase Hosting へのデプロイ

$firebase コマンドを使うために、firebaseをインストールします

cd myApp
npm install firebase

これによって次のコマンドが使えるようになりました

$firebase login
$firebase init
$firebase deploy

Firestore Database

firebaseホームページのCloud Firestoreでデータベースをテストモードで新規作成します。

「コレクションを開始」ボタンからデータを何個か入れておきます。

collection ID: posts

document ID: post1, post2, post3

field: title(string), date(timestamp), contents(string)

Storage

ストレージを使うためには無料プラン（Spark）から従量課金制プラン（Blaze）にアップグレードしないといけません。今回は使わないでおきます。

src > firebase.js （コードの追記）

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore } from "firebase/firestore";  <-- データベースを使う場合は追加
import { getStorage } from "firebase/storage"; <-- ストレージを使う場合は追加
// 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 = {
   /// 省略 ///
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const db = getFirestore(app); <-- データベースを使う場合は追加
const storage = getStorage(app);  <-- ストレージを使う場合は追加

export default db; <-- 追加

Firebaseにログインする

firebase login

Firebaseの初期化

firebase init  // ローカルのpackage.jsonを見て、Firebaseサーバー側がパッケージをインストールします

? Which Firebase features do you 
want to set up for this directory?
---> Hosting と Firestore　にチェックを入れてEnter

? Please select an option
---> Use an existing project  を選択　　※1

? What do you want to use as your 
public directory? (public)
---> デプロイするディレクトリを選択します。何も入力せずにEnterを押せばpublicディレクトリをデプロイできます

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
---> Noを選びます（404.htmlが作成されます）Yesを選ぶとfirebase.jsonにリライト設定が追記されます

? Set up automatic builds and deploys with GitHub?
---> No

? File public/index.html already 
exists. Overwrite?
---> Noを選びます（Yesを選ぶとindex.htmlがFirebase仕様になり、<div id="root"></div>が削除されてしまいます）

+  Firebase initialization complete!

※1 … Error: Failed to list Firebase projects. See firebase-debug.log for more info.　というエラーが発生する場合は、一度ログアウト（firebase logout）してから再度ログイン（firebase login）してください

Firebaseにデプロイする

npm run build
firebase deploy

Hosting URLにアクセスして真っ白な画面が出てきます。

これはpublicフォルダの中にある初期ファイルのindex.htmlがデプロイされたためです。

publicディレクトリの中身がデプロイされるため、作成したindex.htmlとstaticディレクトリをpublicディレクトリの中に移動させます。（index.htmlは上書きします）

その後でもう一度 firebase deploy します。それでも真っ白な場合はブラウザのキャッシュを削除すればOKです（Shift+F5）

reference : https://zenn.dev/umi_mori/books/1f8ec725ae4b90/viewer/3030e8

補足：firebase databaseからのデータ取得

import { useEffect, useState } from 'react';
import db from './firebase';
import { collection, getDocs } from 'firebase/firestore';


function App(){
  const [posts, setPosts] = useState([]);
  
  useEffect( ()=>{
    const postData = collection(db, 'posts'); <--postsはFierbaseのHP上で決めたコレクションの名前
    getDocs(postData).then( (snapshot)=>{
      console.log( snapShot.docs.map((doc)=>doc) );
    });
  });
  
  return <div className='App'></div>;
}

export default App;

独自ドメインの割り当て

Firebase Hostingの管理画面で「カスタムドメインを追加」をクリックしてドメイン名を入力すると、

AレコードとTXTレコードが表示されます

Conoha WingのDNSでTXTレコードとAレコードを追加します

これによってドメインのDNSをホスティングサーバーであるFirebaseが認識できるようになりますが、

DNS変更の反映にはすこし時間がかかります

【https://project202509-21dc1.web.app/】

reference : https://zenn.dev/helmikuusininen/articles/9141380f92cb95

プロジェクトの削除

[https://qiita.com/kokogento/items/bcb64b79fdce4c431664]

BACK