Gatsby.jsでコンソールに「net::ERR_ABORTED 404」というエラーが出たときの対処法

2725 ワード
gatsby gatsby テキストリンク

背景

  • docsディレクトリをGitHubPagesで公開。
    • エラーが出て正しく動かなかった（カウンターの数字が増えなかった）。
  • 開発環境と本番環境でサイトパスが違うのが原因と思われる。
    • 開発環境：http://localhost:8000/hello
    • 本番環境：https://maiamea.github.io/portfolio/hello/
  • サイトURLがhttps://maiamea.github.io/portfolio/hello/でも正しく動くようにしたい。

開発環境でのサイトの起点：http://localhost:8000/
本番環境でのサイトの起点：https://maiamea.github.io/portfolio/

GitHubではパスにリポジトリ名が入ってくるのでルートがずれてしまう。

開発環境：プロトコル://サーバー/
本番環境：プロトコル://サーバー/リポジトリ/

対処法

gatsby-config.jsに追記

gatsby-config.js
module.exports = {
  pathPrefix: `/portfolio`,
}

package.jsonに追記

ビルド時にgatsby build --prefix-pathsで実行するように設定。

package.json
{
  "scripts": {
    "build": "gatsby build --prefix-paths"
  },
}

開発環境でのサーバー起動は今まで通りnpm run developを実行すればOK。

結果

無事ボタンをクリックしたらカウンターの数字が増えた。

参考サイト