[ 目次 ]

• はじめに
• NetlifyにGatsbyJSのプロジェクトをデプロイ
• 今回のリダイレクトについて
• netlify.tomlにリダイレクト設定を追加する方法
• gatsby-plugin-netlifyプラグインを利用する方法

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回はGatsbyJSで構築したサイトを、Netlifyにデプロイした際のリダイレクト設定についてまとめます。

GatsbyJS

NetlifyにGatsbyJSのプロジェクトをデプロイ

Netlifyへのデプロイ方法については、GatsbyJSのサイトをデプロイする。Netlifyにデプロイする に手順が載っています。こちらの記事を参考にしてください。

既に、Nuxt.jsやGridsome、Jekyllなどを利用してNetlifyにデプロイした経験がある方は、ビルド設定を変更するだけなので他の技術と同じようにデプロイ可能です。

今回のリダイレクトについて

Netlifyでは、"sitename".netlify.comというNetlifyのサブドメインを利用してアプリにアクセスすることが可能です。
このサブドメインから独自ドメインにリダイレクトしたいと思います。

今回は、gatsby-starter-portfolio-nnn.netlify.comにアクセスがあった場合、gatsby-starter-portfolio.nakamu.lifeへリダイレクトするような設定です。

netlify.tomlにリダイレクト設定を追加する方法

netlify.tomlとは、Netlifyのビルドやデプロイの設定を記述するファイルです。プロジェクトrootに配置されたnetlify.tomlの設定がデプロイ時に読み込まれます。

[[redirects]]
  from = "https://gatsby-starter-portfolio-nnn.netlify.com/*"
  to = "https://gatsby-starter-portfolio.nakamu.life/:splat"
  force = true

gatsby-plugin-netlifyプラグインを利用する方法

まずは、gatsby-plugin-netlifyプラグインをインストールしましょう

■ npmを利用する場合

$ npm install gatsby-plugin-netlify

■ yarnを利用する場合

$ yarn add gatsby-plugin-netlify

続いて、gatsby-config.jsに設定を追加します。

module.exports = {
  siteMetadata: {
    title: `Nakamu`,
    description: `GatsbyJSを利用したポートフォリオサイト`,
    author: `@nakanakamu0828`,
    siteUrl: `https://gatsby-starter-portfolio.nakamu.life`
  },
  plugins: [
    ・・・
    // 以下の１行を追加
    `gatsby-plugin-netlify`
  ],
}

最後に、gatsby-node.jsにcreateRedirectを利用して_redirectsファイルが生成されるように記述を追加します。

exports.createPages = ({ graphql, actions }) => {
  const { createRedirect } = actions

  createRedirect({
    fromPath: 'https://gatsby-starter-portfolio-nnn.netlify.com/*',
    toPath: 'https://gatsby-starter-portfolio.nakamu.life/:splat',
    isPermanent: true,
    force: true
  })
}

gatsby buildを実行し、public/_redirectsが正しく生成されていることを確認しましょう