本記事では以前FirebaseのAuthenticationとFirestoreを使って作ったWebアプリをFirebase Hostingにサクッとデプロイした後に独自ドメインを追加する方法までを解説します。
FirebaseのHosting機能はReactとも相性がよくお手軽にデプロイできます。HTTPSをデフォルトでサポートしている点も嬉しい点です。
前回の記事(以下にリンク添付)ではFirebaseのAuthenticationを使って認証アプリを作成しましたが、本記事ではログインすると表示されるページにメモを追加/表示/更新/削除できる機能を実装します。データの保存にはFirebas[…]
作業環境
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 CLIの挙動について情報提供を許可するかと問われています。Yesの「y」かNoの「n」を入力してエンターキーを押してください。なお「Y/n」と選択肢が表示されている場合は大文字の「Y」がデフォルト値を意味し、そのままエンターキーを押すとYesを選択したことになります。
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のプロジェクト一覧を確認できれば問題なくFirebaseと連携していることを確認できます。
Firebase CLIのセットアップ
次のコマンドをプロジェクトのルートディレクトリで実行するとHostingのセットアップを対話的に開始できます。
次に今回処理したい内容を問われます。今回は純粋にサイト立ち上げのデプロイだけを行いたいので矢印キーで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と連携してデプロイするかを問われますが今回は利用しないのでそのままエンターキーを押してNoを選択します。
この設定は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([…]
次に/index.htmlを上書きするかを問われますが、ここはNoを選択してそのままエンターキーを押してください。
すると次のとおり完了メッセージが表示されます。メッセージにあるようにプロジェクトのルートディレクトリ直下にデプロイ用の設定ファイル「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へのデプロイ
次のコマンドをプロジェクトのルートディレクトリで実行してデプロイします。
下記のメッセージが出てあっさりデプロイ完了です。以下のどちらかの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画面 > ダッシュボードから「カスタムドメインを追加」ボタンをクリックします。
追加したい独自ドメインを入力して「次へ」ボタンをクリックします。
ドメインの認証を求められますので、表示されたTXTレコードに設定するための値をコピーしておきます(値の下にあるアイコンをクリックするとクリップボードにコピーされます)。画面はそのままにしておいてください。
お使いのDNSプロバイダーにてTXTレコードを追加して、上記で取得した値を設定しておきます。
Firebaseのコンソールに戻って「所有権を証明」ボタンをクリックしてドメインの認証をします(DNSプロバイダーによってはTXTレコード反映まで少し時間がかかるかもしれません)。
次にDNSプロバイダーにてAレコードを2つ追加するよう指示されます。画面はそのままにしてDNSプロバイダー側の設定に移ります。
DNSプロバイダーにて上記で指示されたAレコードを2つ追加して、Firebaseの画面で「終了」ボタンをクリックします。
本アプリではFirebaseの認証機能(Authentication)を利用しているので、Authenticationで独自ドメインからのアクセスを許可しておく必要があります(デフォルトドメインは自動で許可されています)。Authentication画面のSign-in methodタブにある承認済みドメインという所で独自ドメインを追加してください。
以上で独自ドメインの設定は完了です。FirebaseのHosting機能はHTTPSアクセスをデフォルトでサポートしていますので「https://<独自ドメイン>」でアクセスできます(本アプリの独自ドメインURL: https://react-firebase-auth-sample.btj0.com/)。ただし独自ドメイン追加直後はHTTPSのための証明書発行処理が裏で動いているので、この処理が終わった後に晴れて独自ドメインでアクセスできるようになります。
参考サイト
Firebase CLI 公式ドキュメント