Gatsby製WebサイトをFirebase+ムームードメインで公開してみた

Webアプリ開発プラットフォーム「Firebase Hosting」を使って、ムームードメインで管理する独自ドメインでGatsby製Webサイトを公開しました。

今回作ったWebサイト https://imairisako.com/

本記事は『あさぎデザインひとりAdvent Calendar 2019』の8日目のエントリーです。

前編はこちら

初心者がReact製の静的サイトジェネレーター「Gatsby」でシンプルなWebサイトを作ってみた

Firebaseの設定

右上の「コンソールへ移動」をクリックする

以下の手順で、プロジェクトを作成します。

  1. コンソールの「プロジェクトを追加」ボタンをクリックする。
  2. Googleアカウントでログインする。
  3. プロジェクトに名前を付ける。(公開予定のドメインと同じ文字列にするとわかりやすいです)
  4. Google アナリティクスとの連携設定をする。(今回はGAアカウントがすでにあったので連携しました。なければ新規作成)
  5. 「Firebase CLIがGoogleアカウントへのアクセスをリクエストしています」を許可する。

Firebase CLIとGoogleアカウントの連携ができたら、Macのターミナルで以下を実行します。(node.jsが必要なので先にインストールしておいてください)

Terminal
npm install -g firebase-tools

問題なく実行できたら、Firebaseにログインします。

Terminal
firebase login

「? Allow Firebase to collect 〜」という質問が出てくるので、「Y」を打ってエンターを押します。ブラウザ上で「Firebase CLI Login Successful」という表示が出たらログイン完了。

公開設定

Terminal
firebase init

ターミナル上でいくつか質問をされます。

  1. 「What do you want to ~」は「build」と打ってEnter
  2. 「Configure as a ~」は「y」と打ってEnter
  3. 「File build/index.html ~」は「N」と打ってEnter

質問内容の解説は下記のページが詳しいのでぜひご覧ください。

Firebase Hostingでアプリを本番環境にデプロイする :CodeZine(コードジン)

問題なければ、デプロイをして公開します。

Terminal
firebase deploy

ターミナル上にHosting URLとして「https://hogehoge.firebaseapp.com/」が表示されます。このURLでサイトが正常に表示できれば完了です。

2回目以降のデプロイ

Terminal
npm run build
firebase deploy

2回目以降に修正・追加した内容を公開する場合は、上記の2つのコマンドを実行します。

独自ドメインの設定をする

Firebaseの管理ページで「Hosting」を選択します。

「開発」>「Hosting」をクリックする
  1. 「ドメインを接続」ボタンをクリックする
  2. ムームードメインであらかじめ取得しておいたドメインを入力する
  3. 「所有権の確認」に表示された情報をムームーDNSで設定する
レコードタイプ「TXT」で所有権を確認後、レコードタイプ「A」を設定する

ムームードメインの「ムームーDNS」設定画面でFirebase Hostingに表示された値を入力します。

登録したドメインのステータスが「接続されています」になっていればOK

DNSの設定が反映されるまでステータスは「保留中」と表示されます。しばらく待っていれば「接続されています」になるのでこれで作業は完了。

この方法で設定したドメインは自動的にSSL証明書付きとして扱われるので、特に何も設定しなくても「https://〜」として利用できます。

参考サイト

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