[無料]React+TypeScriptなWebアプリを公開してみた。(gh-pagesの初め方)

Abstract

ココで、Githubの"Github Pages"に公開する手順を描いたけど、reactプロジェクトで実施してもうまくできなくって困った。
で、調べたらgh-pagesって、reactライブラリが簡単だったので、そのまとめ。

前提

Reactプロジェクトはgithubにコミットしててね。ココとか参考に。
今回は、フォルダ名(=プロジェクト名)、react-threejs-1ststepに。

手順

開発ソース側で。

gh-pagesをインストール

reactプロジェクトで。

$ npm install gh-pages

package.jsonを修正

package.json

{
- "name": "aaaa",
+ "name": "react-threejs-1ststep",
+ "homepage": "https://aaaa1597.github.io/react-threejs-1ststep",
～略～
  "scripts": {
+   "deploy": "npm run build && gh-pages -d build -m \"Updates --skip-ci\"",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
～略～

package.jsonを修正

reactプロジェクトで。

$ npm run deploy

で、出来た!!