カラーモード

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

Netlify

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

タイトルがややこしい。

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

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

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

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

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

_redirect ファイルを使う

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

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

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

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

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

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

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

/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 フィールドに書いているのはサイトＡにおけるファイルパス。

to フィールドに書いているのはリダイレクト先のサイトＢのアドレス。: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/ のままで見られるようになる。すごい。

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

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

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

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

参考: