LoginSignup
15
15

More than 5 years have passed since last update.

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

Last updated at Posted 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なら ↓ のような画面が出ます.

welcome.png

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です.
helloworld_html.png


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

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

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

hosting.png

Step 1 : ドメインの追加

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

step1.png

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

Step 2 : 所有権の確認

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

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

step2.png

ムームーDNSの場合

ドメインのコントロールパネル

ネームサーバ設定変更から
『ムームードメインのネームサーバ(ムームーDNS)を使用する』
を選択し,ネームサーバ設定変更をClick

ネームサーバ設定変更の『ムームーDNS』のセットアップボタンをClick

設定2のリストにTXT DNSレコードを入力
 サブドメイン : 空欄(独自ドメイントップ) or 設定したいサブドメイン
 種別 : TXT
 内容 : Step2の画面で表示されたFirebaseのDNSレコード文字列

セットアップ情報変更をClick

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

Step 3 : 実行

タイプAのDNSレコードとしてIPアドレスが表示されます.
これをStep2と同じ方法でDNSプロバイダに登録します.

step3.png

新規に独自ドメインをHostingサイトにひも付ける場合はクイックセットアップのままで終了します.
(すでに他サイトにひも付けている独自ドメインをFirebase Hostingに移行する場合などに詳細設定を使うようです)

終了をClick後,ドメイン一覧にカスタムとして独自ドメインが表示されていると思います.

result.png

ステータスが『設定が必要です』となっている間は独自ドメインからは接続できません.しばらく待たないといけないようです.

ステータスは ↓ のように変化していく模様.

『設定が必要です』 : 独自ドメインから接続不可
 ↓
『保留中』 : ドメイン変更反映中,最大24時間必要とのこと
 ↓
『接続されています』 : 独自ドメイン→Firebase Hostingに接続完了


『接続されています』状態になると,↓ のように独自ドメインのURLにアクセスするとFirebase Hostingにデプロイしたindex.htmlが表示されると思います.

ok.png

おわり

・Firebase Hostingのセットアップ
・独自ドメインからアクセス
のふたつを実現するまでの最低限度のサンプルをまとめてみました.

もともとDNSまわりの勉強から実際に使ってみようと思ったのが最初でしたが,実際にやりながらいろいろ調べると理解がしやすかったです.

References

Firebase CLI : https://firebase.google.com/docs/cli
Firebase Custom Domain : https://firebase.google.com/docs/hosting/custom-domain

---///

15
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
15