Edited at

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


1. はじめに

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

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

ただ、独自ドメインを設定するのは少し複雑です。

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

ぜひ参考にしていただければと思います。


2. 前提事項

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


3. ドメイン取得

まずは、お名前.comでドメイン取得します。

取得したいドメインを入力し、検索ボタンをクリックします。

お名前.com

次にトップドメインを選択します。

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

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

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


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

以下のURLへアクセスし、firebaseコンソールでプロジェクト作成を行います。

firebaseコンソールへログインするにはGoogleのアカウントが必要なので、アカウントを持っていない方はアカウントを作成し、ログインしましょう。

https://firebase.google.com/?hl=ja

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

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

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

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


5. node.jsインストール

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

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

node.jsインストール方法


6. firebase toolのインストール

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


ターミナル

npm install -g firebase-tools



7. firebaseへログイン

firebase toolをインストールしたら、早速ローカルで以下のコマンドを実行します。

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


ターミナル

$ firebase login

? Allow Firebase to collect anonymous CLI usage and error reporting information? (Y/n)
Success! Logged in as xxxx@gmail.com

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


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

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

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


ターミナル

$ mkdir -p プロジェクト名/public


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


ターミナル

$ cd プロジェクト名

$ pwd

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


ターミナル

firebase list

┌─────────────────┬───────────────────────┬─────────────┐
│ Name │ Project ID / Instance │ Permissions │
├─────────────────┼───────────────────────┼─────────────┤
│ TokusyoTemple │ tokusyotemple │ Owner │
├─────────────────┼───────────────────────┼─────────────┤

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


ターミナル

firebase init --project=tokusyotemple


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


ターミナル

     ######## #### ########  ######## ########     ###     ######  ########

## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########

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

/Users/yamasakayuma/TokusyouTemple/public

? 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


すると、さらに以下のような質問をされるのですが、すべてデフォルトのままでOKなので、Enterを押していきます。

最後に「Firebase initialization complete!」と表示されればOKです。


ターミナル

What do you want to use as your public directory? (public)

enter

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

enter

? File public/index.html already exists. Overwrite? (y/N)

enter

Firebase initialization complete!



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

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


デプロイ

firebase deploy

=== Deploying to 'tokusyotemple'...

i deploying hosting
i hosting[tokusyotemple]: beginning deploy...
i hosting[tokusyotemple]: found 181 files in public
✔ hosting[tokusyotemple]: file upload complete
i hosting[tokusyotemple]: finalizing version...
✔ hosting[tokusyotemple]: version finalized
i hosting[tokusyotemple]: releasing new version...
✔ hosting[tokusyotemple]: release complete

✔ Deploy complete!

Project Console: https://console.firebase.google.com/project/tokusyotemple/overview
Hosting URL: https://tokusyotemple.firebaseapp.com
yamasakBookpuro:TokusyouTemple yamasakayuma$


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


10. 独自ドメインの設定

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

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

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

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

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

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

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

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

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

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

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

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

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

次にfirebaseコンソールに戻り、確認ボタンを押します。

ただ、DNSレコード設定が反映されるまで長ければ数時間かかるので、反映されるまでは以下のような警告がでます。

根気よく待ちましょう。

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

コピーしたら、再びお名前.comの管理画面からDNSレコード設定をします。

次はTYPEは「A」を指定し、VALUEに先ほどコピーしたIPアドレスを貼り付け、追加します。

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

こちらも反映までに長くて数時間かかります。

以下ようにステータスが「接続されています」となったら完了です。

取得したドメインでアクセスしてみましょう。

ちなみに今回ボクが公開したWebサイトはこれですww

https://tokusyo-temple.com/

また、以下のブログではフリーランスエンジニアになる方法や技術メモ等投稿してますので、もし興味あればご参考にしていただければと思います。

https://yacchi-engineer.com/