PWA対応サイト + Netlify で 301リダイレクトを設定する。

2020-08-13

こんにちは、0371です。

PWA対応の GatsbyJS + Netlifyで独自ドメインを使用した時のリダイレクトを設定する方法がわからなかったので、解法を備忘録として残しておきます。

必要なもの

PWA対応の GatsbyJS + Netlifyで独自ドメインを使用したサイト
英語を読むメンタル（翻訳すればいける）
やる気、元気、少しの時間

設定方法

プロジェクト直下にnetlify.tomlファイルを作成します。
これは、netlifyへビルドする時の設定ファイルになります。

netlify.tomlへ以下のように記述しましょう。（このブログを例に挙げています）

[[redirects]]
  from = "https://0371.netlify.app/"
  to = "https://0371.blog/"
  status = 301
  force = true

[[redirects]]
  from = "https://0371.netlify.app/*"
  to = "https://0371.blog/:splat"
  status = 301
  force = true

// [[redirects]]
//   from = "使っていないURL"
//   to = "使いたいURL"
//   status = 301 (リダイレクトのステータスコード)
//   force = true (永続的なリダイレクト)

これで、あとはデプロイするだけです。
自分でリダイレクトを確認したいときは、必ずブラウザのキャッシュを削除してください。 キャッシュが残っているとリダイレクトがうまくいきません。

どうなってるの？

独自ドメインを適応させても、一番最初にnetlifyへデプロイした時の初期ドメイン〇〇-〇〇.netlify.appは残ったままになります。
しかも、初期ドメインは削除できません（他のホスティングサービスもそうなのかな？）。

同じブログが、違うURLで二つ存在することになってしまうので、リダイレクトして一つに絞ろうということです。

リダイレクトをしないとGoogleのクローラーが、「このブログの内容と全く一緒のサイトがもう一個あるんだけど、無断転載の悪いサイトなんじゃね？」と思ってGoogleの検索順位を大幅に下げてしまいます。
間違っていたらすみません。orz

なので、リダイレクトの設定をする必要がありました。

参考

Redirects
"https://docs.netlify.com/configure-builds/file-based-configuration/#redirects"

感想

リダイレクトしないと、SEO的にGoogle先生に怒られてしまうので、みんなも忘れずに設定しよう！