Reactで開発したWebサイトをgithub pagesを使用してデプロイする

Reactで開発したサイトをGithubにデプロイする手順です。
npmのgh-pagesを利用しています。

gh-pagesのインストール

npm install gh-pages --save-dev

package.jsonの編集

homepageフィールドを追加し、
scriptsフィールドにdeployを追加します。

{
    "name": "react",
    "version": "0.1.0",
~省略〜
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "deploy": "npm run build && gh-pages -d build" ← ★追加★
    },
~省略~
    },
    "homepage": "http://[Your GitHub Username].github.io/[Your Repository Name]"  ← ★追加★
}

コマンド実行

npm run deploy

GitHub設定

GitHubにアクセスし、以下を設定します。
GitHub > Settings > PagesでBranchを「gh-pages」


設定が完了したら、上記のpackage.jsonに設定したhomepageのアドレスにアクセスすると作成したサイトがインターネット上で見れるようになります。

参考資料

GitHub Pages サイトを作成する
gh-pages