Netlify でリダイレクトをする方法

こんにちは森田です。
弊社のコーポレートサイトは Netlify を使っています。
今回はNetlify のリダイレクトについて紹介します。

Netlify でリダイレクトする方法

参考:Redirects and rewrites | Netlify Docs

リダイレクトする方法は2つありまして、

  1. _redirects」ファイルに指定する方法
  2. netlify.toml」ファイルに指定する

があります。
今回は .htaccess のように書けてわかりやすい _redirects ファイルを使用します。

_redirectsファイルの設置場所

_redirects ファイルは公開ディレクトリに設置します。

これはプロジェクトやフレームワークによって違いますが、 Next.js ですと public ディレクトリ、GatsbyJSなら static ディレクトリなどになるでしょう。

弊社サイトはNext.js なので public ディレクトリに設置します。

リダイレクトの書き方

リダイレクトされるパス、リダイレクトするパス、ステータスコードをスペースを空けてしています。
文頭に # でコメントも使えます。

※ 今回は永続的なリダイレクトをする 301リダイレクトを使用する前提で書いております。

#リダイレクトされるパス リダイレクトするパス ステータスコード
/service /services 301

複数ある場合は改行して続けて指定していきます。

/home / 301
/service /services 301
/blog/my-old-title /blog/my-new-title 301

ワイルドカード

アスタリスク(*)を使うことでディレクトリの以下の指定をまとめてリダイレクトできます。

/news/*  /blog/ 301

splat

ワイルドカードの値をリダイレクトした先に入れたい場合は :splat を使います。

* 以下のURLが :splat に差し込まれます。

/news/*  /blog/:splat

上記ですと例えば、 /news/2022/07/14/10367//blog/2022/07/14/10367/ にリダイレクトできます。

まとめ

シンプルにファイルを置くだけでリダイレクトができて便利でした。
ファイルがあるので git 管理することもできてそこも良いですね。

リダイレクトの他にもプロキシなども使えたので今度記事にできればと思います。

Gaji-Laboでは、Jamstackが得意なフロントエンドエンジニアを募集しています

弊社ではJamstackの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

タグ


投稿者 Morita Sou

フロントエンドグループチームマネージャー。
適切な技術提案やプロジェクトを円滑に進めるコミュニケーションを心掛けています。
CMS構築や開発環境の構築・最適化などを得意としています。チームビルティングと採用と開発環境を快適にすることにいつも燃えています。