Help us understand the problem. What is going on with this article?

ReactアプリをFirebase Hostingにデプロイ

先日、初めてFirebaseを使ってデプロイする機会がありました。
基本的には案内に沿って進めるだけでしたが、せっかくなので手順をメモしておきます。

前提

  • デプロイするReactアプリがすでにある
  • yarnが使える環境である

また、自分はDocker環境を使っていたので、Docker環境でデプロイするにあたっての補足も一部書いています。

Firebase側

新規登録・プロジェクト作成

  1. Firebaseへアクセス

  2. 「使ってみる」「プロジェクトを作成」を選択
    Firebase トップ画面

  3. プロジェクトの作成

    • 1 - プロジェクト名を入力 + 利用規約にチェック して「続行」 Firebaseプロジェクト プロジェクト名入力画面
    • 2 - Google Analyticsを有効にして「続行」(※今回は有効にしていますが任意です) Firebaseプロジェクト Google Analytics設定画面
    • 3 - 連携するGoogle Analyticsアカウントを選択(もしくは新規作成)して「プロジェクトを作成」 Firebaseプロジェクト Google Analytics連携設定画面

少し時間がかかりますが、これでプロジェクトが作成されます。

アプリを追加

  1. プロジェクトトップから、追加するアプリのプラットフォームの中から「ウェブ」を選択
    Firebaseプロジェクト トップ画面

  2. ウェブアプリにFirebaseを追加

    • 1 - アプリのニックネームを入力 + Firebase Hosting設定を有効化 して「アプリを登録」 Firebaseアプリ追加 基本設定画面
    • 2 - Firebase SDKを予約済みURLから使用する場合は、スクリプトを控えておき「次へ」(※予約済みURLについてはこちらも参照) Firebaseアプリ追加 SDKスクリプト案内画面
    • 3 - Firebase CLIのインストール方法を確認して「次へ」 Firebaseアプリ追加 CLIインストール案内画面
    • 4 - Firebase Hostingへのデプロイ方法を確認して「コンソールに進む」 Firebaseアプリ追加 デプロイ案内画面

これでFirebaseプロジェクトにウェブアプリが追加されました。

Reactアプリ側

基本的には、Firebaseプロジェクトにアプリを追加した時に表示された手順で進めていきます。

Firebase SDKの導入

Firebase SDKを導入する方法としては

  • 予約済みURLにあるものを読み込み使用する
  • CDNで配信されているものを読み込み使用する
  • ライブラリとしてインストールし使用する

の3つのやり方があり、Firebase SDK Snippetに関しては Firebaseプロジェクトの「設定」「プロジェクトを設定」のマイアプリから確認できます。

補足として、予約済みURLというのはFirebase HostingでのURLのことを指します。そのURL配下にSDKおよびアプリの識別情報のファイルが配置されるようになっており、それを読み込んでSDKを使用する形になります。
そのため、この方法はFirebase Hostingを使ってホスティングする場合のみ、使用可能です。
主に同じコードを複数のFirebase Hostingにデプロイする際に便利な方法のようです。

自分も最初は予約済みURLでの方法にしていましたが、$ yarn startでの通常のローカルサーバからはSDKを読み込むことができないために、Warningが出るのが気になりやめました。

今回はライブラリとしてインストールして使用する方法で進めます。

ライブラリのインストール

$ yarn add firebase

.envを作成

設定値はFirebase SDK Snippetの「構成」から確認できます。
Firebase SDK Snippet 構成情報画面

.env
# Firebase
REACT_APP_APP_KEY=※apikey
REACT_APP_AUTH_DOMAIN=※authDomain
REACT_APP_DATABASE_URL=※databaseURL
REACT_APP_PROJECT_ID=※projectId
REACT_APP_STORAGEBUCKET=※storageBucket
REACT_APP_MESSAGING_SENDER_ID=※messagingSenderId
REACT_APP_APP_ID=※appId
REACT_APP_MEASUREMENT_ID=※measurementId

Firebase SDKの初期化を行うファイルを作成

各種Firebaseの機能を使うには最初に初期化処理を行う必要があります。
そのため、初期化処理をするファイルをあらかじめ用意しておき、機能を使うときにimportするようにします。

libs/Firebase.js
import firebase from 'firebase/app';
import 'firebase/analytics';

const config = {
  apiKey: process.env.REACT_APP_APP_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGEBUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID,
};

firebase.initializeApp(config);

export default firebase;

