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

1. Reactアプリ初期セットアップ

Node.jsのインストール

Node.jsとはサーバサイド側で動くJavaScript。
https://nodejs.org/ja

npmのインストール

npmとはNode Package Managerの略で、Node.jsのパッケージを管理するシステム、所謂パッケージ管理システム。

terminal

npm install -g npm

Reactアプリ作成

Facrbook が提供している CLI ツールで用意されたテンプレートを元にアプリケーションの雛形を生成。

terminal

npx create-react-app my-app

起動確認を行う。

terminal

cd my-app
npm start

terminal

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.XXX.XXX:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

下記のブラウザ画面が表示されていればOK。

2. Reactアプリ作成

public、srcフォルダ内にファイルを作成し、コーディングを行う。
ここでは割愛します。

3. ReactをGithub Pagesにデプロイ

推奨しているgh-pagesを使用したデプロイ方法の紹介です。

1. gh-pagesパッケージをインストール

terminal

npm install gh-pages --save-dev

2. package.jsonの編集

• package.jsonファイルにhomepageプロパティを追加し、デプロイ先のURLを設定する
• scriptsオブジェクトにpredeployおよびdeployスクリプトを追加する

package.json

"homepage": "https://<your-github-username>.github.io/my-app/"

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

3. npm run deployを実行する

terminal

npm run deploy

4. デプロイURLにアクセスし、確認する

GitHubリポジトリの[settings]に移動して、[GitHub Pages]セクションでデプロイされたアプリを確認。[Source]が[gh-pages]ブランチに設定されていることを確認。

デプロイURLにアクセスして確認する。
(下記は実際に作成したtodoアプリ)