ReactアプリをGitHub Pages(Project Pages)で公開する

# はじめに
前々から気になっていたJSライブラリのReactを最近触り始めました．
そのReactで作成したアプリをGithub Pages（今回はProject Pages）で公開する手順をまとめました．
実際に[公式のチュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)通りに作成した三目並べゲームを公開したページが[こちら](https://eiskern.github.io/tic-tac-toe-tutorial-gh-pages/)，ソースは[GitHub](https://github.com/EisKern/tic-tac-toe-tutorial-gh-pages)で確認できます．
この記事ではReactについてはあまり触れず，公開する手順に焦点を当てます．

### 環境

```console:
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.14.6
BuildVersion:	18G87

$ node -v
v12.8.0

$ npm -v
6.10.2
```

# Reactアプリの作成
## プロジェクトの作成
今回は，npmの`create-react-app`を用いて作成します．
CDNを利用する方法もありますが，まだ理解し切れていないので今回はこちらで．

```console:~
$ npx create-react-app react-sample
$ cd react-sample
```

`react-sample`という名前でプロジェクトを生成しました．
今回できる限り不要なファイルを削除した後のディレクトリ構成は以下のようになっています．

```console:~/react-sample/
❯ tree
.
├── README.md
├── node_modules
│   ├── ...
├── package-lock.json
├── package.json
├── public
│   ├── index.html
└── src
    ├── index.css
    └── index.js
```

## アプリの作成
今回は以下のように極力最小限に抑えました．

```html:~/react-sample/public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Sample React App</title>
</head>
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>
</html>
```

```js:~/react-sample/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

ReactDOM.render(
    <h1>Hello React!</h1>,
    document.getElementById('root')
);
```

```css:~/react-sample/src/index.css
body {
    color: blue;
}
```

単純に青文字でHello React!と表示されるだけです．Reactである必要はありませんが．．．
`npm start`で実際にどのようなページとなっているのか確認できます．
`npm run build`でビルドができますが，ここではまだしません．

# Project Pagesで公開
公開する方法として，`gh-pages`というパッケージを用いるか，ビルド先のディレクトリ名を`docs`に変更するの2種類があります．

## パッケージ`gh-pages`を使用
はじめにパッケージをインストールします．

```console:~/react-sample/
$ npm install gh-pages --save-dev
```

`--save-dev`オプションを付けることで，ローカルにインストールすることができます．
次に`package.json`にスクリプトとホームページを追加します．

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

`predeploy`の追加は任意です．
最後に，リモートリポジトリを追加して，`npm run deploy`コマンドを打つだけで公開ができます．

```console:~/react-sample/
$ git remote add origin https://github.com/(user name)/(repository name).git

$ npm run deploy
```

デプロイすると，以下のように自動で公開するようになっていました．
以下の画像では，ドメインの設定をしているので，`https://eiskern.com/react-sample/`となっていますが，何もしていなければ，`https://(user name).github.io/(repository name)/`となっていると思います．

<img width="763" alt="setting-gh-pages.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168653/d40494f6-18b2-89d2-7a2a-1a197ce1515f.png">

以上で，`gh-pages`パッケージを用いたReactアプリを公開することができました．

## ディレクトリ名を変更
GitHub PagesのProject Pagesでページを公開する方法はいくつかありますが，
今回は`master`ブランチの`docs`ディレクトリ内を公開する方法を使用します．（ちなみに，上記の`gh-pages`パッケージを用いる方法は，`gh-pages`ブランチの中身をそのまま公開する方法です．）

はじめに，`package.json`の中身を編集します．

```json:~/react-sample/package.json
{
  ...,
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && mv build docs",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  ...,
  "homepage":"https://(user name).github.io/(repository name)/"
}
```

スクリプトの`build`の中身の変更と`homepage`の設定をしました．
普通に`npm run build`を打つと，`build`ディレクトリにビルドされます．上のように追記することで，`build`ディレクトリを作成した後，そのディレクトリの名前を`docs`に変更しています．
（ここで，既に`docs`ディレクトリがある状態でコマンドを打つと，`docs`の中身に`build`が移動してしまうので，コマンドを打つ際は，`docs`ディレクトリを削除しましょう．）
次にGitHubに公開します．

```console:~/react-sample/
$ git remote add origin https://github.com/(user name)/(repository name).git

$ git add .
$ git commit
$ git push origin master
```

最後に，GitHub Pagesの設定をします．
`Settings` -> `GitHub Pages` -> `Source`を`master branch /docs folder`に変更します．

<img width="759" alt="setting-docs.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168653/3a99bd8a-79c3-bfe9-faf2-5709fc0c6d65.png">

先ほども述べた通り，特にドメインの設定をしていなければ，`https://(user name).github.io/(repository name)/`となっていると思います．
以上で，ビルド先を変更することでReactアプリを公開することができました．

# まとめ
Reactアプリを公開する手順を2種類紹介しました．無駄なパッケージはインストールしたくないということで，最初は後者のディレクトリ名の変更をしていましたが，実際前者のパッケージを用いた方がだいぶ楽でした．
ReactアプリをGitHub Pagesで公開する予定はありませんが，今後のために選択肢を増やしておくことは大事ですね．それに今は無料で様々なものを公開できることは本当にありがたいことです．
また，何かあれば，記事にしていきたいと思います．また，何か気になることがあれば，コメントお願いします！

# 参考サイト
[How to deploy a create react app to Github pages | Reactgo](https://reactgo.com/deploy-react-app-github-pages/)
[create-react-appでbuild先のパスを変更する - Qiita](https://qiita.com/yakimeron/items/7a4f8d9e70a4a2b1b96b)