モードの変更

カスタムドメインを紐付けたNetlifyサイトとは別のNetlifyサイトを、そのカスタムドメイン配下のディレクトリにApacheのRewriteRuleのようにリダイレクトする

Netlify

※2020/4/15 記事を修正: 公開時には 301 リダイレクトを使った説明になっており、Apache の RewriteRule のような参照先の変更を Netlify で設定する解説に誤りがありましたので記事をかなり修正しました。詳細な差分は本文の下にあるGitHubリンクからdiffを参照してください。間違った情報を発信してしまい大変失礼いたしました。

タイトルがややこしい。

リポジトリAを Netlify にサイト登録し、dskd.jp というカスタムドメインを設定している。これを参照元のサイトAとする。

リポジトリBを Netlify にサイト登録し、Netlify のサブドメインを編集して demo-dskd.netlify.com としておく。これを参照先のサイトBとする。サイトBではカスタムドメインは設定しない。

この状態で、サイトA(dskd.jp/demo/)にアクセスしたら、サイトB(demo-dskd.netlify.com/)側のファイルが参照されるようにしつつ、URL はサイトA(dskd.jp/demo/)のままで見られるようにしたい、という話。

つまり、Apache の.htaccess で設定する RewriteRule のようなことをしたい。やりたい人は「Netlify 別サイト 同じドメイン ディレクトリ RewriteRule リダイレクト」とかでググると思うので、それが全部入りな感じの説明文を作っていたらこの表題になった。

結論から言うと簡単。やり方は2つ。

_redirect ファイルを使う

次のコードのように書く。

/demo/*    https://demo-dskd.netlify.com/:splat    200!

最初に書いている /demo/*サイトAにおけるファイルパスだ。サイトAはカスタムドメインを紐づけているので dskd.jp/demo/* にアクセスしたら〜と言う意味になる。これがブラウザでアクセスしている URL と考えて良い。

インデントを挟んだ次に書いているのはリダイレクト先のアドレスだ。ここはサイトBのアドレスとなる。

:splat と言う文字列がくっついているが、これは /demo/* のアスタリスク以下のファイルパス構造を維持してそのまま動的に参照させる意味を持つ。:splat がないと index.html が表示されるが、内部で参照している画像や CSS や JS などのアセットファイルが読み込まれない。

さらにインデントを挟んで、最後に HTTP ステータス 200 を書いて終了だ。末尾の ! は強制リダイレクトの意味を持つ。! がない場合は、サイトA側にファイルがあればそれを表示するだろう。(動作未確認)

複数のリダイレクトを設定したい場合は改行して続けて書けば良い。

/demo/*    https://demo-dskd.netlify.com/:splat    200!
/sandbox/*    https://sandbox-dskd.netlify.com/:splat    200!

netlify.toml ファイルを使う

先ほどの _redirect ファイルの記述を toml でやると次のようになる。

[[redirects]]
  from = "/demo/*"
  to = "https://demo-dskd.netlify.com/:splat"
  status = 200
  force = true

項目の説明は _redirect と同じなので省略しているがあしからず。

from フィールドに書いているのはサイトAにおけるファイルパス

to フィールドに書いているのはリダイレクト先のサイトBのアドレス:splat も忘れずに。

status フィールドには 200 を。

force フィールドを true にすると強制リダイレクトされる。

連続して書く場合は [[redirects]] ヘッダーごと複製する。

[[redirects]]
  from = "/demo/*"
  to = "https://demo-dskd.netlify.com/:splat"
  status = 200
  force = true

[[redirects]]
  from = "/sandbox/*"
  to = "https://sandbox-dskd.netlify.com/:splat"
  status = 200
  force = true

_redirect と netlify.toml のどちらがいいのかはよくわからないが、netlify.toml のほうが読みやすいと思う。

これで dskd.jp/demo/ にアクセスしたら、 demo-dskd.netlify.com 側のファイルが参照されるようにしつつ、URL は dskd.jp/demo/ のままで見られるようになる。すごい。

1つ注意点がある。サイトAとサイトBのファイルパスが違うと、リンクやリソースの参照先の整合性がなくなって動作が破綻する場合がある。サイトB内の参照を相対パスにするか、サイトAとファイルパスを同じにしてビルドしよう。

最初にググった時に Netlify サイト同士の特有な設定があるかもしれないと期待してしまい、決着に時間がかかった。Netlify は1つのサイトに複数のリポジトリを紐づけるような設定はできないので、ただリダイレクト処理を書けばいいだけだった。

参照先のサイトBはもちろん Netlify のサイトでなくても良い。なんなら自分の管理物でなくてもやれてしまうのだが、さすがにそれは行儀が悪いのでやらないほうが良い。

それにしても本当に Netlify 便利ですな。これが無料でいいんだろうか……。

参考: