はじめてのFirebase入門｜FirestoreとHostingでWebアプリを公開してみよう

こんにちは！スタッフのやまさきです。

先日、初めてFirebaseなるものに触れてアプリを作成してみました。
その投稿はこちらから。

デジタルスタジオのタイマー管理業務を改善するため、FirebaseとNext.jsを使ってリアルタイムWebアプリを構築した開発事例。Firestoreによる同期、管理画面と表示画面の分離、Firebase Hostingでのデプロイまでの実装プロセスと、開発中につまずいたポイントを解説します。

いろいろと曖昧な部分があったので、もう一度整理＆自分メモ用にまとめ直しておきます。

はじめに

「Webアプリを作って公開してみたい」
そう思っても、サーバーの準備や設定でつまずいてしまうことは少なくありません。

そこでおすすめなのが Firebase です。
Firebaseを使うと、サーバーを用意しなくても、

データを保存する（Firestore）　※いわゆるデータベース
Webサイトを公開する（Hosting）　※いわゆるWebサーバー

といったことが簡単に実現できます。

この記事では、初めての方向けに
Firestore + Hosting を使ってWebアプリを公開する流れを解説します。

Firebaseとは？

Firebaseは、Googleが提供している開発プラットフォームです。

アプリ開発に必要な機能がまとめて提供されており、主に以下のようなことができます。

データベース（Firestore）
認証（ログイン機能）
Hosting（Webサイト公開）

今回はこの中から、次の2つに絞って解説します。

Firestore：データを保存する
Hosting：Webサイトを公開する

Firestoreとは？（データベースの基礎）

Firestoreは、クラウド上にデータを保存できるデータベースです。

特徴は以下の通りです。

サーバーの準備が不要
リアルタイムでデータ更新ができる
シンプルな構造で扱いやすい

データ構造のイメージ

Firestoreは、次のような構造になっています。

コレクション（collection）
  └ ドキュメント（document）
      └ フィールド（field）

例として、投稿データを保存する場合

posts（コレクション）
  └ post1（ドキュメント）
      ├ title: "はじめての投稿"
      ├ content: "Firestore便利！"
      └ likes: 10

ポイントは、「JSONのような形でデータを持つ」という点です。

Hostingとは？（Web公開の仕組み）

Hostingは、作成したWebサイトをインターネット上に公開する仕組みです。

通常はサーバーを用意する必要がありますが、Firebase Hostingではそれが不要になります。

Hostingのメリット

コマンド1つで公開できる
https（SSL）が自動で使える
無料枠がある

事前準備

以下を準備してください。

Googleアカウント
Node.js（インストール）
Firebase CLI

Firebase CLIのインストール

npm install -g firebase-tools

ログインします。

firebase login

Firebaseプロジェクトを作成

Firebaseコンソールにアクセス
「プロジェクトを追加」をクリック
プロジェクト名を入力して作成

その後、Webアプリを追加すると、以下のような設定情報が表示されます。

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "xxxxx.firebaseapp.com",
  projectId: "xxxxx",
};

※この情報は後ほど使用します

Firestoreを使ってみる

まずはFirestoreを有効化します。

コンソールで「Firestore」を選択
「データベースの作成」
テストモードで開始（学習用）

データを書き込む例

import { initializeApp } from "firebase/app";
import { getFirestore, addDoc, collection } from "firebase/firestore";

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

await addDoc(collection(db, "posts"), {
  title: "はじめての投稿",
  content: "Firestore便利！",
  likes: 0
});

データを読み込む例

import { getDocs, collection } from "firebase/firestore";

const querySnapshot = await getDocs(collection(db, "posts"));
querySnapshot.forEach((doc) => {
  console.log(doc.data());
});

Hostingで公開してみる

プロジェクトフォルダで以下を実行します。

初期化

firebase init

実行後、以下のようなURLが発行されます。

https://xxxxx.web.app

このURLにアクセスすると、Webサイトが公開されています。

ここまででできること

ここまでで、次のようなことができるようになります。

データを保存できるWebアプリ
インターネット上に公開されたサイト

例えば：

おみくじアプリ
メモ帳アプリ
簡単な掲示板

ここまでのまとめ

Firebaseを使うことで、

サーバー不要
簡単に公開できる
データも扱える

という環境がすぐに整います。

特に初学者にとっては、
「作ってすぐ公開できる」体験が得られるのが大きなメリットです。

Firebase無料プラン（Sparkプラン）の注意点

Firebaseには無料で使える「Sparkプラン」がありますが、いくつか注意点があります。

利用制限（上限）がある

無料プランでは、各機能に上限が設定されています。

Firestoreの主な制限

読み取り回数：1日あたり上限あり
書き込み回数：1日あたり上限あり
保存容量：制限あり

例えば、アクセスが増えると「データの読み取り回数」が一気に増えるため、
想定より早く上限に達することがあります。

上限に達するとどうなる？

無料枠を超えると、以下の状態になります。

データの読み書きができなくなる
アプリが正常に動作しなくなる

※自動で課金されるわけではありません（Sparkプランの場合）

Hostingにも制限がある

Firebase Hostingにも、以下のような制限があります。

転送量（トラフィック）に上限あり
同時接続数の制限

通常の学習用途では問題ありませんが、
アクセスが集中すると表示が遅くなる・制限にかかる可能性があります。

セキュリティルールに注意

Firestoreを「テストモード」で使い始めると、誰でもデータにアクセスできる状態になります。

これは学習には便利ですが、そのまま公開すると危険です。

例（危険な状態）

allow read, write: if true;

この状態だと、第三者がデータを自由に書き換えることができます。

👉 公開する場合は、必ずルールを見直しましょう。

長期間放置するとロックされることがある

Firestoreのテストモードには有効期限（通常30日）があります。

期限を過ぎると、

データにアクセスできなくなる
エラーが発生する

といった状態になります。

うっかり過ごしてアプリが使えない状態にならないように！

本格運用する場合は有料プランへ

無料プランは学習・試作には最適ですが、

アクセスが増えてきた
サービスとして公開したい

という場合は、有料プラン（Blazeプラン）への移行を検討します。

まとめ（重要ポイント）

無料プランには「回数・容量」の制限がある
上限を超えるとアプリが動かなくなる
セキュリティルールは必ず確認する
本番運用は有料プランを検討

おわりに

Firebaseは、アイデアをすぐ形にできる強力なツールです。
ぜひ自分のアプリを作って公開してみてください。

自分で作ったアプリが公開できるのは楽しいですよねー🎵