【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サブドメインが利用可能:これら2つのサイトが同じデプロイ済コンテンツと構成を配信
  • 複数の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ディレクトリを指定します。

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

デプロイ

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

firebase deploy

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

お疲れ様でした!

0

この記事を気に入っていただけたらシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。

ABOUT US

アバター
Yuu113
初めまして。Yuu113と申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。