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などの動的なサイトからの移転でも問題なく対処できますね。
価格は記載がある場合を除き、すべて税込みです。
この記事の関連キーワード
サーバレスアーキテクチャの記事
-
サーバレスアーキテクチャ 複数サイト運営をする際の無料サーバー使いこなし術 2022.9.5 -
サーバレスアーキテクチャ Herokuの無料プランが終了へ。移行するならどこがいい? 2022.8.26 -
サーバレスアーキテクチャ Cloudflare Pages Functionsをローカルでテストする方法 2022.8.12 -
サーバレスアーキテクチャ Cloudfalre Pagesでリダイレクトを使う方法 2022.8.11 -
サーバレスアーキテクチャ Cloudflare WorkersとCloudflare Pages Functionの違いと使い分け 2022.8.10 -
サーバレスアーキテクチャ Cloudinaryの自分のデータを自動でバックアップさせる方法 2022.8.1 -
サーバレスアーキテクチャ いまさら聞けないレンタルサーバーとHerokuの違い 2022.5.10 -
サーバレスアーキテクチャ AWS S3より安くて作業コストも削減!Cloudflare Imagesの仕組みや料金まとめ 2021.10.25