[react-router-dom対応]ReactアプリをGitHub Pagesに公開する

事前準備

1. GitHub Pagesに公開するローカルリポジトリがあること
2. リモートブランチがあり､リモート設定されていること

react-router-domの対応

react-router-domを使っている方は､<BrowserRouter>にbasename={process.env.PUBLIC_URL}を追加してください｡
これがないと自分の環境では初期ページが真っ白のままで表示されませんでした｡

<BrowserRouter basename={process.env.PUBLIC_URL}>
</BrowserRouter>

公開手順

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

gh-pagesはGitHub Pagesへのデプロイを簡単にしてくれるpackageです｡

$ npm install gh-pages --save-dev

2. package.jsonの編集

1つ目にhomepageを追記します｡
<GitHubユーザー名>と<リポジトリ名>を自分の環境に合わせて変更してください(<>は不要です)

package.json

"homepage": "https://<GitHubユーザー名>.github.io/<リポジトリ名>", // 追加
"name": "react_todo_list",
"version": "0.1.0",

2つ目にscripts内にpredeployとdeployを追記します｡

package.json

"scripts": {
  "predeploy": "npm run build", // 追加
  "deploy": "gh-pages -d build", // 追加
  "start": "react-scripts start",
  // 省略
},

3. GitHub Pages用ブランチのpush

package.jsonに追加したコマンドで､GitHub Pages用ブランチをpushします｡

$ npm run deploy

ターミナルにPublishedと表示されれば成功です｡
リモートリポジトリにgh-pagesブランチがあるか確認してください｡

4. GitHub Pagesを公開する

リモートリポジトリのページからSetting > Pagesをクリックします｡

公開するブランチはgh-pagesのrootを選択してSaveをクリックしてください｡

5分も待てば同じページに公開先のURLが表示されます｡
Visit Siteをクリックしてページを確認してください｡

手順は以上となります｡
お疲れ様でした｡

参考