Firebase Hostingでのホスティング手順

概要

Firebase Hostingでのホスティング手順のメモです。
手軽にWEBサイトをホスティングできる上に無料でも結構使えるので、個人で色々試したい場合にもかなり重宝します。
※No-cost(Spark)プランでは、容量が10GBかつデータ転送量が360MB/日までであれば無料で利用できます（ref: https://firebase.google.com/pricing?hl=ja）

環境

OS: macOS Monterey 12.0.1
Firebase CLI: 10.1.2

本題

1. Firebase CLIのインストール

$ npm i -g firebase-tools

2. Googleアカウントの認証

$ firebase login

i  Firebase optionally collects CLI 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 usage and error reporting information? (Y/n)

上記コマンドを入力するとWebブラウザが立ち上がり、Googleアカウントのログイン画面が表示されます。※情報収集をしても良いか聞かれるので（Y/n）を答えます
使用するアカウントでログイン手順を踏みます。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

認証に成功すると下記のように表示されます。

i  To change your data collection preference at any time, run `firebase logout` and log in again.

Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=XXX...

Waiting for authentication...

✔  Success! Logged in as XXX(ログインしたアカウントが表示されます)

3. プロジェクトフォルダの初期設定

$ firebase init

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

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

  XXX

? 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)
 ◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default instance
 ◯ Firestore: Configure security rules and indexes files for Firestore
 ◯ Functions: Configure a Cloud Functions directory and its files
❯◯ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
 ◯ Hosting: Set up GitHub Action deploys
 ◯ Storage: Configure a security rules file for Cloud Storage
 ◯ Emulators: Set up local emulators for Firebase products
(Move up and down to reveal more choices)

ホスティングしたいので、

Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys

を選択します。
選択すると下記のような表示になります。
ここではプロジェクトを既に作成済みなので、

Use an existing project

を選択しています。

=== 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 arrow keys)
❯ Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project

? Select a default Firebase project for this directory: (Use arrow keys)
❯ XXXX（アカウントに紐づいているGCPプロジェクトが表示されます）

次にホスティング設定について質問が並びます。

• パブリックディレクトリはどれか？
  publicを選択。
• SPAか？
  Noを選択。
• GitHub Actionでデプロイ作業を自動化するか？
  Noを選択。

=== 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
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
✔  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!

成功するとプロジェクトディレクトリ配下にファイルがいくつか追加されます。以下のような構成になります。

.
├── .firebaserc
├── .gitignore
├── firebase.json
└── public
    ├── 404.html
    └── index.html

1 directory, 5 files

4. ローカルで動作確認

$ firebase serve

=== Serving from 'XXXX'...

i  hosting: Serving hosting files from: public
✔  hosting: Local server: http://localhost:5000

5. デプロイ

$ firebase deploy

=== Deploying to 'XXX'...

i  deploying hosting
i  hosting[XXX]: beginning deploy...
i  hosting[XXX]: found 2 files in public
✔  hosting[XXX]: file upload complete
i  hosting[XXX]: finalizing version...
✔  hosting[XXX]: version finalized
i  hosting[XXX]: releasing new version...
✔  hosting[XXX]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/XXX/overview
Hosting URL: https://XXX.web.app

上記最後に記載されている

Hosting URL: https://XXX.web.app

にアクセスするとホスティングされているのが確認できると思います。

下記コマンドでホスティングサイトを削除できます。使わない場合は削除しておきましょう。

$ firebase hosting:disable

6. おまけ

そのほかFirebase CLIの使いそうなコマンドを載せておきます。

• プロジェクトの切り替え

# プロジェクト確認
$ firebase target

# プロジェクト一覧
$ firebase projects:list

# プロジェクトの切り替え
$ firebase use $project_id

• アカウントの切り替え

$ firebase logout
$ firebase login