ReactアプリをFirebase Hostingにデプロイ(独自ドメイン設定まで)

本記事では以前FirebaseのAuthenticationとFirestoreを使って作ったWebアプリをFirebase Hostingにサクッとデプロイした後に独自ドメインを追加する方法までを解説します。

FirebaseのHosting機能はReactとも相性がよくお手軽にデプロイできます。HTTPSをデフォルトでサポートしている点も嬉しい点です。

関連記事

前回の記事(以下にリンク添付)ではFirebaseのAuthenticationを使って認証アプリを作成しましたが、本記事ではログインすると表示されるページにメモを追加/表示/更新/削除できる機能を実装します。データの保存にはFirebas[…]

home-screen

作業環境

macOS 10.15.7

Node.js 14.3.0

npm 6.14.5

firebase-tools 8.14.1

プロジェクトのビルド

プロジェクトのルートディレクトリで以下のどちらかのコマンドを実行してリリース用ファイルを作成します。処理が完了するとbuildディレクトリが作成されリリース用ファイルが出力されます。

// npm利用
npm run build

// yarn利用
yarn run build

Firebase CLIのインストール

Firebase CLI(Command Line Interface)は、Firebaseとコマンドラインを通して連携できる公式ツールです。このツール1本で対話的にデプロイできてしまう優れものです。

次のどちらかのコマンドを使ってインストールします。他のインストール方法については公式ドキュメントをご参照ください。

// npm利用
npm install -g firebase-tools

// yarn利用
yarn global add firebase-tools

Firebase CLIのGoogle認証

Firebase CLIからFirebaseにアクセスするためにGoogleにログインして認証します。次のコマンドを実行します。

firebase login

 

次のメッセージが出ます。Firebase CLIの挙動について情報提供を許可するかと問われています。Yesの「y」かNoの「n」を入力してエンターキーを押してください。

i Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google’s privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI usage and error reporting information? (Y/n)

 

ブラウザ上でFirebaseを利用しているGoogleアカウントの選択を求められますので利用アカウントをクリックしてください。

firebase-tools_1

 

次に表示される画面で「許可」ボタンをクリックしてください。

firebase-tools_2

 

以下のメッセージがブラウザ上で出て認証完了です。

firebase-tools_3

 

コマンドライン上にもログイン成功のメッセージが出ます。

✔ Success! Logged in as xxx@gmail.com

 

次のコマンドでFirebaseのプロジェクト一覧を確認できれば問題なくFirebaseと連携していることを確認できます。

firebase projects:list

Firebase CLIのセットアップ

次のコマンドをプロジェクトのルートディレクトリで実行するとHostingのセットアップを対話的に開始できます。

firebase init

 

次に今回処理したい内容を問われます。今回は純粋にサイト立ち上げのデプロイだけを行いたいので矢印キーでHostingまで移動してスペースキーを押して選択した後にエンターキーを押してください。

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.

◯ 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

◯ Emulators: Set up local emulators for Firebase features

◯ Remote Config: Get, deploy, and rollback configurations for Remote Config

 

次に連携するFirebaseプロジェクトをどうするかを問われます。今回は既に作ってあるFirebaseプロジェクトと連携したいので「Use an existing project」を選択します。

=== Project Setup

First, let’s associate this project directory with a Firebase project.

You can create multiple project aliases by running firebase use –add,

but for now we’ll just set up a default project.

? Please select an option: (Use arrow keys)

❯ Use an existing project

  Create a new project

  Add Firebase to an existing Google Cloud Platform project

  Don’t set up a default project

 

連携したいFirebaseプロジェクトを選択してエンターキーを押してください。

? Select a default Firebase project for this directory:

❯ react-firebase-auth-samp-73fc1 (react-firebase-auth-sample)

 

次にデプロイする対象ディレクトリを尋ねられます。上記でリリースファイルを出力したディレクトリ「build」と入力してエンターキーを押してください。

? What do you want to use as your public directory? build

 

次にSPA(Single Page Application)としてデプロイするかを尋ねられます。Yesの「y」を入力してエンターキーを押してください。これで全てのアクセスを/index.htmlに転送してくれます。本アプリのHTMLは/index.htmlしかありませんのでこの設定は大助かりです。

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

 

次にGitHubと連携してデプロイするかを問われますが今回は利用しないので「n」を入力してエンターキーを押します。

