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

公式ドキュメントをもとに行った手順をメモとして残しておく。

手順1: package.jsonにhomepageを追加

場所はどこでもいいが迷ったら一番下でいい。

{
    "homepage": "https://{GitHubのユーザー名}.github.io/{GitHubのリポジトリ名}"
}

手順2: gh-pagesのインストール

2-1: インストール

npmの場合

npm install --save gh-pages

yarnの場合

yarn add gh-pages

2-2: package.jsonへの追記

scriptsの中にpredeploy、deployをscriptsへ追記する。
なお、predeployはdeployが実行される前に自動で実行される。
※コピペする場合は+は削除

{
    "scripts": {
+       "predeploy": "npm run build",
+       "deploy": "gh-pages -d build",
        "start": "react-scripts start",
        "build": "react-scripts build",
}

手順3: npm run deployを実行

npm run deploy

この時に何が起こるか説明しておく。
まず、/buildディレクトリが作成され、この中にデプロイ用のファイル（Reactアプリがコンパイルした結果）が作成される。
これがGitHub Pagesへの公開のためのデータとなる。
そして、gh-pagesというブランチが作成され、/buildディレクトリの中身がcommit・pushされる。
コマンド実行後にリポジトリを開いてみるとブランチが作成されていることがわかる。

結果を確認する

手順1で設定したhomepageのURLへアクセスすると、デプロイが上手くいっている場合はページが表示されるはず。

公式ドキュメントにはStep4としてPagesの設定について記載されているが既に設定されており、
デプロイもされている。

設定を確認したい場合、SettingsのPagesタブから確認できる。
また、デプロイの状況はActionsから確認可能。もし問題がある場合はここで表示されている。

公式ドキュメント

公式ドキュメントにはGitHub userpageを利用する場合やカスタムドメインを設定する方法などが記載されている。
必要な場合はご参照ください。