Next.jsとFirebase Cloud Functionsで体験する
それでは、サーバーサイドレンダリングの実例を体験してみましょう。これまではcreate-react-appでサンプルを動かしてきましたが、前述の通り、サーバーサイドでも動かそうとした場合に相当の手間がかかるため、今回は別のツールを利用することにします。
今回利用するのは、サーバーサイドレンダリングとの併用を前提に作られた、React向けWebフレームワークの「Next.js」です。これを、前回利用したFirebaseの機能の1つ、Node.jsサーバー「Firebase Cloud Functions」と組み合わせることで、サーバーサイドレンダリングを実現してみます。
Next.jsとは
Next.jsはZeit社が開発している、React向けのWebアプリケーション開発フレームワークです。
create-react-appと同じように、ローカル環境に開発サーバーを立てる機能や、JavaScriptコードをBabelで変換する機能を備えています。また、第5回で解説したReact Routerとはアプローチが異なるものの、History APIや画面遷移を管理する機能も備えています。
また、サーバーサイドレンダリングを行うための、Node.jsで動くサーバーサイドアプリケーションも組み込まれており、Next.jsで作成されたシングルページアプリケーションを、サーバー側でも扱いやすくなっています。Next.jsを使うことで、環境づくりの面での難しさは、かなり軽減されると言っていいでしょう。
プロジェクト構築のためのツールとして、create-next-appというコマンドラインツールも用意されているので、今回はこれを使って環境構築を行うことにします
Firebase Cloud Functionsとは
サーバーサイドレンダリングともNext.jsとも関係ありませんが、今回のサンプルで使用するので、簡単に紹介します。Firebase Cloud FunctionsはFirebaseと統合されたNode.js環境です。Firebase上の多くのサービスと連携した、サーバーサイドアプリケーションを記述することができます。
リスト5のようなコードを書いた場合は、リクエストに対して処理を行うAPIサーバーのように動作します。
const functions = require('firebase-functions')
// appという名前の関数を定義する
exports.app = functions.https.onRequest((req, res) => {
res.send("Hello from Firebase!");
});
この場合は「app」という名前の関数を定義したので、 https://us-central1-MY_PROJECT.cloudfunctions.net/app のように「/app」のパスを持つURLにリクエストすることで、Cloud Functionsの関数を呼び出すことができます。設定次第では、Firebase HostingのURLへのアクセスをCloud Functionsに処理させることも可能です（後述します）。
create-next-appでアプリケーションを初期化する
それでは、Next.jsとCloud Functionsを使って、サーバーサイドレンダリングを体験してみましょう。まずは前回と同様に、Firebaseプロジェクトを作成します。初期設定の内容は次の表の通りです。細かい手順は前回と同様なので省略します。
| 項目 | 値 |
|---|---|
| プロジェクト名 | my-first-react-ssr |
| プロジェクトID | ＜自動生成に任せる＞ |
| アナリティクスの地域 | 日本 |
| Cloud Firestoreのロケーション | ＜変更しない＞ |
| Googleアナリティクスのデータ | チェックを付ける |
| データ保護条項に同意 | チェックを付ける |
これでひとまずFirebase側の設定は完了です。
次に、開発プロジェクトを作成します。プロジェクトを作成したいディレクトリ内で、次のコマンドを実行してください。
$ npx create-next-app firebase-ssr --example with-firebase-hosting
「firebase-ssr」がプロジェクト名、「--example with-firebase-hosting」が、Firehase Hosting（とCloud Functions）向けのテンプレートを適用するためのオプションです。
筆者の環境では、このままではデプロイまでたどり着けませんでした。Babelでビルドを行うために必要な@babel/coreと、多様なブラウザで動くように文法の調整をする@babel/preset-envが足りていないので、次のコマンドでdevDependenciesを追加します。
$ npm install @babel/core @babel/preset-env --save-dev
最後に、プロジェクトIDを設定します。すでにテンプレートに.firebasercやfirebase.jsonが含まれているため、今回はfirebase initコマンドを使わずに、手動で設定します。プロジェクトIDは、FirebaseのコンソールのURLに含まれています。
筆者の例では「my-first-react-ssr」になっていますが、皆さんのお手元では違うIDになっているはずなので注意してください。自分のプロジェクトIDが分かったら、firebase-ssrプロジェクトの直下にある.firebasercを、リスト6のように書き換えます。
{
"projects": {
- "default": "<project-name-here>"
+ "default": "my-first-react-ssr"
}
}
ここでも、プロジェクトIDは「my-first-react-ssr」ではなく、自分のプロジェクトIDを入力しなければならないことに気を付けてください。
これで、環境面の初期設定は完了しました。
まとめ
サーバーサイドレンダリングの概要と、Next.jsを用いた環境構築について解説しました。
次回はこのプロジェクトについての解説と、実際のデプロイの手順を解説します。また、Next.js自体について、あまり解説できなかったので、Next.jsについてももう少し見ていきましょう。
