サーバレスアーキテクチャ

NetlifyのRedirect、Reweiteルールの書き方・処理方法まとめ

静的サイトのデプロイ・ホスティングを無料で使えるNetlifyで、Redirect、Reweiteルールの書き方や処理方法をまとめました。

設定の方法

Netlifyのリダイレクトの仕方は2つあります。

  • 公開ディレクトリに「_redirects」ファイルを置く
  • netlify.tomlに書く

どちらの方法でも適用されます。

_redirects」に書く場合は、公開ディレクトリですがアクセスはできません。

PWAなどでpublicディレクトリをキャッシュする設定にしていると、キャッシュに含まれてしまいますが、問題になることはまずないでしょう。

書き方のルール

_redirectsの書き方は、

アクセス元パス リダイレクト先パス ステータス

が基本です。

例えば、example.comの_redirectsを、

/posts/	/blogs/ 301

と書いた場合は、

「example.com/posts/」に来たアクセスは、「example.com/blogs/」へ301リダイレクトされます。

netlify.tomlで設定する場合も考え方は同じで、

[[redirects]]
  from = "/posts"
  to = "/blogs/"
  status = 301
  force = true
  headers = {X-From = "Netlify"}

from、to、statusなどをtoml形式の連想配列で書きます。

リダイレクト・リライトのルール

Netlifyのリダイレクト・リライトは、設定したステータスコードによって動作が決まります。

デフォルトは「301 (Permanent redirect=移転)」

デフォルトの設定は、HTTPのステータス301(Permanent redirect=移転)です。

この場合は、転送元URLへアクセスすると、ブラウザが転送先URLへリダイレクトします。

ステータスを200にすると「Rewrite (書き換え)」

.htaccessのRewriteRuleと同じように、表示URLはそのままで中身だけ書き換えたい時は、ステータス200を使います。

例えば、

/posts/	/blogs/ 200

とした場合、ブラウザの表示URLはそのまま(example.com/posts/)で、表示する内容は転送先のもの(/blogs/)になり、まさに.htaccessの「RewriteRule」と同じ挙動になります。

ステータス404は「Not Foundページ用のファイルへのRedirect (転送)」

404は、HTTPのステータスコード404を付与してリダイレクトします。リダイレクト先は複数設定できるので、

/en/* /en/404.html 404
/de/* /de/404.html 404

といった風に、言語ごとやページごとに違う404ページを設定することも可能です。

動的にリダイレクトする場合

URLのパスを動的に変更する時

動的にリダイレクトする場合は、「Splat」を使います。

書き方は、

  • 転送元は「*」
  • 転送先は「:splat」

です。

/posts/*	/blogs/:splat 200

この場合は、「/posts/以下のURL」でアクセスが来た場合に、公開ディレクトリの「/blogs/以下のファイル」を表示させます。

URL元がGETクエリの場合

「/posts?id=hogehoge」のように、URLにGETクエリ形式がある場合は、

  • 転送元は「クエリ名=:クエリ名」
  • 転送先は「:クエリ名」

と書きます。

例えば、

/posts id=:id tag=:tag /posts/:tag/:id 301

と書いた場合は、

「/posts?id=1&tag=blog」というようなURLを、「/posts/blog/1」に301リダイレクトします。

Netlifyは動的ファイルを処理できないので、転送先にGETクエリは設定できません。


簡単にですが、NetlifyのRedirect、Reweiteルールの書き方・処理方法まとめました。

できることは限られてきますが、.htaccessに似た感じで使うことができるので、WordPressなどの動的なサイトからの移転でも問題なく対処できますね。


価格は記載がある場合を除き、すべて税抜きです。

この記事の関連キーワード

サーバレスアーキテクチャの記事