Firebase で React アプリをホスティングする

Firebase で React アプリをホスティングする

Firebase のホスティングを利用して、作成した Web ページをインターネットに公開する方法は既に紹介しています。この記事では、React で作成したアプリを Firebase のホスティング機能を利用してインターネットに公開する具体的な方法を紹介しています。

npm を利用して、React で開発する場合、「create-react-app」のスクリプトを利用して React のプロジェクトを作成すると、自動的に React のサンプルアプリを作成してくれます。このサンプルアプリには、公開用のイメージを作成するスクリプトが既に用意されているので、このスクリプトを利用して公開用のイメージを作成するだけで、あとは基本的な Firebase の管理コマンドを実行すれば、インターネットに簡単に公開できます。

React アプリのサンプルプロジェクトを作成

最初に React アプリのサンプルプロジェクト（テンプレート）を作成します。プロジェクトの作成には、「create-react-app」をインストールする必要があります。インストールしていない場合は、最初にインストールを行います。React を利用していろいろなアプリを開発する場合、頻繁に利用するので、システムレベルのインストールをすることをお勧めします。

$ sudo npm install -g create-react-app

(*) Windows の場合は「sudo」は不要です。「npm install -g create-react-app」でインストールします。システムレベルにインストールしない場合は、「npm install create-react-app」でこれから React プロジェクトを作成しようとしているフォルダにインストールします。

「create-react-app」の準備ができたら以下のコマンドを実行して、React のサンプルプロジェクトを作成します。以下の例では、「firebase-react-sample」というプロジェクトを作成します。コマンドを実行すると、「firebase-react-sample」というフォルダがコマンドを実行したフォルダに作成されます。

$ npx create-react-app firebase-react-sample --template typescript

この例では、「Typescript」を利用して開発する事を想定しているので、「--template typescript」オプションをつけて実行しています。Javascript でも開発は可能ですが、Typescript を利用した方が、インターフェースや変数の型や、変数の中身をチェックできるので品質の高いプログラムの開発が可能になります。

サンプルプロジェクトの実行

サンプルのプロジェクトを作成したら、サンプルプロジェクトの動作確認を行います。 作成したサンプルプロジェクトのフォルダに移動して「npm start」を実行します。

$ cd firebase-react-sample

$ npm start

実行すると、システムの標準設定（デフォルト）の Web ブラウザが自動的に立ち上がって、サンプルの React アプリが実行されます。Web ブラウザが開かない場合には、Web ブラウザを起動して「localhost:3000」にアクセスします。

Firebase ホスティングの初期設定

通常の Firebase のホスティングを利用する場合と同様に Firebase の初期設定を行います。 初期設定を行う前に以下の準備が必要になります。

1. Google アカウントの取得

2. Firebase プロジェクトの作成

3. 「firebase-toools」のインストール（「sudo npm inatall -g firebase-tools」）

4. Firebase へのログイン（「firebase login」）

これは、別の記事で解説していますのでそちらをご覧ください。 準備ができたら、Firebase の初期化のコマンドを実行します。

$ firebase init

「firebase init」を実行すると、幾つか質問をされますので必要に応じて答えてください。こちらも、別の記事で詳細を解説していますので、そちらを参照してください。

$ firebase init

     ######## #### ######## ######## ######## ### ###### ########

     ## ## ## ## ## ## ## ## ## ## ##

     ###### ## ######## ###### ######## ######### ###### ######

     ## ## ## ## ## ## ## ## ## ## ##

     ## #### ## ## ######## ######## ## ## ###### ########

You're about to initialize a Firebase project in this directory:

  /Users/XXXXX/Documents/projects/sv-sw/samples/firebase-react-sample

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action de

ploys

=== 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 an existing project

? Select a default Firebase project for this directory: test-68cee (test)

i Using project test-68cee (test)

=== Hosting Setup

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? build

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

? Set up automatic builds and deploys with GitHub? No

