Netlifyで作った2つのサイトを1つのドメインで運用するために、リバースプロキシを設定しました。

背景

仕事の方で以下のような構成を作る必要ができました。

• example.com/ -> NetlifyでホストしているReact SPA 1
• example.com/sub-service -> React SPA 2

既存のReact SPA内に実装しても問題はないのですが、サービスの性質上別のSPAとして実装することになりました。

Netlifyの2サイトを1ドメインで管理する

git submoduleで1サイト内で2 SPAをビルドする方法も考えたのですが、時間がかかりすぎる懸念がありました。

そこでNetlifyのサイトを2つ作成し、リバースプロキシ的にリダイレクトをかけることで1ドメインに納める方法を検討することになりました。

Netlifyでのリバースプロキシ

Netlifyでは_redirectsファイルでリダイレクトを設定できます。このファイルを使うことで、リバースプロキシ的なリダイレクトができます。

_redirects

sub-service*  https://second-react-app.netlify.com/:splat  200

Gatsbyで_redirectsファイルを作成する

Gatsbyを利用している場合、以下のような手順で_redirectsファイルを生成できます。

$ yarn add -D gatsby-plugin-netlify
$ vim gatsby-config.js
  ...
  plugins: [
    "gatsby-plugin-typescript",
    {
      resolve: `gatsby-plugin-netlify`
    },
  ...

$ vim gatsby-node.js
exports.createPages = ({ graphql, actions }) => {
  const { createRedirect } = actions
  createRedirect({
    fromPath: 'sub-service*',
    toPath: 'https://second-react-app.netlify.com/:splat',
    statusCode: 200
  })
}

あとは_redirectsファイルを含めた形でNetlify上にデプロイできればOKです。

wgetで動きを確認する

念の為wgetで動作を確認します。

$  wget -S --spider https://first-react-app.netlify.com/sub-service | pbcopy

Spider mode enabled. Check if remote file exists.
--2020-01-07 19:33:30--  https://first-react-app.netlify.com/sub-service
Resolving first-react-app.netlify.com... 178.128.17.49, 2400:6180:0:d1::575:a001
Connecting to practice-gatsby.netlify.com|178.128.17.49|:443... connected.
HTTP request sent, awaiting response... 
  HTTP/1.1 200 OK
  Cache-Control: public, max-age=0, must-revalidate
  Content-Length: 0
  Content-Type: text/html; charset=UTF-8
  Date: Tue, 07 Jan 2020 10:33:21 GMT
  Referrer-Policy: same-origin
  Strict-Transport-Security: max-age=31536000
  X-Content-Type-Options: nosniff
  X-Frame-Options: DENY
  X-Xss-Protection: 1; mode=block
  Age: 0
  Connection: keep-alive
  Server: Netlify
Length: 0 [text/html]
Remote file exists and could contain further links,
but recursion is disabled -- not retrieving.

メインのアプリの方のドメインでアクセスできていることがわかります。

おわりに

正直なところ、これがよい運用方法かどうかは自信がありません。リバースプロキシした先のアプリでcookieやheaderなどを使いたいとなると、その値についても渡してやる必要があるかと思いますし、その設定コストに見合うメリットがあるのかなども検討する必要がありそうではあります。

が、とりあえずReact SPA -> React SPAでは問題なさそうに見えますので、ここまでを忘備録として残します。