Firebase Hosting完全ガイド|プレビュー機能から独自ドメイン、社内限定公開まで徹底解説

こんな悩みを解決できます

Firebaseでの開発、いきなり本番に反映されるのが怖い…

ローカルでの完璧なテスト環境の作り方がわからない

社内だけで安全にアプリを使いたいけど、方法がわからない

Cloud Functionsのファイル構成がよくわからない

Firebaseを使ってWebアプリを開発していると、「これって、いきなり本番環境にデプロイされちゃうの?」「チーム内だけで確認したいんだけど…」といった疑問が浮かんできますよね。

この記事では、そんなFirebase開発における実践的な疑問に、一つずつ丁寧にお答えしていきます。

安全なテスト方法から、社内限定でのセキュアな運用方法まで、この記事を読めばスッキリ解決するはずです。

Firebaseに「仮アップ」機能はある?いきなり本番公開?

読者さん
読者さん

Firebaseって、いきなり本番アップなんですか?事前に確認する「仮アップ」みたいなことはできないのかな…?

ロベルト
ロベルト

ご安心ください!Firebaseには非常に便利な「仮アップ」機能があります。

結論から言うと、いきなり本番に反映されるわけではありません。

Firebase Hostingには「プレビューチャネル」という機能があり、これを使えば安全に「仮アップ」が実現できます。

この機能は、本番のURL(例: `xxx.web.app`)とは全く別の、一時的なプレビュー用URLを生成してくれます。このURLをチームメンバーやクライアントに共有すれば、実際にデプロイされる前に「こんな感じで修正したけど、どうかな?」とレビューしてもらうことが可能です。

プレビューチャネルは有効期限も設定できるため、非常に安全です。

STEP1:ローカルでのテスト(自分用)

まずは自分のPC内だけで動作を確認します。詳細は次のQ2で解説します。

STEP2:プレビューでのテスト(関係者レビュー用)

プレビューチャネルを使い、一時的なURLで関係者に動作や表示を確認してもらいます。

STEP3:本番デプロイ

全員の承認が取れたら、初めて本番のURLにデプロイします。

ローカル環境でのテスト(動作確認)はどうやるの?

読者さん
読者さん

自分のPCだけで動作確認ってできるんですか?どうやってシミュレートするんでしょう?

ロベルト
ロベルト

はい、「Firebase Emulator Suite (エミュレータ スイート)」という公式ツールでシミュレートします。

これは、あなたのパソコンの中に、本物のFirebase環境のミニチュア版を作るようなものです。

Cloud Functions、Authentication(認証)、Hosting、データベース(Firestore)など、主要なサービスのほとんどをローカルで再現できます。

Emulator Suiteの使い方

使い方は非常にシンプルで、エディタのターミナルでコマンドを実行するだけです。

1. 初期設定

最初に一度だけ、プロジェクトのフォルダで設定コマンドを実行します。

2. 起動

firebase emulators:start というコマンドを実行するだけです。

3. 確認

ターミナルに表示される `http://localhost:4000` のようなアドレスにブラウザでアクセスすると、エミュレータの管理画面が開きます。

この管理画面では、Functionsのログを見たり、認証ユーザーを疑似的に作ったりすることが可能です。

メモ

エミュレータを使えば、APIキーの消費や本番環境の料金を一切気にすることなく、何度でも安全にバックエンドの動作確認ができます。

FirebaseでデプロイしたサイトのURLはどうなる?

読者さん
読者さん

デプロイしたら、どんなURLになるんですか?

ロベルト
ロベルト

デフォルトで、2種類のURLが自動的に生成されます。どちらを使っても同じサイトが表示されますよ。

  • あなたのプロジェクトID.web.app
  • あなたのプロジェクトID.firebaseapp.com

この「プロジェクトID」は、あなたがFirebaseプロジェクトを作成したときに決めた、世界で一つだけの名前です。

独自ドメイン設定でWebアプリとして公開される?

読者さん
読者さん

独自ドメインを設定すれば、それでWebアプリとして公開したことになる、という認識で合ってますか?

ロベルト
ロベルト

はい、その通りです。ただ、少し補足があります。

厳密に言うと、Firebase Hostingにデプロイした時点で、前述の `xxx.web.app` というURLで既にWebアプリとして世界中に公開されています。

独自ドメイン(例: `my-report-app.com`)を設定するのは、その公開されているアプリに、より本格的で覚えやすい「表札」をかけるようなものです。

独自ドメインを設定すれば、より信頼性の高い本格的なアプリケーションとして見せることができます。

社内限定で利用し、検索結果に表示させない方法は?

社内ツールとしてFirebaseアプリを使いたい場合、関係者以外には見せたくないし、Googleなどの検索結果にも表示させたくないですよね。これには2つの対策が必要です。両方行うことを強く推奨します。

対策1:認証によるアクセス制限(最も重要)

