Edited at

SSR無しでReactアプリをOGPとかに対応させる (Netlify編)

More than 1 year has passed since last update.

ということで前回の自力Prerendering編に続いてNetlify編です。今回はそもそもprerendering以外の方法を書こうと思っていたんですが、Netlifyがものすごく簡単にprerenderingできるようだったので試してみたくなってしまいました。


Netlifyとは

NetlifyはフロントエンドのソースコードをGitHub等のgitレポジトリにpushするだけでビルド・デプロイ・CDN付き配信してくれるサービスです。


手順

前回同様create-react-appで作ります。

yarn create react-app netlify-demo


必要なパッケージを追加

今回は自力でprerenderはしないので、react-router-domとreact-helmetのみ使います。

yarn add react-router-dom react-helmet


Routeを作る

前回とほぼ同じ内容かつソースはここに置いたので省略しますが、HomeとAboutの二つのルートを作ります。


_redirectsを作る

公式ドキュメントにある通りSPAだと上手くrouteが取れないので、下記のような_redirectというファイルを作ります。


_redirect

/*    /index.html   200


そしてpackage.jsonのbuildセクションでビルドの際にbuildディレクトリに含めるようにします。


package.json

    "build": "react-scripts build && cp _redirects build/",



Netlifyの設定


デプロイ設定

アカウント作ってGitHubのレポジトリを選んで以下のようにデプロイを指定してあげるだけなので詳細な手順は省略します。


prerendering設定

prerenderingのページに書かれている通りsettingsから有効化するだけでprerenderingされます。ものすごく簡単です...

ただし残念ながらフリープランでは使えないので、最低月9ドルのプランに入る必要があります。ちなみに上記のページにある通りNetlifyのprerendering以外にもPrerender.ioやその他のサービスを使ったprerenderingもできます。


デプロイ

設定が済んだらレポジトリにpushするだけで毎回自動でビルド・デプロイされて最新版が配信されます。

こんな感じでデプロイの履歴が残ります。また自動でnetlifyのドメイン下で配信されますが、独自ドメイン(SSL付き)でも配信できます。


確認

で、Slackで結果を確認するとこの通りrouteごとに別々の情報が取れます。


最後に

ということでNetlifyのprerenderingを使ってみました。

自力prerenderingも簡単でしたが、こっちはさらに簡単で既存コードには何も手を入れずにできてしまいました。

めちゃくちゃ簡単だったので今度新規プロジェクトで使ってみたいところです。

ただ現在のプロジェクトはおそらく現状のS3 + CloudFront配信で行くので、次こそはprerendering以外の方法を紹介したいと思います。。。多分。