やりたいこと
ブログ用に独自ドメインを取り直したため、Netlifyでカスタムドメインの設定を行った。 その際、今までのURLへアクセスがあった場合に新しいURLへリダイレクトをかける処理を実装した。
実装方法
Nelifyでリダイレクトを実装する方法として主に2パターンある。
- [パターン1] _redirectsファイルにリダイレクト設定を記述する
- [パターン2] netlify.tomlファイルにリダイレクト設定を記述する
今回はパターン1の方で実装した。
_refirectファイルは公開ディレクトリ(public)に配置する必要があるが、publicはbuild時に作成されるディレクトリであるため、gitignoreでgithubにはpushしないように指定してある。
なので、gatsby-plugin-netlifyというプラグインを使い、Netlifyでのbuild時に_redirectファイルが作成される形で実装する。
プラグインのインストール
まずは単純にプラグインのインストールを行う。
npm i gatsby-plugin-netlifyプラグインをインストールしたら、gatsby-config.jsへ追記する。
plugins: [`gatsby-plugin-netlify`]リダイレクト設定の記述
あとはリダイレクトの設定をgatsby-node.jsに記述する。
exports.createPages = async ({ graphql, actions}) => {
const { createRedirect } = actions
createRedirect({ fromPath: 'http://buildnote.yosh1ba.com/*', toPath: 'https://yoshiba.dev/:splat', isPermanent: true, force: true })
createRedirect({ fromPath: 'https://buildnote.yosh1ba.com/*', toPath: 'https://yoshiba.dev/:splat', isPermanent: true, force: true })
}fromPath リダイレクト元URL
toPath リダイレクト先URL
isPermanent: 恒久的な移転。SEOに関わってくるらしいが詳しく調べれていない。
force fromPathの部分一致でリダイレクトをかけるかどうか
上記の細かいパラメータについては、createRedirect に書かれている。
設定が終わったら、いつも通りgithubへpushすればNetlifyが勝手にリダイレクト設定を行ってくれる。