Firebase Hostingで、アプリ内で表示するWebページを作ってみた

# 作ったもの
iOSアプリの「設定画面」＞「よくある質問」の先のWebページ。
<img width="523" alt="スクリーンショット 2020-05-01 13.54.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112818/2477d0b7-5f28-4017-42da-3bcc068bc476.png">

今後も頻度高く更新していきたいページなので、アプリ内に埋め込むのではなく、Webページとして置いておきたい気持ちがありました。
レンタルサーバーも検討しましたが、静的ページであることと、PV数も多くはないだろうということで、最終的に [Firebase Hosting](https://firebase.google.com/docs/hosting?hl=ja) を使ってみることにしました。
基本的に無料（[従量課金制](https://firebase.google.com/pricing/)）で使えて、SSL化もしてくれます。素敵。

# 手順
## Webページを公開するまで
事前に [Firebase](https://firebase.google.com/) でプロジェクトを作成しておきます。
また、公開したいサイトの.htmlファイルを作成しておきます。

### 1. Firebase CLIのインストール
ホスティングには`Firebase CLI（Command Line Interface）`を使用する必要があり、そのインストールには`npm（Node Package Manager）`を使います。
Node.jsを使ったことがない人は下記よりNode.jsをダウンロードします（その際npmも自動的にダウンロードされます）。

[Node.js](https://nodejs.org/ja/)
<img width="500" alt="スクリーンショット 2020-05-01 14.39.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112818/30a2b494-8b67-d5a7-3806-456f8b9185bd.png">

ダウンロードが終わったらnpmコマンドが使えるようになるので、Firebase CLIをインストールするためのコマンドを実行します。

```
$ npm install -g firebase-tools
```

#### エラー発生
ここで下記のエラーが発生しました。

```
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access ‘/usr/local/lib/node_modules’
npm ERR!  [Error: EACCES: permission denied, access '/usr/local/lib/node_modules’] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: ‘/usr/local/lib/node_modules’
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/xxx/.npm/_logs/2020-05-01T06_54_46_066Z-debug.log
```

こちらの記事を参考に、npmのデフォルトディレクトリを作成・変更して、パスを通してあげることで解決。
[【備忘録】npm -g install に失敗する - Qiita](https://qiita.com/NaokiIshimura/items/cc07441939b226e779c6#%E8%A7%A3%E6%B1%BA%E6%96%B9%E6%B3%95)

自分はfish shellユーザーなので、パスを通すところを変えて下記のようにしました。

```
$ mkdir ~/.npm-global
$ npm config set prefix '~/.npm-global'

このあと ~/.config/fish/config.fish に下記を追加して、ターミナルを再起動。
set PATH ~/.npm-global/bin $PATH
```

### 2. ログイン
```
$ firebase login
```

これを実行すると「Firebaseの使用状況やエラーを匿名で収集してもいいですか？」と聞かれるので、適当に`Y`で答えるとブラウザが起動します。
該当のGoogleアカウントに対してアクセス許可をして、次のような画面になればログイン完了です。
<img width="444" alt="スクリーンショット 2020-05-01 17.07.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112818/6e769b2e-f60a-0072-dc99-c7ae13b9b135.png">

### 3. 初期化
静的ファイルを置くためのディレクトリを好きな場所に作り、そこまで移動して下記を実行します。

```
$ firebase init
```

すると次のような表示が出た後、質問が続きます。
<img width="689" alt="スクリーンショット 2020-04-29 21.28.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112818/5b0755d0-c857-eb24-c27d-5369284b452b.png">
自分は下記記事を参考に答えていきました。
[FirebaseiOS Firebase Hosting でキャンペーンページを作ってみよう | Developers.IO](https://dev.classmethod.jp/articles/firebase-hosting-ios/#toc-9)

すべて答え終わると、ディレクトリ内にいくつかのファイルとフォルダが作成されるので、いよいよデプロイに進みます。
<img width="205" alt="スクリーンショット 2020-05-01 18.12.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112818/81da4d23-2525-c1fa-b5ac-e0b051365ee3.png">

### 4. デプロイ
公開したい.htmlファイルを公開用ディレクトリ（今回はpublicディレクトリとしました）に移動し、下記を実行します。

```
$ firebase deploy
```

「✔  Deploy complete!」と表示され、続けて Hosting URL（例: `https://hoge.web.app`）が表示されればデプロイ完了です:tada:

この Hosting URL に`/ファイル名.html`を付けてあげればもうブラウザで見ることができます。
サイトを更新したい場合は、publicディレクトリの.htmlファイルを変更後、再度このコマンドを叩けばOKです。

## アプリ側でやること
デプロイしたサイトのURL（例: `https://hoge.web.app/faq.html`）を渡してWebViewで開いてあげるだけ。これだけです:clap:

# 無料サブドメインについて
Firebase Hosting には、[公式ドキュメント](https://firebase.google.com/docs/hosting/quickstart)にも書かれているように、無料サブドメインが2つあります。

* `web.app`
* `firebaseapp.com`

Firebaseコンソールで確認しても、デフォルトドメインが2つあり、どちらでもブラウザで開くことができます。
<img width="232" alt="スクリーンショット 2020-05-01 18.42.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112818/3328ff55-8b56-00d6-12aa-8bd7e6e9ed64.png">

使い分けがよくわからなかったのですが、結論から言うと「好きな方を使えばいい」ようです。

もともと`firebaseapp.com`だけだったのが、2019年5月くらいに`web.app`が追加されたとのこと。
自分は古い記事を参考にしていたので、記事と同じ`firebaseapp.com`を使ってしまったのですが、より短い`web.app`にしたら良かったなと今更ながら後悔しています…。皆さんはお気をつけください。

# おわりに
ビックリするくらい簡単だし基本無料で使えるので、FAQのような簡易なWebページであれば Firebase Hosting で全く問題ないなと思いました。同じようなことができるサービスとして GitHub Pages も気になっているので、今度使ってみたいと思います。

## 参考記事
* [Firebase Hosting を使ってみる - Firebase公式ドキュメント](https://firebase.google.com/docs/hosting/quickstart)
* [FirebaseiOS Firebase Hosting でキャンペーンページを作ってみよう | Developers.IO](https://dev.classmethod.jp/articles/firebase-hosting-ios/)
* [Firebase を使ってサイトを無料で公開してみる ｜ SiTest (サイテスト) ブログ](https://sitest.jp/blog/?p=11311)
* [FirebaseにてWeb(https、無料)を公開してみるをやる - Qiita](https://qiita.com/sachiko-kame/items/f1a9b35a361296688c9a)