はじめに

Firebase Hostingを使うと、無料で独自ドメインを持つサイトを構築することができます。
いわゆるサーバサイドで動くアプリケーションを持たないアプリであれば動かすことができるので、
クライアントサイドで動くVue.jsのプロジェクトを動かすことも可能です。
無料枠は1GB、データ転送量は月10GBです。
画像がメインのサイトだと少々厳しいかもしれませんが、テキストベースの簡単なサイトであれば問題ないと思います。

前提

• Firebase Hostingで一度以上デプロイが完了していること（表示できる静的ページが存在すること）
• お名前.comでドメインの取得が完了していること

手順

Firebase Hostingを開き、「ドメインを接続する」を押下します。

予め取得しておいたドメインを入力し、「次へ」を押下します。

すると、入力したドメインのTXTレコードが表示されます。
コピーボタンでTXTレコードをコピーします。

お名前.com　Naviにログインし、DNS＞ドメインのDNS関連機能設定を開きます。

内部ドメイン一覧の中から設定したいドメインを選択し、「次へ進む」を押下します。

「DNSレコード設定を利用する」を選択します。（「設定する」を押下します）

ここで、TXTレコードを設定します。
デフォルトではAレコードが選択されているのでプルダウンでTXTに変更し、
VALUEにコピーしたTXTレコードを貼り付けて「追加」を押下します。

画面一番下の「確認する」ボタンを押下し、
確認画面で誤りがないことを確認して設定を完了します。

設定が完了すると、お名前.comからメールが来ます。
約10分くらいでお名前．comでの設定とFirebase側での設定が完了します。
しばらく待って設定が完了した頃に、Firebase Hostingの設定画面で「確認」ボタンを押下します。

こちらのエラーが出る場合は、まだお名前.comかFirebase側での設定が終わっていません。
設定したTXTレコードが誤っていないことを確認し、もうしばらく待ってみてください。

ドメイン　　＜ドメイン名＞ を検証できませんでした。設定を確認して、もう一度お試しください。

Firebase Hostingの設定画面で「確認」ボタンを押下すると、今度はAレコードが2つ画面に表示されます。
この2つのAレコードを設定し、SSL設定を行っていきます。

こちらも、お名前.comでDNSレコードの設定を行います。
今度は「A」を選択した状態で、2つ分のAレコードを追加し、確認・設定します。

Firebase側で最後に「終了」ボタンを押下すると、一覧に「保留中」のステータスでDNSが表示されます。

この状態で設定したDNSを使ってアクセスすると、下記のようにセキュリティの警告が表示されます。
SSLが設定されていないので警告が出る状態ではありますが、
「詳細設定」を押下し「＜ドメイン名＞ にアクセスする（安全ではありません）」を押下するとサイトを表示することができます。

SSLの設定完了には24時間程度かかることもあるそうなので、しばらく待ちます。
私の場合は、半日ほどで反映されて独自ドメインでサイトにアクセスできるようになりました。

終わりに

無料枠では制限があるものの、やはり独自ドメインを無料で使えるのはかなりありがたいです。
（ドメインの取得料はかかりますが…）
今回立ち上げたサービスはまだデータ量が少なくてお披露目するに当たらないのですが、
もう少し使える状態に作り込んだらこちらで紹介しようと思います。