Firebaseのホスティングのプロジェクト／アプリ開発やサイト作成を立ち上げる

GoogleのWebサービスの一つ、Firebaseを使うとアプリ開発やサイト作成をプロジェクトとして立ち上げてコンテンツを配信できる。

料金は無料のSparkプランで1GBの容量が得られる。他にも機能が幾つもあって例えばデータベースやストレージたと1GBや5GBずつ得られるようになっている（無料で開始）。ホスティング以外に機能を追加して使うならば一つのアカウントで実際に提供されるサーバー容量はもっと大きい。転送量も機能毎に制限されていてホスティングでは10GBだけれどもアクセスが増えれば有料版へ移行してサーバー容量も含めて許容範囲を広げられる。定額制のFlameプランと従量制のBlazeプランに分かれていてアプリやサイトの稼働状況に合わせて選べる仕組みだ。今まではアプリ開発とサイト作成はおよそ別々だったけれども一つに明らかに統合したのがFirebaseで、とても面白いWebサービスだと知って好きなGoogleに又新しく衝撃を受けてしまったと感じている。

Firebaseでプロジェクトを立ち上げる流れ
コンソールにプロジェクトを追加する
デフォルトの設定にする場合
オプションの設定にする場合
Firebase CLIでプロジェクトをデプロイする
プロジェクトをデプロイする手順
手順一：Firebase CLIのインストール
手順二：Firebaseアカウントへログイン
手順三：ディレクトリーを移動
手順四：ホスティングの初期設定
手順五：プロジェクトのデプロイ

Firebaseでプロジェクトを立ち上げる流れ事前にGoogleアカウントを取得してFirebaseの利用者に登録する必要がある。

コンソールにプロジェクトを追加する

Firebase CLIでプロジェクトをデプロイする

二つの流れからFirebaseのプロジェクトが立ち上げられる。プロジェクトのアプリやサイトは幾つも持てる。毎回、コンソールにプロジェクトを追加して専用のFirebase CLIでプロジェクトをデプロイするとホスティングが使えるようになる。コンソールにプロジェクトを追加する Firebaseホスティングのプロジェクトを追加

Firebase console｜Firebase｜Google

後からシステムが更新されて変わるかも知れないけれども現時点では六個から十一個までの要件を満たさなくてはからない。Firebaseはアクセス解析のGoogleアナリティクスと連携する設定の仕方によってプロジェクトを追加するための要件が増減するんだ。デフォルトの設定にする場合

プロジェクト名
どんなプロジェクトか

プロジェクトID
サーバーのURLのサブドメインになる

アナリティクスの地域
収益データの通貨に反映する

Cloud Firestoreのロケーション

マルチリージョン（全地域）
- us-central（アメリカ中央）
リージョン（地域）
- us-east1／アメリカ東部の一つ
- europe-west3／ヨーロッパ西部の一つ

データの保存先を指定する

Firebase向けGoogleアナリティクスのデータ共有にデフォルトの設定を使用する

Googleのサービス
改善のデータ使用を許可する
ベンチマーク
他の利用者との匿名データを入手する
テクニカルサポート
技術担当者のサポートを貰う
アカウントスペシャリスト
運営専門家のアドバイスを貰う

測定管理者間のデータ保護条項に同意します
Googleと共に遵守するべきアナリティクスのプライバシーポリシーのようなアクセス解析で取得されるデータの保護に関する法律に基づく取り決めを交わす

オプションの設定にする場合二つのチェックを外すと「次へ」の画面に移動して「Firebase向けGoogleアナリティクスのデータ共有にデフォルトの設定を使用する」の四項目が選択可能に変わる。

新しいプロジェクトのデータ共有のカスタマイズ

Googleのサービス
- 測定管理者間のデータ保護条項に同意します
ベンチマーク
テクニカルサポート
アカウントスペシャリスト

プロジェクトID以外の項目は後から変更できるけど、ただしGoogleアナリティクスに関連していてコンソールのプロジェクトを操作する「Hosting」にはスイッチがなくて「Overview」の歯車／設定の画面のヘッダーのメニューの「データのプライバシー」のアナリティクスの設定から行う。Firebase CLIでプロジェクトをデプロイするFirebaseのプロジェクトを操作するFirebase CLIにはNode.js（ネットワークアプリケーションのJavaScript環境）のバージョン5.10.0以降とnpm（Node.jsのパッケージ管理ツール）が必要なんだ。