この設定は2020/10/08に追加された新機能です。この新機能を使ってFirebaseとGitHubを連携する手順について別記事にまとめていますので、ご興味あれば以下のリンク先をご参照ください。

? Set up automatic builds and deploys with GitHub? (y/N) n

関連記事

本記事では、前回記事でFirebase HostingにデプロイしたReactアプリ(Firebase Authenticationによる認証とFirestoreによるCRUD機能があるメモアプリ)を対象にGitHubと連携することでCI([…]

プルリクエスト3

 

次に/index.htmlを上書きするかを問われますが、ここはNoの「n」を入力してエンターキーを押してください。

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

 

すると次のとおり完了メッセージが表示されます。メッセージにあるようにプロジェクトのルートディレクトリ直下にデプロイ用の設定ファイル「firebase.json」と「.firebaserc」が書き出されています。

i Skipping write of build/index.html

i Writing configuration info to firebase.json…
i Writing project information to .firebaserc…

✔ Firebase initialization complete!

// firebase.json

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
// .firebaserc

{
  "projects": {
    "default": "react-firebase-auth-samp-73fc1"
  }
}

Firebase Hostingへのデプロイ

次のコマンドをプロジェクトのルートディレクトリで実行してデプロイします。

firebase deploy

 

下記のメッセージが出てあっさりデプロイ完了です。以下のどちらかのURLでデプロイしたサイトにアクセスできるようになりました。

https://react-firebase-auth-samp-73fc1.web.app
https://react-firebase-auth-samp-73fc1.firebaseapp.com

=== Deploying to ‘react-firebase-auth-samp-73fc1’…

i deploying hosting
i hosting[react-firebase-auth-samp-73fc1]: beginning deploy…
i hosting[react-firebase-auth-samp-73fc1]: found 18 files in build
✔ hosting[react-firebase-auth-samp-73fc1]: file upload complete
i hosting[react-firebase-auth-samp-73fc1]: finalizing version…
✔ hosting[react-firebase-auth-samp-73fc1]: version finalized
i hosting[react-firebase-auth-samp-73fc1]: releasing new version…
✔ hosting[react-firebase-auth-samp-73fc1]: release complete

✔ Deploy complete!

Project Console: https://console.firebase.google.com/project/react-firebase-auth-samp-73fc1/overview
Hosting URL: https://react-firebase-auth-samp-73fc1.web.app

独自ドメインの設定

※本セクションでは独自ドメインは別途取得済みであることを前提に話を進めます。

 

FirebaseのHosting画面 > ダッシュボードから「カスタムドメインを追加」ボタンをクリックします。

domain_settings_1

 

追加したい独自ドメインを入力して「次へ」ボタンをクリックします。

domain_settings_2

 

ドメインの認証を求められますので、表示されたTXTレコードに設定するための値をコピーしておきます(値の下にあるアイコンをクリックするとクリップボードにコピーされます)。画面はそのままにしておいてください。

domain_settings_3

 

お使いのDNSプロバイダーにてTXTレコードを追加して、上記で取得した値を設定しておきます。
Firebaseのコンソールに戻って「所有権を証明」ボタンをクリックしてドメインの認証をします(DNSプロバイダーによってはTXTレコード反映まで少し時間がかかるかもしれません)。

domain_settings_4

 

次にDNSプロバイダーにてAレコードを2つ追加するよう指示されます。画面はそのままにしてDNSプロバイダー側の設定に移ります。

domain_settings_5

 

DNSプロバイダーにて上記で指示されたAレコードを2つ追加して、Firebaseの画面で「終了」ボタンをクリックします。

domain_settings_6

 

本アプリではFirebaseの認証機能(Authentication)を利用しているので、Authenticationで独自ドメインからのアクセスを許可しておく必要があります(デフォルトドメインは自動で許可されています)。Authentication画面のSign-in methodタブにある承認済みドメインという所で独自ドメインを追加してください。

domain_settings_8

 

以上で独自ドメインの設定は完了です。FirebaseのHosting機能はHTTPSアクセスをデフォルトでサポートしていますので「https://<独自ドメイン>」でアクセスできます(本アプリの独自ドメインURL: https://react-firebase-auth-sample.btj0.com/)。ただし独自ドメイン追加直後はHTTPSのための証明書発行処理が裏で動いているので、この処理が終わった後に晴れて独自ドメインでアクセスできるようになります。

domain_settings_9

参考サイト

Firebase CLI 公式ドキュメント

 

sponsor