Gatsby + Netlify 製のサイトでリダイレクトする

2020/02/26

こんにちは。たまおさ(@tamaki_osamu)です。最近、このブログにリダイレクトを設定する機会があったので記事にしたいと思います。対象は Gatsby + Netlify で作成されたサイトになります。

リダイレクトとは

web ページにおけるリダイレクトとは、指定 URL を他の URL へ自動的に転送するため仕組みです。

Gatsby + Netlify でリダイレクトする

このブログは React 製の静的サイトジェネレータであるGatsbyJSで作成し、Netlifyにホスティングしています。

今回は、URL が"/2020-01/"以下のものを"/2020/"以下にリダイレクトすることを目標にします。

createRedirect を使う

Gatsby にはcreateRedirectという API が用意されています


これを使っていきます。gatsby-node.js で次のように追記します。

exports.createPages = ({ actions, graphql }) => {
  const { createRedirect } = actions;
  createRedirect({
    fromPath: "/2020-01/*",
    toPath: "/2020/:splat",
    isPermanent: true
  });
// Create pages here

fromPathでリダイレクト元の URL を指定します。ここでは"/2020-01/*"を指定したので、"/2020-01/"以下のページは全てリダイレクトされます。 次にtoPathでリダイレクト先の URL を指定します。このとき:splatを指定しているとリダイレクト元の URL 構造を保持します。

今回はの場合、"/2020-01/redirect/"は"/2020/redirect/"にリダイレクトされます。

isPermanentはリダイレクトを恒久的にするか一時的にするかを指定しています。つまるところ、301 リダイレクトか 302 リダイレクトかの設定です。今回は恒久的なリダイレクトを設定しています。

設定ができたら一度gatsby buildしてみます。public/_redirectsが出来上がっているはずです。

gatsby-plugin-netlify プラグインを入れる

上記に加えもう 1 つ設定が必要です。リダイレクトをホスティング先の Netlify で機能させるためにプラグインの導入が必要です。導入するのはgatsby-plugin-netlifyです。npmを利用するのであれば、

npm install gatsby-plugin-netlify

を実行し、gatsby-config.js に

plugins: [`gatsby-plugin-netlify`];

を追記します。以上で設定は完了です。

確認

https://www.tamaosa.com/2020-01/redirect/にアクセスしてみて下さい。リダイレクトされてることが分かると思います。

logo

たまおさ

釣りとか登山とか好きです。(@tamaki_osamu)

ー関連記事ー