GitHub PagesでReactアプリを公開する

はじめに

React アプリを GitHub Pages で公開しようとしたときに躓いたので、備忘録としてここに残しておきます。
実際に公開したリポジトリはこちら、React アプリの概要についてはこちらでまとめております。

環境

• Windows 11 Home(23H2)
• VSCode 1.85.2
• react 18.2.0
• npm 9.8.0
• gh-pages 6.1.1

全体の流れ

1. gh-pages をインストールする
2. package.json を修正する
3. リポジトリを作成する
4. デプロイを実行する
5. GitHub Pages の設定を変更する

gh-pages をインストールする

gh-pagesとは、 Github Pages へのデプロイを自動化するライブラリです。

npm install gh-pages --save-dev

package.json を修正する

homepage, predeploy, deploy を追記します。

package.json

{
  "name": "population-trend",
  ...
  "homepage": "https://{GitHubのアカウント名}.github.io/{リポジトリ名}",
  ...
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  ...
}

リポジトリを作成する

ここでは VSCode での方法をご紹介します。

①左側のメニューから ソース管理 を選択し、 GitHub に公開 を押下します。

②リポジトリ名を入力し、 Publish to GitHub public repository を選択します。

③GitHub を開き、リポジトリが作成されていればOKです。

デプロイを実行する

npm run deploy

上記を実行することでビルドが走り、プロジェクトルート配下に build フォルダが作成されます。
さらに build フォルダの中身が格納された gh-pages ブランチが作成されます。

GitHub Pages の設定を変更する

上部メニューの Settings →左側メニューの Pages と移動し、
Build and deployment の Branch にて gh-pages /(root) を選択して Save を押下します。

上記実行後にビルドとデプロイが走ります。
上部メニューの Actions からビルド状況を確認し、 deploy に記載のURLに遷移してサイトが表示されていれば成功です。