Web制作

Firebaseを使って独自ドメインのWebサイトを公開する方法

はじめに

Firebaseを使って独自ドメインWebサイトを公開する方法をまとめました。

一般的にはレンタルサーバーなどへFTPツールなどを利用してHTMLファイルをアップして、Webサイト公開という流れですが、Firebaseを使用すると、コマンド一発でWebサイト公開できるようになります。

ただ、独自ドメインを設定するのは少し複雑です。
ボク自身も数ヶ月経ったら独自ドメインの設定方法忘れそうなので、備忘のために当記事を書きました。

Firebaseを使ってWebサイトを公開したいという方は、ぜひ参考にしていただければと思います。

前提事項

今回ドメイン取得はお名前.comを利用する前提で解説していきます。

ドメイン取得

まずは、お名前.comでドメイン取得します。
取得したいドメインを入力し、検索ボタンをクリックします。

お名前.com

スクリーンショット 2019-02-09 1.35.28.png

次にサブドメインを選択します。

スクリーンショット 2019-02-09 1.35.54.png

オプションは特に不要なので、すでにIDを持っている方はID情報を入力し、ログインします。

スクリーンショット 2019-02-09 1.36.32.png

お支払い方法を確認されますので、問題なければ申し込むボタンを押します。

スクリーンショット 2019-02-09 1.38.50.png

以上でドメイン取得は完了となります。

スクリーンショット 2019-02-09 1.40.03.png

firebaseコンソールでプロジェクト作成

以下のURLへアクセスし、firebaseコンソールでプロジェクト作成を行います。
firebaseコンソールへログインするにはGoogleのアカウントが必要なので、アカウントを持っていない方はアカウントを作成し、ログインしましょう。

firebase公式サイト

ログインすると、以下のような画面が表示されるので、右上のコンソールへ移動を押下します。

スクリーンショット 2019-02-09 1.41.25.png

コンソールへ移動すると、プロジェクト一覧が表示されますので、赤枠のプロジェクトを追加ボタンを押下します。

スクリーンショット 2019-02-09 1.41.54.png

プロジェクト追加画面が表示されますので、プロジェクト名は任意のプロジェクト名を指定し、その他の項目は下記のような設定とし次へ進んでください。

スクリーンショット 2019-02-09 1.44.07.png

次に進むと、認証画面に移動しますので、対象アカウントを選択し、許可すれば完了です。

スクリーンショット 2019-02-09 1.50.03.png

スクリーンショット 2019-02-09 1.50.14.png

node.jsインストール

次にfirebaseツールをローカルにインストールするために必要なnode.jsをインストールします。

node.jsのインストール方法については、以下の記事をご参照ください。

【Mac】node.jsインストール方法はじめに Macのnode.jsのインストール方法まとめました。 今回、node.jsのインストールにあたり、使用するnode.js...

firebase toolのインストール

node.jsをインストールしたら、次は以下のコマンドを入力し、firebase toolをインストールします。

firebaseへログイン

firebase toolをインストールしたら、早速ローカルで以下のコマンドを実行します。
コマンドを実行すると、以下のような質問をされますが、デフォルトでY(Yes)が選択されてるので、Enterキーを押します。

以下のような画面がブラウザに表示されればログイン成功です。

スクリーンショット 2019-02-09 1.50.25.png

ローカル環境へのfirebaseプロジェクトの作成

プロジェクトフォルダを以下のコマンドで作成し、作成したソースコードをpublic配下に格納してください。

※firebaseで一般公開するにはpublicというフォルダを明示的に作成する必要があります。

次に、プロジェクトフォルダへ移動します。

以下のコマンドを実行し、プロジェクトIDの確認を行います。

以下のコマンドを実行するのですが、project=「上記のProject ID」を指定してから実行してください。

すると、以下のような選択がコマンドラインに表示されますので、矢印キーでHostingを選び、スペースでチェックし、Enterキーで確定してください。

すると、さらに以下のような質問をされるのですが、すべてデフォルトのままでOKなので、Enterを押していきます。
最後に「Firebase initialization complete!」と表示されればOKです。

デプロイ(Webサイト公開)

次に以下のコマンドを実行し、Webサイトを公開します。

「Hosting URL」部分のURLをブラウザへ開き、WEBサイトが表示されればOKです。

独自ドメインの設定

さて、ここからが本題なのですが、上記URLのfirebaseappというドメインはいけてないので、独自ドメインを設定していきます。

firebaseコンソールに戻り、「Hosting」というタブを選択します。

スクリーンショット 2019-02-09 2.12.31.png

ドメイン接続ボタンを押下します。

スクリーンショット 2019-02-09 2.14.20.png

先ほどお名前.comで取得したドメインを入力し、次へ進みます。

スクリーンショット 2019-02-09 2.14.58.png

すると、下記のようなTXTレコードが表示されますので、赤枠部分を押してコピーします。

スクリーンショット 2019-02-09 2.16.35.png

続いて、お名前.com Navi(管理画面)へログインします。

管理画面にログインしたら、DNSタブの「ドメインのDNS関連機能設定」へチェックし、次に進みます。

スクリーンショット 2019-02-09 2.17.52.png

今回取得したドメインへチェックし、次へ進みます。

スクリーンショット 2019-02-09 2.18.22.png

DNSレコードを「設定する」というボタンを押下します。

スクリーンショット 2019-02-09 2.18.57.png

すると、下記のようなDNSレコード設定項目がありますので、TYPEは「TXT」を指定し、VALUEへ先ほどfirebaseコンソールでコピーした値を貼り付け、追加ボタンを押します。

TTLはキャッシュクリアされる時間(s)なのですが、ここはお好きな値を設定してください。

スクリーンショット 2019-02-09 2.19.36.png

追加したら、画面下に移動し、下図のチェックボックスへチェックし、次へ進みます。

スクリーンショット 2019-02-09 2.19.59.png

すると、確認画面が表示されますので、問題なければ設定するボタンを押下します。

スクリーンショット 2019-02-09 2.20.22.png

次にfirebaseコンソールに戻り、確認ボタンを押します。
ただ、DNSレコード設定が反映されるまで長ければ数時間かかるので、反映されるまでは以下のような警告がでます。

根気よく待ちましょう。

スクリーンショット 2019-02-09 2.20.56.png

反映され、確認ボタンを押したら、以下のようなドメインとIPの紐付けが表示されますので、この2つのIPをコピーしましょう。

スクリーンショット 2019-02-09 2.24.14.png

コピーしたら、再びお名前.comの管理画面からDNSレコード設定をします。
次はTYPEは「A」を指定し、VALUEに先ほどコピーしたIPアドレスを貼り付け、追加します。

IPアドレスは2つあるので、同様の手順でもう1レコード追加してください。

スクリーンショット 2019-02-09 2.25.42.png

こちらも反映までに長くて数時間かかります。
以下ようにステータスが「接続されています」となったら完了です。
取得したドメインでアクセスしてみましょう。

20190220-014436.png

ちなみに今回の解説で使ったWebサイトはこれですww

徳性寺公式サイト