【Reactアプリ開発】Firebaseでアプリをホスティングする

こんばんは。本日はReactで開発したアプリケーションを、Firebaseを使ってホスティングする仕組みを実装していきたいと思います。Firebaseはリアルタイムデータベースとして利用したことがありましたが、ホスティングもできるんですね・・！ますますWebアプリの開発〜デプロイが簡単になって感動です。。。

それではまいります。

Firebaseによるホスティングでできること

Firebaseのホスティング機能では、以下を実現することができます。（Firebase公式ページより）

デフォルトでhttps通信が可能で、ドメインも無料利用が可能・しかもデプロイも一瞬とは・・すごいなぁ・・

• セキュアな通信：構成不要なSSLが組み込まれているため、デフォルトでhttps通信ができる。全てのドメインにSSL証明書が自動的にプロビジョニングされている。
• 静的コンテンツ・動的コンテンツ・マイクロサービスをホスティング：CSSやHTMLだけでなく、Express.jsマイクロサービスやAPIもホスティング可能
• コンテンツを高速で配信：アップロードしたファイルは世界中のCDN(Contents Delivery Network)エッジにあるSSDにキャッシュされるので、ユーザがどこにいても高速なコンテンツ配信が可能。
• Firebase CLIで簡単にデプロイ：Firebase CLIというツールを利用すると、数秒でアプリを稼働可能
• ワンクリックでロールバック：Firebase Hostingはワンクリックでロールバックできる完全なバージョン管理とリリース管理を提供。
• デフォルトでweb.appドメインとfirebaseapp.comサブドメインが利用可能：これら２つのサイトが同じデプロイ済コンテンツと構成を配信
• 複数のWebサイトをホスティング可能
• 独自のドメインの割当も可能

ホスティングの設定をする

プロジェクトの作成

まずは、以下のサイトからFirebaseプロジェクトの作成を始めます。

https://firebase.google.com/?hl=ja

「プロジェクトを追加」を押します。

リソースロケーションの設定

続けて、リソースロケーションの設定を行います。

プロジェクト概要横の「プロジェクトを設定」を選択します。

リソースロケーションを設定します。日本からのアクセスを想定したアプリなので、asia-northeast1で設定しておきます。（asia-northeast1は東京、asia-northeast2は大阪）

Firebase-Toolsのインストール

プロジェクトを作成したら、下のダッシュボードメニューのHostingを選択してみてください。

すると、下記のようなガイダンスが表示されます。

ホスティングを行うためには、上記の通りCLIツールのインストールが必要ですので、ローカルの環境（Reactプロジェクトのある環境）にインストールしておきます。

npm install -g firebase-tools

ReactアプリをFirebaseプロジェクト化

CLIのインストールが終わったら、下記のガイダンスに切り替わります。

次は、ReactアプリをFirebaseプロジェクトとして設定する作業になります。

firebase login

firebase init

ここでいくつかの質問が対話形式で続きますが、私の場合は、後々FirebaseのDatabaseサービスも利用する予定だったので、DatabaseとHostingを選択して進めていきました。

ここ、ポイントです。

1つ目の、public directoryとするディレクトリは、Reactアプリの場合はbuildディレクトリを指定します。

２つ目は、Yes。３つ目のindex.htmlの上書きはNoを選択するようにしてください。

デプロイ

最後にFirebase Hostingへのデプロイを実行します。

firebase deploy

これでデプロイ完了です。上のログの下にホスティングURLが表示されますので、アクセスしてアプリのトップページが表示されていれば成功です！

お疲れ様でした！