Firebase で Hosting
〜 CLI からファイルを deploy 〜
2025-03-25 作成 福島
TOP > tips > firebase-hosting
[ TIPS | TOYS | OTAKU | LINK | MOVIE | CGI | AvTitle | ConfuTerm | HIST | AnSt | Asob | Shell ]

概要

本稿では Firebase の基本となる Hosting のみを扱います。
できることは、自分がデザインした Web ページを表示することだけです。(まだ) 認証は扱いません。


Firebase は BaaS (Backend as a Service) と呼ばれるサービスに分類されます。

SNS 等、複数の参加者によって構成されるサービスは、個人を特定するためにログイン画面等の認証システムが必要になります。
かつての認証システムは、ユーザ ID とパスワードを画面に記入する方法が一般的でしたが、
最近は手順が複雑になってきたため、この仕組みを構築するのに大変な労力が必要になります。

Firebase にはいくつかのサービスがありますが、ユーザ認証システムをクラウドサービスとして引き受けてくれるのが Firebase Authentication です。
認証は Firebase SDK と呼ばれる API を呼び出して実現します。


Firebase SDK には下記の 2 種類があり、どちらも JavaScript を利用しますが、動作環境が異なります。
 • Web SDK - PC やスマートフォンの Web ブラウザで動作する。 ← 本稿で扱うのはこちら。
 • Admin SDK - サーバにインストールした Node.js で動作する。
Web SDK をサーバで動作させても構いませんが、Admin SDK はサーバでしか動作させません。

Firebase CLI はスタンドアロンバイナリを Linux の LXC で使用します。(普通の Linux でも OK)
Node.js 版は使いません。

0. 準備

Firebase は、GUI のブラウザで機能追加等の操作を行い、コンテンツのデプロイ (配置) にコマンドラインの操作を必要とします。
ここでは Linux の Firefox と LXC を使用します。

Firebase を使用するには、Google のアカウント (Gmail) が必要なので、予め作成しておきます。

Firebase コンソールにログインするアカウント
項目内容備考
ログイン IDfirebase.live.example@gmail.com説明用に用意した架空のメールアドレス。
これを使用して Google のクラウドサーバに無駄な負荷をかけないように。
パスワードpassword

Linux の環境
項目内容備考
LXCAlmaLinux release 9.5 (Teal Serval)本稿記述時の最新版
GUI (OS)
GUI (ブラウザ)Firefox 128.8.0esr

1. Firebase CLI のインストール

スタンドアロンバイナリをダウンロードする。(こちらを参照)
$ wget -O firebase https://firebase.tools/bin/linux/latest

$ file ./firebase
firebase-tools-linux: ELF 64-bit LSB executable, x86-64, version 1 (GNU/Linux), 
dynamically linked, interpreter /lib64/ld-linux-x86-64.so.2, 
BuildID[sha1]=e8e9fc449943f935d469333b1101f224a4c0164f, for GNU/Linux 2.6.32, stripped
$ chmod +x ./firebase
$ ./firebase --version
13.34.0 

2. Firebase へログイン

2-1. Firebase CLI でログインする。
ログインには GUI が必須となるが、LXC で GUI は使わない。(LXC でも GUI は使えるけど、ふつうは使わない)
Firebase CLI で GUI ログインの認証用 URL を発行し、その認証用 URL を使用して他の GUI ブラウザからログインを許可する。

$ ./firebase login --no-localhost

i  Firebase optionally collects CLI and Emulator Suite usage and error reporting information
 to help improve our products. 
 Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy)
 and is not used to identify you.

? Allow Firebase to collect CLI and Emulator Suite usage and error reporting
 information? (Y/n) n ⏎

To sign in to the Firebase CLI:

1. Take note of your session ID:

   354A0

2. Visit the URL below on any device and follow the instructions to get your code: *1

   https://auth.firebase.tools/login
        ?code_challenge=abcdefghijklmnopqrstuvwx_ABCDEFGHIJKLMNOPQR
        &session=01234567-abcd-0123-abcd-0123456789ab
        &attest=0123456789abcdefghijklmnopqrstuvwxyzABCDE


ここで ↑ の認証用 URL を別の GUI ブラウザでアクセスする (下記 2-2)

3. Paste or enter the authorization code below once you have it:

? Enter authorization code: *2
4/0AQSTgQGwhfPe4/yPhJFee2JYJFdMNXwOKYxR10wr5dyfZAd_M_RlP1zeQk-R10wr5dyfZA ⏎

✓  Success! Logged in as firebase.live.example@gmail.com
Firebase は製品を向上するためにオプションで CLI と Emulator Suite の使用状況とエラー情報を収集します。
データは Google のプライバシーポリシーに従って収集され、ユーザーを特定するために使用しません。
Firebase が CLI と Emulator Suite の使用状況とエラー情報を収集することを許可しますか?

Firebase CLIにログインするには以下を実施します。
1. このセッション ID をメモします:
2. どこかのデバイスで以下の URL を開き、指示の通りにコードを取得します:*1
3. 取得した認証コードを以下に入力します:

? 認証コードを入力してください: *2


成功！ログインしました。

*1他のクライアントで GUI のブラウザで指定された URL をアクセスし、認証コードを取得する。
 → そのあとに *2 で認証コードを記入する。
 テキストブラウザ (lynx w3m のような) には対応していない。
2-2. 他の GUI ブラウザから Firebase CLI を認証する。
下記は AlmaLinux の Firefox で操作した場合。(インターネットにアクセスできる GUI ならどの PC で実施しても構わない)

上記 2-1 の 2 (*1) で指定された URL を開く。
 Firebase にログインするメールアドレスを記入し、ボタンをクリックする。
 ⇓
 パスワードを記入し、 ボタンをクリックする。
 ⇓
  ボタンをクリックする。
 ⇓
  ボタンをクリックする。
 ⇓
 Firebase CLI にサインインします ステップ 1
 続行する前に、以下のコマンドを端末で実行したことを確認してください。
 このコマンドを実行していない場合は、続行しないでください。

  ボタンをクリックする。
 ⇓
 Firebase CLI にサインインします ステップ 2
 このセッション ID と CLI のものが一致することを確認してください:
  → 上記 2-1 で発行されているセッション ID と同じ文字列であることを確認する。
 一致しない場合は続行しないでください。

  ボタンをクリックする。
 ⇓
 Firebase CLI にサインインします ステップ 3
 この認証コードを CLI プロンプトにコピー＆ペーストして、ログイン手順を完了してください。

  ボタンをクリックする。
 → 認証コードは上記 2-1 の *2 でペーストする。

 終了したらこのタブを閉じてください。

3. プロジェクトの登録

3-1. プロジェクトを作成する。
プロジェクトの作成には以下に同意する必要があり、CLI では同意できないので先に進めない。
一度同意すれば、二度目から CLI でプロジェクトを作成できる。
(規約の同意は、プロジェクトを作成する必要がある)
ログインしたアカウント (メールアドレス) を確認する。
$ cat .config/configstore/firebase-tools.json | grep '"email":'
  "email": "firebaseliveexample@gmail.com", 
ログアウトすると、この項目が削除される。($ ./firebase logout)
プロジェクトの一覧を確認する。(まだ作成してないので、プロジェクトは存在しない)
$ ./firebase projects:list
✓ Preparing the list of your Firebase projects  
No projects found.
$ ./firebase projects:create
まだプロジェクトを作成できない。エラーになる。
? Please specify a unique project id (warning: cannot be modified afterward) [6-30 characters]:  
 project-name ⏎
? What would you like to call your project? (defaults to your project ID) project-name ⏎
✖ Creating Google Cloud Platform project

Error: Failed to create project. See firebase-debug.log for more info.
 一意のプロジェクト ID を指定してください (後で変更することはできません) [6～30 文字]
 プロジェクトの名前は何にしますか? (デフォルトはプロジェクト ID)
プロジェクトの作成に失敗しました。
firebase-debug.log に詳細があります。
$ cat firebase-debug.log | grep Error
[debug] [2025-03-14T06:12:58.676Z] FirebaseError: Callers must accept Terms of Service
「依頼者は利用規約に同意する必要があります」とあるが、Firebase CLI には同意する機能が存在しない。
3-2. GUI からプロジェクトを作成
Firebase コンソール (https://console.firebase.google.com/) を開いて、最初のプロジェクトを作成する。

 「Firebase プロジェクトを使ってみる」をクリックする。
 ⇓
 プロジェクト名を記入し、
 規約と利用目的にチェックを入れて
  ボタンをクリックする。

 CLI でエラーになっていたのはこのチェックボックス。
 2 回目は表示されない。
 ⇓
  ボタンをクリックする。
 ⇓
  ボタンをクリックする。

 サンプルなので Google アナリティクスは導入しない。(OFF にする)
 ⇓
 待つ。
 ⇓
  ボタンをクリックする。
 ⇓
 プロジェクトの作成が完了した。
3-3. 作成したプロジェクトを確認する。
$ ./firebase projects:list
Firebase CLI からもプロジェクトが見えている。
✓ Preparing the list of your Firebase projects
 Project Display Name  Project ID  Project Number  Resource Location ID 
 project-name  project-name-671ff  1072904068653  [Not specified] 
3-4. 2 個目のプロジェクトを作成する。(必要なら)
規約に同意できたので、2 個目以降のプロジェクトは Firebase CLI で作成できる。

$ ./firebase projects:create
? Please specify a unique project id (warning: cannot be modified afterward)
[6-30 characters]:
 project-name2 ⏎
? What would you like to call your project? (defaults to your project ID)
project-name2-671ff ⏎
✓ Creating Google Cloud Platform projecT
✓ Adding Firebase resources to Google Cloud Platform project

🎉🎉🎉 Your Firebase project is ready! 🎉🎉🎉

Project information:
   - Project ID: project-name2
   - Project Name: project-name2-671ff

Firebase console is available at
https://console.firebase.google.com/project/project-name2-671ff/overview
$ ./firebase projects:list
Firebase CLI からも 2 個目のプロジェクトが見えている。
✓ Preparing the list of your Firebase projects
 Project Display Name  Project ID  Project Number  Resource Location ID 
 project-name  project-name-671ff  1072904068653  [Not specified] 
 project-name2  project-name2-671ff  959682379690  [Not specified] 

4. プロジェクトディレクトリの初期化。

Firebase Hosting では手元に作業ディレクトリを作成し、
そこで作成された資源 (HTML や画像等のファイル) を Firebase Hosting サーバへ転送して Web サイトを構築します。

4-1. プロジェクトディレクトリを作成・初期化する。
$ mkdir fb
$ cd ./fb/
fb$ ../firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##      
     ######    ##  ########  ######   ########  #########  ######  ######  
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##      
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /home/who/fb *3

? Which Firebase features do you want to set up for this directory? Press Space
to select features, then Enter to confirm your choices. (Press <space> to
select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ◯ Data Connect: Set up a Firebase Data Connect service
 ◯ Firestore: Configure security rules and indexes files for Firestore
 ◯ Genkit: Setup a new Genkit project with Firebase
 ◯ Functions: Configure a Cloud Functions directory and its files
 ◯ App Hosting: Configure an apphosting.yaml file for App Hosting
❯⦿ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys  
 ◯ Storage: Configure a security rules file for Cloud Storage
 ◯ Emulators: Set up local emulators for Firebase products
 ◯ Remote Config: Configure a template file for Remote Config
 ◯ Extensions: Set up an empty Extensions manifest
 ◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally)
 provision default instance
(Move up and down to reveal more choices)
「 Hosting: 」のマークを キーで反転「⦿」させて キーで次へ進む。

和訳:
 このディレクトリで Firebase のプロジェクトを初期化します。

このディレクトリにどの Firebase の機能をセットアップしますか?
Space キーで機能を選択してから Enter キーで確定します。
( で選択。 で全部を反転。 で選択中のものを反転。 で続行)

(上下に動かすと選択肢がさらに表示されます)
*3  who  は Linux ユーザのホームディレクトリ。
 ⇓
=== Project Setup

First, let's associate this project directory with a Firebase project.                           
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Please select an option:
❯ Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project
「 Use an existing project 」を選択して キーで次へ進む。

和訳:
 まず、このプロジェクトディレクトリを Firebase プロジェクトに関連付けましょう。
「firebase use --add」を実行することにより、複数のプロジェクトエイリアスを作成できますが、今はデフォルトのプロジェクトを設定します。
オプションを選択してください:
 ⇓
? Please select an option: Use an existing project
? Select a default Firebase project for this directory:
❯ project-name-671ff (project-name)
  project-name2-671ff (project-name2)
「 project-name-671ff 」を選択して キーで次へ進む。

和訳:
 このディレクトリのデフォルトの Firebase プロジェクトを選択してください:
 ⇓
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: project-name-671ff (project-name)        
i  Using project project-name-671ff (project-name)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? (public) ⏎ *4
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) ⏎ *5
? Set up automatic builds and deploys with GitHub? (y/N) ⏎ *6
3 つの設問にはすべてデフォルト ( キーのみ) を入力する。*4 *5 *6

和訳:
 パブリックディレクトリ (プロジェクトの相対ディレクトリ) は「Firebase deploy」でアップロードされる資源を格納するフォルダです。*7
 資源をビルドする場合は、ビルドの出力先ディレクトリとして使用してください。
*4パブリックディレクトリとして使用するのは何にしますか? → public/ を指定する。
*5「シングルページアプリ」として構成しますか (すべての URL を /index.html に書き換えます)? → シングルページにしない。
*6 GitHub で自動的なビルドとデプロイを設定しますか? → GitHub を使用しない。
*7「資源」とは、HTML ファイルや画像等のファイルを指す。
 ⇓
✓  Wrote public/404.html
✓  Wrote public/index.html

i  Writing configuration info to firebase.json...                                                
i  Writing project information to .firebaserc...
i  Writing gitignore file to .gitignore...

✓  Firebase initialization complete!
 待つ。(数秒)

4-2. プロジェクトディレクトリを確認する。
fb$ LANG=c tree -a
.
|-- .firebaserc
|-- .gitignore
|-- firebase.json
`-- public
    |-- 404.html
    `-- index.html

1 directory, 3 files
fb$ cat .firebaserc
{
  "projects": {
    "default": "project-name-671ff"  
  }
}
fb$ cat .gitignore | head
GitHub に転送しないファイル群の指定。
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
firebase-debug.log*
firebase-debug.*.log*  

# Firebase cache
fb$ cat firebase.json
{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"  
    ]
  }
}
fb$ ls -ogh ./public/
total 12K
-rw-r--r--. 1 1.8K Mar 15 00:01 404.html
-rw-r--r--. 1 4.5K Mar 15 00:01 index.html

5. 公開 Web ページの確認

5-1. GUI のブラウザで公開 Web ページを表示する。(資源配置前)
https://Project ID.web.app/ をブラウザで表示する。Project ID は .firebaserc に "projects" として記載されている。
 まだ資源配置 (deploy) をしていないので
 「Site Not Found」が表示される。
5-2. 資源配置する。
「資源」は、上記 4 で確認した public/ ディレクトリにあるファイル群を指す。
まだファイルを追加・変更していないので、「firebase init」で作成された 404.html、index.html が転送される。

fb$ ../firebase deploy


=== Deploying to 'project-name-671ff'...

i  deploying hosting
i  hosting[project-name-671ff]: beginning deploy...
i  hosting[project-name-671ff]: found 2 files in public
✓  hosting[project-name-671ff]: file upload complete
i  hosting[project-name-671ff]: finalizing version...
✓  hosting[project-name-671ff]: version finalized
i  hosting[project-name-671ff]: releasing new version...
✓  hosting[project-name-671ff]: release complete

✓  Deploy complete!

Project Console: https://console.firebase.google.com/project/project-name-671ff/overview  
Hosting URL: https://project-name-671ff.web.app
5-3. プロジェクトディレクトリを確認する。
fb$ LANG=c tree -a 
.
|-- .firebase
|   `-- hosting.cHVibGlj.cache  
|-- .firebaserc
|-- .gitignore
|-- firebase.json
`-- public
    |-- 404.html
    `-- index.html

2 directories, 6 files
 ファイル hosting.xxxxxxxx.cache が作成された。
 転送した各ファイルの作成日時 (1/1,000 秒) とハッシュ値が格納されている。

5-4. GUI のブラウザで公開 Web ページを表示する。(資源配置後)
https://Project ID.web.app/

6. Firebase からログアウトする。(必要なら)

fb$ ../firebase logout
✓  Logged out from firebaseliveexample@gmail.com