Google Analyticsにデータ送信する設定を追記

自分の場合はindex.jsに追記しました。
最初は、SDK組み込みだけで自動的にデータ送信してくれるものと思っていましたが、firebase.analytics()をやらないといけないようです。

以下の内容をReactDOM.renderの上に追記。

index.js
import firebase from './libs/Firebase';

if (process.env.NODE_ENV === 'production') {
  firebase.analytics();
}
.
.
.

Firebaseプロジェクトのアプリとの連携

Firebase CLIの導入

$ yarn global add firebase-tools

Dockerの場合では、Node.jsコンテナ起動時のコマンドでインストールするようにしました。

これでfirebaseコマンドが使えるようになります。

firebaseへログイン

Dockerの場合は、OAuth認証で9005ポートを使用するので事前に開けておきます。

$ firebase login
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はオプションで、CLIの使用状況とエラー報告情報を収集して、製品の改善に役立てます。データはGoogleのプライバシーポリシー( https://policies.google.com/privacy )に従って収集され、ユーザーの特定には使用されません。

FirebaseがCLIの使用状況とエラー報告情報を収集することを許可しますか? (はい/いいえ)

任意で回答。

To change your data collection preference at any time, run `firebase logout` and log in again.

データ収集の設定をいつでも変更するには、 firebase logoutを実行して、再度ログインします。

Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Waiting for authentication...

認証のためのURLが表示されるので、ブラウザでアクセス。
内容を確認して「許可」
Firebase Googleアカウント認証確認画面

✔  Success! Logged in as XXX@gmail.com

無事に認証できるとCLI側はこの表示が出ます。
また、ブラウザ側では以下のような表示が出ます。
Firebase認証完了画面

連携・初期化処理

$ firebase init
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ 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   

このフォルダに設定するFirebase CLI機能はどれですか?スペースを押して機能を選択し、Enterを押して選択を確認します。 (スペース を押して選択、a を押してすべてを切り替え、i を押して選択を反転します)

今回はHostingのみ選択。

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プロジェクトに関連付けます。
複数のプロジェクトエイリアスを作成するには、firebase use --add、
ただし、ここではデフォルトのプロジェクトを設定します。

今回はすでにFirebaseプロジェクトを作っているのでUse an existing projectを選択。

? Select a default Firebase project for this directory: (Use arrow keys)
❯ project-name (project-name)

このディレクトリのデフォルトのFirebaseプロジェクトを選択:(矢印キーを使用)

連携させるプロジェクトを選択。

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? (public)

パブリックディレクトリは、プロジェクトディレクトリを基準にしたフォルダです。
firebase deployでアップロードされるホスティングアセットが含まれます。もし、あなたが
アセットのビルドプロセスがある場合は、ビルドの出力ディレクトリを使用します。

$ yarn buildでの生成物は/buildに作成されるので、buildと入力。

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

SPAアプリとして構成しますか(すべてのURLを/index.htmlに書き換えます)? (はい/いいえ)

今回はSPAなのでyを入力。

✔  Wrote build/index.html

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

✔  Firebase initialization complete!

これで設定ファイルが作成されて、連携は完了です。

Firebase Hostingへデプロイ

ビルドして、その生成物をデプロイします。

$ yarn build

$ firebase deploy
=== Deploying to 'project-name'...

i  deploying hosting
i  hosting[project-name]: beginning deploy...
i  hosting[project-name]: found 19 files in build
✔  hosting[project-name]: file upload complete
i  hosting[project-name]: finalizing version...
✔  hosting[project-name]: version finalized
i  hosting[project-name]: releasing new version...
✔  hosting[project-name]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/project-name/overview
Hosting URL: https://project-name.web.app

表示されるホスティングURLにアクセスして、アプリの内容がちゃんと表示されれば、無事デプロイ完了です。


Firebaseを初めて使いましたが、思っていた以上に簡単にデプロイ出来てよかったです。
Reactとの相性もいいみたいですし、他の機能も使っていきたいなーと思います。
可能性が広がりますね!

いずれはデプロイフローをCIで自動化するつもりなので、自動化できたら追記するかもしれません。

参考リンクまとめ

h-yoshikawa
精神疾患持ちのWebプログラマー。 とりあえず興味のあること、色々やってます。 (リンクは個人ブログです)
https://changeofpace.site
froide
Webサービスやモバイルアプリの受託開発。アジャイルをベースとした月額制のラボ型契約。
https://froide.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした