ReactアプリをGitHub Pagesにデプロイする方法

Reactでリプレイス中のポモドーロタイマーをGitHub Pagesにデプロイしました。

GitHubリポジトリの設定を変更するだけでできるだろうと思っていましたが、
少しだけ手間がかかったので、その方法を紹介していきます。

※Reactアプリが既に完成した前提で説明を進めていきます。

1.gh-pagesのインストール

//--save-devオプションでローカルにインストールできます。
$ npm install gh-pages --save-dev

2.package.jsonに設定を追加

package.jsonに以下のように、スクリプトとホームページを追加します。

{
  ...,
  "scripts": {
    ...,
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  ...,
  "homepage": "https://(user name).github.io/(repository name)/"
}

3.リモートリポジトリの追加とデプロイ

リモートリポジトリを追加し、npm run deployコマンドを打ちデプロイします。

$ git remote add origin https://github.com/(user name)/(repository name).git

$ npm run deploy

4.GitHubリモートリポジトリの設定を変更

最後に、Reactアプリのリモートリポジトリの設定を変更します。

Settings > GitHub Pages > Source で、「Branch: gh-pages」、「/(root)」を選択し「Save」をクリック。

これで設定は終了です。無事に公開できました！

簡単にReactアプリをGitHub Pagesにデプロイできました。

今回は以上です！

↓↓私の師匠、もりけんさんの武骨日記。問題集、要チェック

kenjimorita.jp