これが一番確実な方法です。Firebase Authenticationを使って、許可されたユーザーしかログインできないようにします。

例えば、「`@your-company.com` というドメインのGoogleアカウントを持つユーザーのみログインを許可する」といった設定が可能です。

これにより、たとえURLが外部に漏れても、関係者以外はログインページより先に進めなくなり、中身を一切見ることができなくなります。

対策2:検索エンジンへのインデックス拒否

Firebaseの設定ファイル (`firebase.json`) に、検索エンジンに対して「このページは検索結果に出さないでください」とお願いする設定を追加します。

{
  "hosting": {
    "headers": [ {
      "source": "**",
      "headers": [ {
        "key": "X-Robots-Tag",
        "value": "noindex, nofollow"
      } ]
    } ]
  }
}

この `headers` の部分が重要です。これにより、Googleなどの検索ロボットがサイトを訪れても、データを持ち帰らなくなります。

ここに注意

インデックス拒否は、あくまでロボットへのお願いです。悪意のあるアクセスは防げません。必ず対策1の認証と組み合わせてください。

Cloud Functionsの必須ファイルは?index.jsだけ?

Cloud Functionsの必須ファイルを見ていく前に、まずは「Cloud Functionsが一体何をするためのものなのか」を簡単におさらいしておきましょう。

読者さん
読者さん

そもそも、Cloud Functionsって何をするためのものなんですか?

ロベルト
ロベルト

良い質問ですね!簡単に言うと、「特定の出来事(トリガー)をきっかけに、自動でプログラムを実行してくれる」サーバーレス環境のことです。

「サーバーレス」というのがポイントで、面倒なサーバーの構築や管理・運用を一切気にすることなく、バックエンドで動かしたい処理のコードを書くことだけに集中できます。

例えば、こんな自動化ができます
  • トリガー:新しいユーザーが登録されたら
    実行する処理:歓迎メールを自動で送信する
  • トリガー:画像がアップロードされたら
    実行する処理:サムネイル画像を自動で生成する
  • トリガー:データベースに新しいデータが追加されたら
    実行する処理:不適切な単語が含まれていないかチェックする

このように、Webアプリの裏側で動く様々な自動処理を任せられるのがCloud Functionsの強みです。では、そのFunctionsを動かすためにどんなファイルが必要になるかを見ていきましょう。

読者さん
読者さん

Cloud Functionsのコードって、`index.js`に全部書くのが基本なんですか?WordPressみたいに、絶対に必要なファイルってあります?

ロベルト
ロベルト

はい、WordPressのように「お作法」となる基本ファイル構造があります。

Cloud Functions (Node.js環境) にも最低限必要なファイルがあります。特に重要なのは以下の2つです。

Cloud Functionsに必要なファイル

1. package.json(最重要)

プロジェクトの「説明書」です。プロジェクト名や使用するライブラリ、メイン実行ファイルの情報などが書かれています。これが無いと動きません。

2. index.js(または指定ファイル)

実際に実行されるファンクションのコードを記述する本体ファイルです。ここに「Analyticsのデータを取得する関数」などを書いていきます。

幸い、これらのファイル構造は、あなたがゼロから作る必要はありません。

ローカルで `firebase init functions` コマンドを実行すれば、これらの必須ファイルを含んだひな形一式が自動的に生成されます。あなたは、その中の `index.js` にやりたい処理を書き、`package.json` に使いたいライブラリを追加していくだけです。

まとめ

今回は、Firebaseでの実践的な開発フローに関する疑問にお答えしました。

今回のポイント
  • 「仮アップ」はプレビューチャネルで安全に実現できる
  • ローカルテストはEmulator Suiteで完璧にシミュレート可能
  • 社内限定公開は「認証」と「noindex」を組み合わせるのが鉄則
  • Functionsの雛形は `firebase init` で自動生成できる

これらの機能を活用することで、「いきなり本番で怖い」という不安を解消し、安全で効率的な開発を進めることができます。

Firebaseは非常に多機能で奥が深いサービスですが、一つ一つの機能を正しく理解すれば、あなたの強力な武器になるはずです。

よくある質問

Cloud Functionsは、Firebaseのメニューですか?それともGoogle Cloudのメニューですか?
結論から言うと、「もともとはGoogle Cloudのサービスですが、Firebaseの機能としても提供されている」のが正解です。 実は、Firebase自体がGoogleのクラウド基盤(Google Cloud Platform, GCP)上で動いており、Cloud FunctionsはそのGCPの主要な機能の一つです。 Firebaseで利用するものは「Cloud Functions for Firebase」と呼ばれ、Firebase Authentication(認証)やFirestore(データベース)といった他のFirebaseサービスと簡単に連携できるように調整されています。 そのため、FirebaseコンソールからもGoogle Cloudコンソールからも管理できますが、Firebaseプロジェクトで利用する際は「Firebaseのメニューの一部」と考えて差し支えありません。