Firebase Hostingでアプリを本番環境にデプロイする

基礎からはじめるReact入門 第13回

　Webアプリケーションは、インターネット上に配置（デプロイ）して世の中に見える状態にしてこそ、意味のあるものです。今回は、create-react-appで生み出したプロジェクトを本番環境向けにビルドし、サーバーにデプロイすることを目的とします。近年ではWebアプリケーションをホスティングしてくれる便利なサービスがいくつかありますが、今回はFirebase Hostingの使い方を紹介します。

対象読者

• JavaScriptとWeb開発の基礎に理解がある方
• Reactに興味／関心があり、これから学び始める方

前提環境

　筆者の検証環境は以下の通りです。

• macOS High Sierra 10.13.3
• Node.js v10.4.1／npm 6.1.0
• React 16.4.2
• firebase-tools 4.1.2

Webアプリケーションはなぜ動くのか

　本連載では、これまで npm start によって起動される開発サーバー（ほとんどの場合 http://localhost:3000 です）をブラウザのアドレスバーに打ち込むことで、アプリケーションの動作確認を実施してきました。しかし、筆者が、そして読者の皆さんがWebアプリケーションを作る目的は、多くの場合、手元で動かすためではなく、インターネット上に公開するためではないでしょうか。今回は、実際のWebサーバーにアプリケーションを公開する手順を学んでいきます。

　まずは、シングルページアプリケーションにおける、ブラウザとWebサーバーの関係についておさらいしておきましょう。WebサーバーはHTMLやJavaScript、CSSや画像といったコンテンツのファイル群を保管しており、それぞれにURLが割り振られています。ブラウザはWebサーバーからそれらのファイルをダウンロードしてきて、解釈したり表示したりする役割を担っています（図1）。

図1：Webサーバーとブラウザの関係

　ここまでは、通常のWebページの表示と何ら変わりませんが、Reactを用いたシングルページアプリケーションの場合は、次の順序で実行されます。

1. HTMLをダウンロードして評価し、DOMツリーを構築する
2. JavaScriptファイルをダウンロードして評価し、ReactDOM.render()が実行されて、ReactによるDOMツリーの管理が始まる
3. CSSや画像は必要に応じてダウンロードされる

　1の時点では <div id="root"></div> のような、何も表示されない空のDOMツリーが構築され、2の段階になってようやく動的にReactコンポーネントの描画が始まります。1、2、3に共通して言えることとして、あくまでもWebサーバーはコンテンツとなる静的なファイルを配信するためのものであり、解釈したり実行したり表示したりする役割は、すべてブラウザ側にあるということです。

　これを踏まえて、これまで慣れ親しんできた、開発サーバーによるコンテンツ配信の仕組みと、本記事で解説するWebサーバーによるコンテンツ配信の仕組みについて見ていきましょう。

開発サーバーを利用中の動き

　これまでの連載の中で実施してきた動作確認の中で、何気なく npm start で開発サーバーを立ち上げていましたが、内部では2つの異なった役割のサーバーが動いていました。ソースコードの監視とビルドを担当するビルドサーバーと、ビルド済みのコンテンツの配信を担当する配信・通知サーバーです（図2）。

図2：開発サーバーを使ったWebアプリケーションの実行のイメージ

　create-react-appの環境で記述されたJavaScriptは、Babelによって一度コンパイルする必要があります。これを継続的に行うための仕組みがビルドサーバーです。開発サーバーの実行中、ビルドサーバーはプロジェクトのフォルダ内を監視しています。フォルダ内に変更があると、再ビルドを行い、配信・通知サーバーに新しいコンテンツファイルを渡します。これによって、常に配信・通知サーバーには最新のコンテンツが配置されるようになっています。

　一方、配信・通知サーバーは通常のWebサーバーと同様の役割を担っており、ブラウザからのURLによる要求に応じてコンテンツを返却しています。一点だけ、通常のWebサーバーと違う点として、ビルドサーバーによるコンテンツの更新があったときに、WebSocketを通じてブラウザに通知を行い、ブラウザ側からの更新を促しています。

　これらの仕組みにより、私たちは手元でソースコードを更新するたびにブラウザが最新の状態に書き換わるという、すてきな開発環境を享受できているわけです。

本番環境のWebサーバーで動かすための作業

　さて、開発環境では結局、どこのフォルダにビルド済みのコンテンツが生成されているのかも知らないままに開発を進めてきたわけですが、本番環境へアップロード（デプロイ）するにあたっては、そうも言っていられません。リリースするためのファイル群を準備して、Webサーバーに配置する必要があります。

　とはいえ、create-react-appを使っている場合は、さほど難しいことではありません。リリース用のコンテンツを用意するためのnpm scriptsとして npm run build というコマンドが用意されています。リリース作業は、手元のパソコンで npm run build を実行して生み出したコンテンツを、Webサーバーにデプロイするのが基本的な流れになります（図3）。

図3：本番環境にWebアプリケーションをデプロイして動かすイメージ

　図3の配信サーバーは図1で解説したものと同様なものをイメージしてください。ブラウザからHTMLやJavaScriptといった静的コンテンツを要求されると、URLに応じて返却するものです。このWebサーバーはインターネット上からアクセス可能なので、この状態まで持っていければ本番環境が全世界へと公開されたことになります。

手軽にコンテンツをデプロイできるサービス

　さて、Webサーバーにコンテンツをデプロイして公開する場合、一昔前ならばVPSやレンタルサーバーといった形でサーバーを借りて、FTPでファイルを送信するなどの作業が必要でした。しかし、これらのサーバーはかなり汎用的なため、望んだ動作をさせるためには少し手間がかかりました。

　私たちがやりたいことは「アップロードした静的コンテンツにURLを割り振って、ブラウザからダウンロードできるようにする」という、基本的にはシンプルなことだったはずです。喜ばしいことに、シングルページアプリケーションが流行した現代では、静的コンテンツの公開を手軽に行うためのツールがいくつか登場しています。代表的なものとして、以下があります。

• Firebase Hosting
• now
• Netlify

　どれも、create-react-appから生成された静的コンテンツを煩雑ではない手順でデプロイでき、また、1つや2つのWebアプリケーションを公開する程度ならば無料で利用できます。

　どれも魅力的なサービスですが、本記事では、Firebase Hostingを利用する方法を解説します。コマンドラインツールが丁寧なことや、管理画面の日本語対応が進んでいることなどが理由です。