これはなに

Netlifyで公開したサイトを、Netlifyに設定した独自ドメインへ301リダイレクトさせる設定方法のメモ。

Google Search Consoleを、Netlifyのデフォルトのリンク（https://hogehoge.netlify.app）から独自ドメインへ移行させる際に必要だった。 具体的には、Google Search Consoleに「ホームページからの301リダイレクトができないよ！」と怒られたので、やり方を調べた。

やりかた

前提

Netlify Docs によると、Netlifyでリダイレクトの設定をするには下記どちらかの方法をとる必要がある。

• _redirectsファイルをサイトの公開ディレクトリ直下に置く
• netlify.tomlファイルに記入する

今回は前者の_redirectsファイルを利用する方法をとる。

Hugoの場合

Hugoでサイトを生成している場合は、staticディレクトリ内に_redirectsファイルを置く。 そうすることで、ビルド時に公開ディレクトリ直下へ_redirectsファイルが配置されるようになる。

_redirectsファイルにリダイレクト設定を書く

_redirectsファイルでは、リダイレクト指定を「リダイレクト元のURL リダイレクト先のURL HTTPステータスコード」という形で記述する。 詳細はNetlify Docs を参照のこと。 国ごとに変えるなど、結構詳細な設定ができる。

今回はドメインを移行するため、リダイレクト元のURLのすべてをリダイレクト先に移行させる。 この場合の書き方は下記のようになる。

http://hogehoge.netlify.app/*  https://new.domain.com/:splat  301!
https://hogehoge.netlify.app/*  https://new.domain.com/:splat  301!

ワイルドカードである*と:splatを用いることで、*の部分をそのまま:splatに引き継ぐ。 こうすることで、たとえば、http://hogehoge.netlify.app/post/test/index.htmlはhttps://new.domain.com/post/test/index.htmlへリダイレクトされる。

HTTPステータスコードは301で、恒久的な移行を示す。 !をつけると、アクセスされたURLのファイルの有無にかかわらず、常にリダイレクトするようになる¹。 この!がないと、想定通りのリダイレクトにならないので注意。

書いたリダイレクト設定をチェックする

Netlify’s playground でリダイレクト設定の書き方が正しいかチェックする。 _redirectsファイルの中身をそのまま貼り付け、右上の「Test rules」ボタンをクリックするだけ。 エラーが出なければ問題ない。

参考文献・URL

• Redirects and rewrites | Netlify Docs
• Netlifyでリダイレクトを実装する | microCMSブログ
• Netlifyを独自ドメインで使うときにやっておくべきリダイレクトの設定 - diwao日記