デバイスになければメインサイトから予めダウンロードしておかなくてはならない。Node.jsのファイルにはnpmも含まれているからさらにダウンロードしなくて構わない。両方とも無料で使用できる。

パッケージマネージャを利用した Node.js のインストール

LinuxやMacやWindowsなど、OSを含めてパッケージ毎にNode.jsとnpmのインストールの仕方は異なる。プロジェクトをデプロイする手順 Firebaseのヘルプの「firebase -h」のコマンドを実行した

firebase -h｜Firebase｜Google

コンピューターのターミナルエミュレーター／プロンプト画面からnpmやFirebase CLIのコマンドを入力して行く。手順一：Firebase CLIのインストール$ npm install -g firebase-toolsFirebaseのプロジェクトを追加／編集するためのFirebase CLIをインストールする。後から繰り返すとFirebaseのバージョンアップにも使える。Firebase CLIで、どんなコマンドが使えるかは「firebase -h」か「firebase --help」によってリストが表示できる。加えて「firebase help」に「コマンド内容」を付けると個別に調べられる。他にもFirebase CLI リファレンスにコマンドの詳細が載っている。手順二：Firebaseアカウントへログイン$ firebase loginFirebaseのアカウントへのログインを行う。二回目以降のログインで、バージョンアップされていたら「Updated available」（利用可能なアップデート）のメッセージが出るので、手順二の「npm install -g firebase-tools」のコマンドでインストールできる。バージョンを確認するには「firebase -V」か「firebase --version」を入力する。手順三：ディレクトリーを移動$ cd ディレクトリーFirebaseのホスティングのデプロイに使用するデバイスのストレージのディレクトリーへ移動する。汎用的なコマンド

cd /

ルートディレクトリーへ移動

ホームディレクトリーへ移動

cd ..

親ディレクトリーへ移動（一つ前に戻る）

何も入力しなければ現在のディレクトリーがプロジェクトのファイルを保存する対象になる。Firebaseのために「mkdir フォルダ名」でフォルダを新しく作成しても良いと思う。フォルダを削除する場合は「rmdir フォルダ名」を実行する。手順四：ホスティングの初期設定$ firebase initFirebaseの初期設定を行う。 Firebaseの初期化で「FIREBASE」と表示されたコンピューター

Firebase init｜Firebase｜Google

Firebaseの機能の選択肢が幾つか出て来るので、プロジェクトIDが付いた「Hosting」をチェックして確定する。デフォルトのプロジェクトの質問

Select a default Firebase project for this directory

