Firebase Hostingでサイトを公開する

#はじめに
[Firebase Hosting](https://firebase.google.com/docs/hosting?authuser=0)を利用すれば、簡単に(コマンド１つで)高速で安全にサイトをホストすることができます。
今回、`Firebase Hosting`を使用した経緯としては、iOSアプリを公開する際に、利用規約やプライバシーポリシーを公開する必要が出てきたことです。
ブログに公開したり、Github Pagesを使用するなど様々な方法があるとは思いますが、既にプロジェクトにFirebaseを導入していたため、`Firebase Hosting`を利用するのが良いのではないかなと思いました。
基本的な導入手順に留まりますが、初めて使う方々の参考になれば幸いです。

あまり関係ありませんが、本記事ではiOSプロジェクトに導入することを想定しています。

#導入手順

###1. Firebaseプロジェクトの準備
ここでは説明を省きますので、初めての方は[公式ドキュメント](https://firebase.google.com/docs/ios/setup?authuser=0)を参照ください。
プロジェクトを作成したら、`[Hosting]`タブから`[始める]`に進み、Hostingの使用を開始します。
<img width=700 alt=⓪ src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/283cbca6-5210-f956-e450-edbbbb13aa81.png">

###2. Firebase CLIのインストール
まず、`Firebase CLI`のインストールが済んでいない方はインストールします。
`Firebase CLI`は、プロジェクトの管理やデプロイするのに利用します。
詳しくは[Firebase CLI ドキュメント](https://firebase.google.com/docs/cli?authuser=0#install-cli-mac-linux)で分かりやすく手順が説明されています。
`[次へ]`をクリックして、プロジェクトの初期化に進みます。
<img width=500 alt=① src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/d0dfd99a-73e4-02a8-69ba-60f61300150c.png">

###3. プロジェクトの初期化
ローカルのプロジェクトをFirebaseプロジェクトに関連づけます。
`ターミナル`を開いて、ローカルプロジェクトの`ルートディレクトリ`に移動して`初期化コマンド`を実行します。

```
$ firebase login
$ cd [ローカルプロジェクトのルートディレクトリ]
$ firebase init hosting
```
<img width=500 alt=② src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/03831ee5-5304-a253-d088-9448f9e285c8.png">
以下のような実行結果を得られます。プロンプトが表示されている質問に答えていくと初期化は完了です。
<img width=700 alt=実行結果 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/e4feb1b0-3eda-6dc1-c5f2-9791679be390.png">
ほぼ聞かれている内容通りですが、順番に説明します。
① Firebaseのどの機能を使用するかということです。今回は`Firebase Hosting`を選択します。

② 既にあるFirebaseプロジェクトか、新規にFirebaseプロジェクトを作成するのか等を聞かれています。
既にFirebaseプロジェクトを作成しているので、`「Use an existing project」`を選択します。

③ Firebaseプロジェクトが複数あるときは、それらが列挙されているので、該当のプロジェクトを選択します。
今回は*`FirebaseSample`*という名前のプロジェクトを選択しています。

④ 公開するディレクトリを指定してくださいということです。今回はデフォルトのまま*public*にしています。
初期化を完了すると、このpublicディレクトリの中に`index.html`と`404.html`が自動で作成されます。
サイトに公開するファイルが`index.html`ファイル、Not Foundエラーが出たときに表示するのが`404.html`です。

⑤ `シングルページアプリケーション`を作成するのかを聞かれており、作成することを選択すると複数URLで一つのサイトを表示する設定がされます。
今回はNoを選択します。

⑥ Githubを介してデプロイをFirebaseプロジェクトに統合できるようです。
今回はNoを選択します。

初期化を終えると、ローカルプロジェクトのルートディレクトリに`firebase.json`と`.firebaserc`の2つのファイル、あとは`public`ディレクトリが作成されます。
上記の通りに設定すると、下記画像のようなディレクトリ構成になるはずです。
<img width=500 alt=ディレクトリ構成 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/3cc7709b-ab75-a3ee-6400-7f8e05e7f2b1.png">

###4. サイトにデプロイしてみる
公開するアプリを初期化時に作成された`publicディレクトリ`に配置して、次のコマンドを実行しデプロイします。

```
$ firebase deploy --only hosting
```
「`--only hosting`」はHostingのみをデプロイしたいときに付けます。
デプロイが完了すると`.firebaserc`ファイルが生成されますが、これの中身は管理しているプロジェクトの構成や後で説明する`target`設定などです。
`[コンソールに進む]`で設定は完了です。
<img width=500 alt=③ src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/d8cdb757-b1b5-6ff0-902d-89fb52954cf0.png">

###5. サイトを確認
デフォルトで２つのドメインが与えられています。
<img width=700 alt=④ src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/dc0f8006-33b9-8408-6d53-7d5c0af855f6.png">
このドメインURLを開いて確認してみると、`public`ディレクトリの中の`index.html`ファイルの内容が反映されていることを確認できます。
デフォルトの`index.html`では以下のようなサイトが表示されます。
<img width=600 alt=デフォルトのindex.html src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/87ce5e45-65f5-ce63-3ef6-e0c4745a3bd2.png">
デフォルトの`404.html`では以下のようなサイトが表示されます。
<img width=600 alt=デフォルトの404.html src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/003c32c2-2944-756a-8f1b-b928f5036eb9.png">
それぞれのファイルの中身を変更してデプロイすると、サイトに変更が見られます。

# Hostingを構成する
Firebase Hostingの構成は、先述した`firebase init`コマンドで作成された`firebase.json`ファイルで定義します。
ここでデプロイするファイルを指定します。
デフォルトのhosting構成は、以下のようになっています。

```:firebase.json
{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}
```
####public
必須の属性であり、デプロイするディレクトリを指定します。
今回は`public`という名前のディレクトリなので、そのまま"public"を指定しています。

####ignore
任意の属性であり、デプロイ時に無視するファイルを指定します。
`.gitignore`ファイルのようなものですかね。今回は`publicディレクトリ`の中のみをデプロイしたいので、そのままにしています。

#ローカルでのテスト
サイトに公開するアプリやページを頻繁に更新する際に、以下のコマンドでローカルでテストすることが可能です。

```
$ firebase emulators:start
```
`CLI`によって返されるURLでウェブアプリ (ページ)を開きます（通常は`http://localhost:5000`が返ってきます）
今回は使用していませんが、公開する前に他の人にプレビューを見てもらえるように共有することも可能なようです。


#複数のサイトを管理する

１つのプロジェクト内で複数のサイトを管理できます。
Hostingコンソールの一番下に[`別サイトを追加`]とあるのでクリックします。
<img width=700 alt=複数サイトの管理1 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/d2b3b9c6-94ba-33de-d8a1-31e9df7de1c2.png">
サイト名 (ドメイン名になります)を入力して[`サイトの追加`]をクリックして完了です。
サイト名はユニークである必要があるらしく、自由に入力するとFirebaseから使用できる名前を推奨されるので、それを使用しています。
<img width=400 alt=複数サイトの管理2 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/e699f248-07b4-fa94-f0ed-30f8e7d3a93a.png">
以下のような画面に切り替わり、追加したサイトのドメイン名がそれぞれ表示されます。
まだ追加したサイトにはデプロイしていないので、「最新のリリースを待機しています」と表示されています。
<img width=700 alt=複数サイトの管理3 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/a3d2d366-0e65-0cbf-6a30-6e5b11c4e901.png">
ローカルプロジェクトのルートディレクトリに、デプロイするウェブアプリ(ページ)ファイルを格納したpublicディレクトリを追加し、`firebase.json`を修正します。
複数のサイトの管理は、*`target`*属性を指定することで簡単に管理できます。
例えば、今回は利用規約とプライバシーポリシーの２つを管理したいので、以下のように書くことができます。
<img width=200 alt=ディレクトリ構成 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/0c318b88-6325-cb27-c884-5809b193c71f.png">

```:firebase.json
{
    "hosting": [
        {
            "target": "privacypolicy",
            "public": "public-policy",
            "ignore": [
                "firebase.json",
                "**/.*",
                "**/node_modules/**"
            ]
        },
        {
            "target": "terms",
            "public": "public-terms",
            "ignore": [
                "firebase.json",
                "**/.*",
                "**/node_modules/**"
            ]
        }
    ]
}
```
あとはローカルで変更をエミュレータでテストし、確認したら`firebase deploy --only hosting`コマンドでサイトにデプロイするだけです。
`target`を指定することで、管理しているサイトごとにデプロイすることも可能です。

```
firebase deploy --only hosting:TARGET_NAME
```
エミュレータによるテストや、本番サイトへのデプロイのコマンドオプションは[公式ドキュメント](https://firebase.google.com/docs/hosting/multisites?hl=ja#cli-commands-with-deploy-targets)を参照ください。

#最後に
簡単になりましたが、`Firebase Hosting`の基本的な使い方についてまとめました。
今回は、基本的な機能しか使いませんでしたが、Githubと統合して管理できたり、他にも多くの機能や設定があるようなので、今後使用した場合にはまた追記していきます。
何かご指摘があれば、コメントいただけると幸いです。

#参考文献
この記事は、以下の情報を参考にしました。
- [Firebase Hosting](https://firebase.google.com/docs/hosting?hl=ja)
- [Firebase Hosting 複数サイト管理時のデプロイの最低限の設定](https://qiita.com/yuki0n0/items/632fe9293bdebf7fb67f)
- [【第4回】 Firebase Hosting でスタティックな Web ページをデプロイしよう！【はじめてみよう Firebase】](https://www.topgate.co.jp/firebase04-firebase-hosting-deploy-website)