無償版のNetlifyでは日本のエッジサーバーを使えないらしいので、Firebase Hostingを試してみることにしました。

設定

実際に設定していきます。

Firebaseのプロジェクト作成

1. GoogleアカウントでFirebaseへログインします。
2. 「プロジェクトを作成」を押します。
3. 任意の名前を入力し「続行」を押します。
4. Googleアナリティクスを有効化するか聞かれるので好きな方を選んで「続行」を押します。（この記事では有効化しています。）
5. 地域を聞かれるので「日本」を選択し「プロジェクトを作成」を押します。
6. 設定が完了したら「続行」を押すとプロジェクトの作成が完了します。

プロジェクト側の設定

firebase-toolsを追加します。

yarn global add firebase-tools

Firebaseへログインします。ブラウザが立ち上が流のでGoogleアカウントでログインし、要求された権限を許可します。

firebase login

プロジェクトの初期設定を行います。以下のコマンドを実行すると設定のための質問が表示されます。

firebase init

今回はすでに作ったサイトの移行でしたので、以下の通り設定しました。 Hosting: Configure and deploy Firebase Hosting sites ↓ Use an existing project ↓ （上の方で作成したプロジェクト名） ↓ 何も入力せずにEnter（デフォルト値のpublic） ↓ N（index.htmlへのリライトは行わない） ↓ N（既存のpublic/index.htmlを上書きしない）

デプロイ

yarn run build
firebase deploy

ドメイン設定

1. Firebaseのプロジェクトトップを開きます。
2. 左側のメニューから「開発」→「Hosting」を選択します。
3. 「カスタムドメインを追加」を押します。
4. ドメイン名を入力して「次へ」を押します。
5. TXTレコードをドメインに設定するよう指示が出るので、DNS上で設定します。
6. 「所有権を証明」を押します。
7. Aレコードを2つ登録するように指示が出るのでDNS上で設定します。NetlifyへのAlIASレコードは削除しておきます。
8. 「www.ドメイン名も追加しますか？」と聞かれるのでついでに登録しておきます。
9. こちらは「www.ドメイン名をドメイン名にリダイレクトする」にチェックを入れて「次へ」を押します。
10. Aレコードを2つ登録するように指示が出るのでDNS上で設定します。（多分7.と同じIPです。）
11. ドメイン横のステータスが保留中になっていることを確認して就寝します。