[don't setup a default project]
Firebase Demo Project (fir-demo-project)
プロジェクト名 (プロジェクトID)
[create a new project]

このディレクトリーのデフォルトのFirebaseプロジェクトを選ぶ

［デフォルトのプロジェクトを立ち上げない］
Firebaseのデモプロジェクト（fir-demo-project）
プロジェクト名（プロジェクトID）
［新しいプロジェクトを作成する］

初期設定なので、「プロジェクト名（プロジェクトID）」を選んでエンターキーを押す。複数のプロジェクトを使い分ける他のプロジェクトを新たに追加する場合は事前に「firebase use --add」からプロジェクトIDを選択してさらにエイリアス（別名）を付けてデフォルトのプロジェクトと識別しなくてはならない。コマンドでエイリアスを付けるのは「firebase use --add エイリアス」で、後から「firebase use --unalias エイリアス」で削除できる。初期設定が完了すればプロジェクトのエイリアスは.firebasercの隠しファイルから書き換えられもする。Firebase CLIの複数のプロジェクトの切り替えは「firebase -P エイリアスかプロジェクトID」か「firebase use --project エイリアスかプロジェクトID」で行う。複数のプロジェクトは「firebase list」（要ログイン）で確認できて「current」（現行）が表示されたプロジェクト名とプロジェクトIDがデプロイの対象になっている。使用中のプロジェクトを解除するには「firebase use --clear」を実行する。公開するディレクトリーの質問What do you want to use as your public directory?パブリックディレクトリーに何を使いたいかFirebaseのデフォルトでは「public」になっている。他に必要なディレクトリー（ビルト済みなど）があれば差し替えて良いと思う。シングルページアプリの質問Configure as a single-page app (rewrite all urls to /index.html)?シングルページアプリ（/index.htmlへURLを全て書き換える）に設定するかシングルページアプリ：SPAはページ毎にhtmlの一部／メインコンテンツなどを配信してそれ以外の共通する部分は一つに纏めてブラウザの読み込みを簡略化する方法なんだ。構築するにはフレームワークが必要で、ReactやAngularやVue.jsなどを使ってサイト作成を行う。そうしたプロントエンドに対してバックエンドでFirebaseのホスティングを使うにはシングルページアプリを選択するのが適している。エラーページの上書きの質問File public/404.html already exists. Overwrite?ファイルのpublic/404.htmlがもうある。上書きするかFirebaseのデフォルトのエラーページを変更する場合は使用するディレクトリーに404.htmlを用意しなくてはならない。カスタマイズしないと一般的に「Page Not Found」（ページが見つかりません）だけではなくて「Why am I seeing this?」（なぜこれを見ているのですか）で「edit the 404.html file in your project's configured public directory」（publicディレクトリーで設定されたプロジェクトの404.htmlを編集します）と管理者向けのメッセージも表示されてしまう。後から編集しても良いと思う。トップページの上書きの質問File public/index.html already exists. Overwrite?ファイルのpublic/index.htmlがもうある。上書きするかFirebaseのデフォルトのトップページを変更する場合は使用するディレクトリーにindex.htmlを予め用意しておかなくてはならない。四つの質問に回答するとホスティングの初期設定が完了する。手順五：プロジェクトのデプロイ$ firebase deployホスティングのファイル／コンテンツが予定通りに揃っていてヘッダーの設定が大丈夫ならばプロジェクトのデプロイを行う。 Firebaseホスティングのプロジェクトがデプロイされたデフォルトのトップページ

Firebaseホスティングのプロジェクトがデプロイされたデフォルトのトップページ

ホスティング｜Firebase｜Google

トップページが未編集だと「Firebase Hosting Setup Complete」（Firebaseホスティングのセットのセットアップ完了）と「OREN HOSTING DOCUMENTATION」（ホスティング文書を開く）のボタンなどが表示されている。そしてFirebaseのコンソールのHostingにも反映するようになる。コマンドでホスティングを確認する

firebase open

選択肢の「Hosting: Deployed Site」から一般的に確認する。

firebase serve

ローカルホストの「http://localhost:5000」で試験的に確認する。

二つの仕方でホスティングサイトを表示できる。ホスティングの基本的なディレクトリー構成firebase（ホーム）├database.rules.json├firebase.json├.firebaserc（隠しファイル）└public├index.html└404.html所定のディレクトリーにコンテンツのフォルダとファイルだけではなくてFirebaseのデータベースのための「database.rules.json」（データベースルールを使ってみる）やリダイレクトやリライトやヘッダーを操作するための「firebase.json」（Hosting 動作をカスタマイズする）や環境設定のための「.firebaserc」もホスティングの初期設定のところから取り込まれている。.firebasercからエイリアスを書き換える projectsについてエイリアスとプロジェクトIDを指定する。{"projects": {"エイリアス①": "プロジェクトID①","エイリアス②": "プロジェクトID②"}}※エイリアスの初期値は「default」になっている。複数のプロジェクトを使い分けるにはエイリアスとプロジェクトIDのセットを半角コンマで区切って最後だけは付けずにファイルを保存する。編集作業はFirebaseの「use --add」などのコマンドでも可能だけれどもプロジェクトが多いと.firebasercを使った方が手早いかも知れない。デプロイコマンドの四種類のオプションFirebase CLIの「firebase deploy」に四種類のオプションがある。何れも半角スペースで区切って後ろに付け加える。複数でも同様に入力して一度に実行可能になっている。