Firebase Hostingで独自ドメインからHello World出すまで(2019/04版)

# TL;DR (長い3行で)
Firebase HostingにHello World出すHTMLをデプロイ
ドメインはムームードメイン等で適当に取得
ブラウザ等から独自ドメインにアクセスしてHello WorldのHTMLを表示させる

# Firebase Hostingのセットアップ
↓ のFirebaseのConsoleから適当なProjectを作成しておきます．
https://console.firebase.google.com

## Firebase CLI Install
コマンドラインからFirebaseを制御するためのTool.

```text

# Install, あらかじめNodeのInstallが必要
$ npm install -g firebase-tools

# Firebase Consoleから作ったProjectと同じアカウントでLogin
$ firebase login

```

自UserのHome Dir以外(`/usr/local/lib/node_modules`とか)にもwriteしにいくようなので，環境(User権限)によっては`sudo`が必要．
Proxy設定している場合，環境変数の`http_proxy`/`https_proxy`がそのまま使われるようです．
`sudu`する場合，`sudo -E`とかで環境変数引き継ぎが必要です．



## Firebase : Init + Config
CLI Install移行，Firebaseにかかわる処理はCommand Lineで行います．

```text
$ firebase init
```
```text
     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

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

  /home/<your-firebase-hosting-path>/firebase-hosting

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select)
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
```

↑↓キーとSpaceキーでHostingを選択，Enterキーで決定したあと，Hosting ProjectのConfigをいくつか聞かれます．

```text
? Select a default Firebase project for this directory: 
　→ 最初に作ったProjectを選んでEnter

? What do you want to use as your public directory? public
　→ 公開するRoot Dirを選ぶ模様．デフォルトはpublicでこの下にindex.htmlとかができる．
　　 webpackerとかでbuildするようにしている場合はそのoutput dirを指定すると便利．

? Configure as a single-page app (rewrite all urls to /index.html)? No
　→ SPA運用をするかどうか，ドメイン以下のすべてのURLをTopページに置き換えてくれる．
　　 DefaultはNo.
```

## Firebase : Deploy

```text
# 今回はこのDirにひも付けているFirebase ProjectがHostingだけなので，
# --only のoptionは無くても変わりません．
$ firebase deploy --only hosting
```

いくつかログが出たあと，

```text
✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/<your-firebase-project>/overview
Hosting URL: https://<your-firebase-project>.firebaseapp.com
```

が出力されたら完了です．
Project ConsoleのURLはProject Topなので，HostingのTopは
`https://console.firebase.google.com/project/<your-firebase-project>/hosting/main`
になります．

`Hosting URL`にアクセスすると，`public/index.html`の内容が表示されます．
Defaultなら ↓ のような画面が出ます．

![welcome.png](https://qiita-image-store.s3.amazonaws.com/0/129035/9fffb567-5def-05db-dfa5-42c558ce9c69.png)

`public/index.html`の中身はDefaultのままだと上のメッセージを出したり，内部でFirebase SDKの機能を使うためのJavascriptをLoadしたりする処理がかかれています．
今回は`public/index.html`の中身を ↓ のようにシンプルなものに書き換えます．

```html:public/index.html
<!DOCTYPE html>
<html>
  <head>
    <title>HELLO WORLD !</title>
  </head>
  <body>
    <h1>Hello World !</h1>
  </body>
</html>
```

書き換えた上で再度 `firebase deploy` を実行します．
↓ のようなページが表示されればOKです．
![helloworld_html.png](https://qiita-image-store.s3.amazonaws.com/0/129035/8dd918a0-334c-2958-589e-9507b29fd5f7.png)

---

ここまででFirebase HostingのInitとDeployは完了です．

# 独自ドメインとFirebase Hostingを接続

ここまで完了していれば，
`https://console.firebase.google.com/project/<your-firebase-project>/hosting/main`
のページに ↓ のような『ドメインを接続』のボタンが出ていますので，ここから独自ドメイン接続の処理を開始できます．

![hosting.png](https://qiita-image-store.s3.amazonaws.com/0/129035/290003d9-c4f9-524b-eb21-1d3b0850e56e.png)

## Step 1 : ドメインの追加
ドメインの欄に取得した独自ドメインを入力します．

![step1.png](https://qiita-image-store.s3.amazonaws.com/0/129035/35f0dfc0-9e23-36f5-b52e-1f84cd8a271b.png)

すでにドメインを登録していて，新規に登録した独自ドメインからそちらにリダイレクトする場合は『既存のウェブサイトにリダイレクトする』のCheck Boxを使うようです．


## Step 2 : 所有権の確認
この画面で表示されるFirebaseのDNSレコードを独自ドメインを取得したDNSプロバイダ(ムームードメインなど)に登録します．

DNSレコードのタイプ(この場合はTXT)の解説は↓のサイトなどがぐぐると出てきます．
https://server-99.com/dns-record/

![step2.png](https://qiita-image-store.s3.amazonaws.com/0/129035/7b668a64-d0f6-2717-1bde-18d053834217.png)

### ムームーDNSの場合
ドメインのコントロールパネル
↓
ネームサーバ設定変更から
『ムームードメインのネームサーバ(ムームーＤＮＳ)を使用する』
を選択し，ネームサーバ設定変更をClick
↓
ネームサーバ設定変更の『ムームーDNS』のセットアップボタンをClick
↓
設定2のリストにTXT DNSレコードを入力
　サブドメイン : 空欄(独自ドメイントップ) or 設定したいサブドメイン
　種別 : TXT
　内容 : Step2の画面で表示されたFirebaseのDNSレコード文字列
↓
セットアップ情報変更をClick


確認ボタンをClickするとサーバ側で接続確認がはじまります．
登録後すぐだと確認が失敗するようなので，しばらく待つ必要があるかもしれません．


## Step 3 : 実行
タイプAのDNSレコードとしてIPアドレスが表示されます．
これをStep2と同じ方法でDNSプロバイダに登録します．

![step3.png](https://qiita-image-store.s3.amazonaws.com/0/129035/02d2b9ce-a09f-8472-e402-67fe0209023d.png)

新規に独自ドメインをHostingサイトにひも付ける場合はクイックセットアップのままで終了します．
(すでに他サイトにひも付けている独自ドメインをFirebase Hostingに移行する場合などに詳細設定を使うようです)

終了をClick後，ドメイン一覧にカスタムとして独自ドメインが表示されていると思います．

![result.png](https://qiita-image-store.s3.amazonaws.com/0/129035/0f97fb87-e276-37f2-0695-1fbe5c35918d.png)

ステータスが『設定が必要です』となっている間は独自ドメインからは接続できません．しばらく待たないといけないようです．

ステータスは ↓ のように変化していく模様．

『設定が必要です』 : 独自ドメインから接続不可
　↓
『保留中』 : ドメイン変更反映中，最大24時間必要とのこと
　↓
『接続されています』 : 独自ドメイン→Firebase Hostingに接続完了

---

『接続されています』状態になると，↓ のように独自ドメインのURLにアクセスするとFirebase Hostingにデプロイした`index.html`が表示されると思います．

![ok.png](https://qiita-image-store.s3.amazonaws.com/0/129035/fb3e9b05-d4d0-a4fc-51e4-f115c89cd490.png)


# おわり
・Firebase Hostingのセットアップ
・独自ドメインからアクセス
のふたつを実現するまでの最低限度のサンプルをまとめてみました．

もともとDNSまわりの勉強から実際に使ってみようと思ったのが最初でしたが，実際にやりながらいろいろ調べると理解がしやすかったです．

### References
Firebase CLI : https://firebase.google.com/docs/cli
Firebase Custom Domain : https://firebase.google.com/docs/hosting/custom-domain

---///