More than 5 years have passed since last update.

Firebase Hostingで独自ドメインからHello World出すまで(2019/04版)

Last updated at 2019-04-09Posted at 2019-04-09

TL;DR (長い3行で)

Firebase HostingにHello World出すHTMLをデプロイ
ドメインはムームードメイン等で適当に取得
ブラウザ等から独自ドメインにアクセスしてHello WorldのHTMLを表示させる

Firebase Hostingのセットアップ

↓ のFirebaseのConsoleから適当なProjectを作成しておきます．
https://console.firebase.google.com

Firebase CLI Install

コマンドラインからFirebaseを制御するためのTool.


# Install, あらかじめNodeのInstallが必要
$ npm install -g firebase-tools

# Firebase Consoleから作ったProjectと同じアカウントでLogin
$ firebase login

自UserのHome Dir以外(/usr/local/lib/node_modulesとか)にもwriteしにいくようなので，環境(User権限)によってはsudoが必要．
Proxy設定している場合，環境変数のhttp_proxy/https_proxyがそのまま使われるようです．
suduする場合，sudo -Eとかで環境変数引き継ぎが必要です．

Firebase : Init + Config

CLI Install移行，Firebaseにかかわる処理はCommand Lineで行います．

$ firebase init

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

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

  /home/<your-firebase-hosting-path>/firebase-hosting

? 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

↑↓キーとSpaceキーでHostingを選択，Enterキーで決定したあと，Hosting ProjectのConfigをいくつか聞かれます．

? Select a default Firebase project for this directory: 
　→ 最初に作ったProjectを選んでEnter

? What do you want to use as your public directory? public
　→ 公開するRoot Dirを選ぶ模様．デフォルトはpublicでこの下にindex.htmlとかができる．
　　 webpackerとかでbuildするようにしている場合はそのoutput dirを指定すると便利．

? Configure as a single-page app (rewrite all urls to /index.html)? No
　→ SPA運用をするかどうか，ドメイン以下のすべてのURLをTopページに置き換えてくれる．
　　 DefaultはNo.

Firebase : Deploy

# 今回はこのDirにひも付けているFirebase ProjectがHostingだけなので，
# --only のoptionは無くても変わりません．
$ firebase deploy --only hosting

いくつかログが出たあと，

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/<your-firebase-project>/overview
Hosting URL: https://<your-firebase-project>.firebaseapp.com

が出力されたら完了です．
Project ConsoleのURLはProject Topなので，HostingのTopは
https://console.firebase.google.com/project/<your-firebase-project>/hosting/main
になります．

Hosting URLにアクセスすると，public/index.htmlの内容が表示されます．
Defaultなら ↓ のような画面が出ます．

public/index.htmlの中身はDefaultのままだと上のメッセージを出したり，内部でFirebase SDKの機能を使うためのJavascriptをLoadしたりする処理がかかれています．
今回はpublic/index.htmlの中身を ↓ のようにシンプルなものに書き換えます．

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>HELLO WORLD !</title>
  </head>
  <body>
    <h1>Hello World !</h1>
  </body>
</html>

書き換えた上で再度 firebase deploy を実行します．
↓ のようなページが表示されればOKです．

ここまででFirebase HostingのInitとDeployは完了です．

独自ドメインとFirebase Hostingを接続

ここまで完了していれば，
https://console.firebase.google.com/project/<your-firebase-project>/hosting/main
のページに ↓ のような『ドメインを接続』のボタンが出ていますので，ここから独自ドメイン接続の処理を開始できます．

Step 1 : ドメインの追加

ドメインの欄に取得した独自ドメインを入力します．

すでにドメインを登録していて，新規に登録した独自ドメインからそちらにリダイレクトする場合は『既存のウェブサイトにリダイレクトする』のCheck Boxを使うようです．

Step 2 : 所有権の確認

この画面で表示されるFirebaseのDNSレコードを独自ドメインを取得したDNSプロバイダ(ムームードメインなど)に登録します．

DNSレコードのタイプ(この場合はTXT)の解説は↓のサイトなどがぐぐると出てきます．
https://server-99.com/dns-record/

ムームーDNSの場合

ドメインのコントロールパネル
↓
ネームサーバ設定変更から
『ムームードメインのネームサーバ(ムームーＤＮＳ)を使用する』
を選択し，ネームサーバ設定変更をClick
↓
ネームサーバ設定変更の『ムームーDNS』のセットアップボタンをClick
↓
設定2のリストにTXT DNSレコードを入力
　サブドメイン : 空欄(独自ドメイントップ) or 設定したいサブドメイン
　種別 : TXT
　内容 : Step2の画面で表示されたFirebaseのDNSレコード文字列
↓
セットアップ情報変更をClick

確認ボタンをClickするとサーバ側で接続確認がはじまります．
登録後すぐだと確認が失敗するようなので，しばらく待つ必要があるかもしれません．