ReactアプリをGitHub Pagesに公開する手順

はじめに

手順としては全く複雑ではないものの、勘違いからデプロイ完了までに時間がかかってしまったので、今回は備忘録として記事を書くことにしました。

手順

gh-pagesをインストール

以下のコマンドを入力してライブラリをインストールしましょう

npm install gh-pages --save-dev

package.jsonを修正

package.jsonの以下のように修正してください

package.json

略
  },
  "homepage": "https://<GitHubのユーザー名>.github.io/<リポジトリ名>/",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
略

今回はhomepageとpredeployとdeployを追記しました。
ここで注意点として、homepageに記載するURLは後述するGitHub Pagesが発行するURLとは違う場合があります(大文字と小文字の違いに注意)。私の場合はユーザー名には大文字の箇所があったのですが、発行されたURLはすべて小文字になっており、その違いに気づかず一時間以上使ってしまいました。

今回間違えていた点)
"homepage": "https://Test-User.github.io/test/",

Github Pagesが発行するURL: "https://test-user.github.io/test/",

デプロイ

次のコマンドを入力してデプロイしましょう

npm run deploy

GitHubでセッティング

GitHubにプッシュ後、リポジトリのSettingsでPagesにアクセスします。gh-pagesを使用したことでgh-pagesブランチが作成されていると思うので、今回はそれを用いてSaveを行なってください(隣の設定は/rootのまま)。しばらくするとURLが発行されると思うので、そこにアクセスして確認しましょう。

以上が手順になります。