これはなに

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

Manage traffic to your site by defining redirect or rewrite rules in a _redirects file or a netlify.toml file.

docs.netlify.com

Netlifyでリダイレクトを実装する

こんにちは、柴田です。分かりやすいUIでかつ柔軟な機能設定が可能な点から、Netlifyをホスティング先として選択されている方も多いと思います。Netlifyでリダイレクトを設定するには2通り方法があります。

blog.microcms.io

Netlifyを独自ドメインで使うときにやっておくべきリダイレクトの設定

先日このブログをNetlifyに移行しました。独自ドメインも設定して万事OKかと思っていたのですが、よくよく考えたら元々のURL（diwao

diwao.com