✔ Wrote build/404.html

✔ Wrote build/index.html

i Writing configuration info to firebase.json...

i Writing project information to .firebaserc...

✔ Firebase initialization complete!

公開用のフォルダ名を聞かれます、標準設定では「public」になっていますが、「build」を指定します。これは、React で公開用のイメージが「build」というフォルダに作成されるためです。後でも変更できますが、初期化の際に指定しておいた方がスムーズです。

実行すると、プロジェクトフォルダに「firebase.json」が作成されます。

{

  "hosting": {

    "public": "build",

    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]

  }

}

 Firebase の開発用のサーバーで動作を確認

既に、React の開発用サーバーで React サンプルプロジェクトの動作を確認していますが、ここでは、Firebase の開発用のサーバーで動作するか確認します。

Firebase の開発用サーバーで動作を確認する場合は、まず最初に「公開用のイメージ」を作成する必要があります。プロジェクトフォルダで以下のコマンドを実行します。

$ npm run build

このコマンドを実行すると、公開用のイメージが「build」というフォルダの下に作成されます。 Firebase の初期化でこの「build」フォルダを公開用のイメージに指定しているので、以下のコマンドを実行して Firebase の開発用の Web サーバーを起動すると、この公開用のイメージを使って React アプリが実行されます。

$ firebase serve

これで、Firebase の開発用の Web サーバーが起動されるので、「localhost:5000」にアクセスすると、公開用のイメージを使った Web サーバーで Firebase の基本設定に問題が無いかが確認できます。先程の、React の開発用のサーバー「localhost:3000」と同じ画面が表示されれば OK です。

インターネットに公開してみる

まずは、React の公開用のイメージ（「build」フォルダの下に作成された公開用のイメージ）をインターネットに公開してみます。

$ firebase deploy

=== Deploying to 'test-68cee'...

i deploying hosting

i hosting[test-68cee]: beginning deploy...

i hosting[test-68cee]: found 19 files in build

✔ hosting[test-68cee]: file upload complete

i hosting[test-68cee]: finalizing version...

✔ hosting[test-68cee]: version finalized

i hosting[test-68cee]: releasing new version...

✔ hosting[test-68cee]: release complete

✔ Deploy complete!

Project Console: h t t p s://console.firebase.google.com/project/test-68cee/overview

Hosting URL: h t t ps://test-68cee.web.app

を実行するだけです。このプロジェクトは「test-68cee」なので、Firebase が公開用の URL は実行結果の最後に表示されます。この URL にアクセスすると、先程と同じ画面にアクセスできます。 (＊)このプロジェクトは既に削除していますので、実際のアクセスはできません。

これで、React アプリのサンプルがインターネットに公開されました！簡単ですね！

あとは、このプロジェクトをベースに実際の React アプリを実装します。開発用のサーバーの利用方法やインターネットの公開方法はサンプルプロジェクトと全く同じです。同じようにプロジェクトフォルダでコマンドを実行すれば利用できます。

まとめ

Firebase のホスティング機能を利用して、React のサンプルアプリをインターネットに公開する方法を紹介してきました。

React アプリでも特別な事はなく、通常の Web サイトのホスティングとコンセプトは同じです。 ポイントは、

公開用のフォルダを「public」ではなく「build」に変更

公開用のイメージを「npm run build」で「build」の下に作成

公開は公開用のイメージを作成後「firebase deploy」を実行

です。公開前のテストは、React の開発用サーバーの利用「npm start」か、Firebase の開発用のサーバー利用の場合は公開用のイメージを作成した上で、「firebase serve」を実行すれば開発用の PC 上で動作を確認できます。アクセス先は、React の開発サーバーの場合は「localhost:3000」、Firebase の開発サーバーの場合は「localhost:5000」でアクセス可能です。

来週以降は、Firebase で React アプリを公開する際のさらに詳しい「コツ」を紹介していきます。お楽しみに！