概要
前回記事はこちら
vue.jsまたはNuxt.jsで作成したSPAをfirebaseにホスティングして無料ドメインで公開するまでの手順と忘備録。
前回はfirebaseにWebサイトをホスティングをするまでを記載しました。
今回はホスティングしたサイトを無料ドメインを使って公開するための設定を記載する。
無料ドメインに関して
今回、無料ドメインを取得する手段としてFreenomを使用する。
tkやmlといったドメインを無料で取得可能。
有料プランもありますが、1年ごとに無料更新が可能な模様。
あくまで今回はfirebase含めて無料で公開するために使用するので、実験や個人的なサイト使用等の目的以外ではお名前.com等で有料のドメインを購入する方がよいかと思われる。
手順
ドメイン取得
Freenomにアクセスし、使用したいドメイン名を入力して利用可能状況をチェックしますを選択する。
ドメイン名別に使用可能状況が表示されるので使用したいドメイン名を選択(今すぐ入手)する。
下部には有料のドメインも表示されるが、下記5ドメインは無料で使用可能。
画面上部にチェックアウトボタンが表示されるので選択する。
ドメインの設定は後で行うので、「Forward this domain」を選択し、ダミーURLを入力。
Period は 12Months @ FREE を選択し Continue を選択。
なお、ログインが途中で求められた場合には、firebaseの作成時に使用したgoogleアカウントが使用できるので、googleアカウントでログインする。
googleアカウント(Gmail)のメールにアカウント確認用メールが届くので認証を行う。
メールのリンクから最終的なオーダー画面に行くので、住所等を入力。
(電話番号と会社名は不要だが住所は入力しないとエラーとなった。)
I hava~ の項目にチェックを入れて Compete Orderを選択する。
※この後、何故かNotFoundのエラーが発生して取得失敗かと思われたが、アカウントのメールに取得完了のメールが届けば成功。
freenomのトップページからServices→MyDomainを選択する。
先ほど取得したドメインが表示されるるので、Manage Domainを選択する。
Manage Freenom DNSを選択する。
User default ～を選択し、Change Nameserversを選択。
下記のようなDNSの設定画面になったら、一旦freenomの作業は中断する。
(入力を行うので開いたままにしておく。)
この後、firebase側の設定に移る。
firebaseからドメイン設定
firebaseのコンソールにアクセスする。左側のペインの開発→Hostingを選択する。
ドメインを接続を選択する。
ドメイン名を入力(取得したドメイン名)して次へを選択する。
値の欄をコピーする。
ここで先ほどのfreenomのDNSの設定画面に戻って下記を入力。
Name:(空欄)
Type:TXT
Target:コピーした値を張り付け
入力が終わったらSave Chagensを選択。
設定が終わったら、DNSの反映に時間がかかるので、ここで数十分～数時間待つ。
反映されているかの確認として、先ほどのfirebaseのコンソールに戻って、確認ボタンを押下する。
反映が終わっていないと、下図のようなエラーが表示されるので、反映されるまで待つ。
反映が終わると、次のような画面が表示されるので、下図の２つのIPをコピーする。
再度freenomのDNS設定画面に戻り、上記の２つの設定を追加する。
Name:(空欄)
Type:A
Target:コピーしたIPを張り付け
firebaseコンソールに戻り、終了を選択して閉じる。
ステータスが直後は 設定が必要です となっているが、 接続されています に時間がたてば変わる。
このままだと http://ドメイン名 でのアクセスとなるが、http://www.ドメイン名 でもアクセス可能とした場合には、 接続する を選択する。
先ほどと同様のダイアログが表示されるのでIPを確認する。(前回と同じIPになっていると思われる。)
再度freenomのDNS設定画面に戻り、下記のように入力する。
Name:www
Type:A
Target:コピーしたIPを張り付け
firebaseコンソールに戻り、しばらくたってステータスが接続されていますになれば完了。
これでwwwを含んだURLの場合はドメイン名のURLリダイレクトされてアクセス可能となる。
ブラウザを立ち上げ、ドメイン名でアクセスしてWEBサイトが表示されれば成功。
まとめ
前回はfirebase上での静的サイトのセットアップ全般を紹介し、今回は無料ドメインの取得(freenom)とドメインの登録を行った。
firebaseもfreenomも無料である程度使えてしまうため、個人の開発においては非常に便利な環境である。