ReactアプリをGithubPagesにホストする

## 開発環境

- Windows10 Home
- Node.js(v10.14.1)

Node.js等必要なツール、Githubのアカウントはそろっている前提。
GithubPagesの使い方も説明しません。

コマンド実行はPowerShellで行っています。




## 手順

### GithubにRepository作成
今回は`react-demo-app`という名前で作成します。
`.gitignore`や`README.md`などは不要で、完全に空のRepositoryでよいです。
![Create-a-new-repository.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299625/0a668683-6e89-6f4d-51e0-850c9fe4c7dd.png)


### ローカルにアプリケーションの作成

適当なフォルダ(僕は`F:\development`)で下記のコマンドを実行してアプリを作成します。
create-react-appの引数にはアプリ名(この`react-my-app`)を指定しますが、Githubで作成したRepository名とは一致する必要はありません。

``` :PowerShell
cd F:\development
npx create-react-app react-my-app
```

ちゃんとアプリが作成されているか確認しましょう。
下記のコマンドでWebサービスが`localhost:3000`で起動し、自動でブラウザが起動します。

```:PowerShell
cd F:\development\react-my-app
npm start
```
![run-app-in-local.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299625/dbf8fbff-264a-b6cb-234d-035f89c725ea.png)

確認出来たらサービスは停止してよいです。

Git管理をするために`F:\development\react-my-app`で右クリックして`Git Bash Here`を選択します。
起動したコンソールで下記コマンドを実行します。

```:GitBash
git init
git add .
git commit -m "first commit"
git remote add origin git@github.com:stin-dev/react-demo-app.git
git push origin master
```

### GithubPagesホスティングのためにjsonファイルを編集

`package.json`をエディタで開き、`"homepage"`プロパティを`"name"`プロパティと同じ階層追加します。
値はGithubPagesのURLになりますので、各々のGihubPagesのURLに読み替えてください。

```json:react-my-app/package.json
{
  ...
  "homepage": "https://stin-dev.github.io/react-demo-app",
  ...
}
```

今回はProjectPageにホストしますが、UserPageにホストする場合やカスタムドメインを取得している場合は追加で作業が必要になります。詳しくは[こちら](https://facebook.github.io/create-react-app/docs/deployment#github-pages-https-pagesgithubcom)で。

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

GithubPagesへホストするためのパッケージを導入します。

```:PowerShell
cd F:\development\react-my-app
npm install --save gh-pages
```

再び`package.json`を編集します。`"scripts"`オブジェクトに`"predeploy"`と`"deploy"`を追加します。

```json:react-my-app/package.json
{
  ...
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    ...
}
```

### Deployしよう

下記コマンドを実行するだけでGithubのRepositoryに`gh-pages`のブランチを作成してプッシュしてくれます。

```:PowerShell
npm run deploy
```

完了するまで待ちま。。。


### エラーを吐いた

```:PowerShell
> gh-pages -d build

events.js:167
      throw er; // Unhandled 'error' event
      ^

Error: spawn git ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:232:19)
    at onErrorNT (internal/child_process.js:407:16)
    at process._tickCallback (internal/process/next_tick.js:63:19)
    at Function.Module.runMain (internal/modules/cjs/loader.js:744:11)
    at startup (internal/bootstrap/node.js:285:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:739:3)
Emitted 'error' event at:
    at Process.ChildProcess._handle.onexit (internal/child_process.js:238:12)
    at onErrorNT (internal/child_process.js:407:16)
    [... lines matching original stack trace ...]
    at bootstrapNodeJSCore (internal/bootstrap/node.js:739:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-my-app@0.1.0 deploy: `gh-pages -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-my-app@0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\{yourusername}\AppData\Roaming\npm-cache\_logs\2019-07-18T03_33_51_098Z-debug.log
```

まったく原因不明です。が、適当に調べたところ「Macでは成功するのにWindowsでは失敗するぞ」みたいな記事を見つけて、「もしかしたらGitBashで実行したらいけるんじゃね？」と思い実行してみました。

```:GitBash
npm run deploy
```

なんとdeployに成功しました。

もしかしたら僕の開発環境でしかエラーが発生しないかもしれません。
とにもかくにもやりたかったことは実現できました...。

### Webアプリを修正した場合

もう一度`npm run deploy`を実行するだけです。
その場合もPowerShellではなくGitBashを使わないとエラーが起こります。

## 終わりに

思った以上に簡単にできるようになっていて本当に助かります。Facebook様様です。

## Repository

https://github.com/stin-dev/react-demo-app
https://stin-dev.github.io/react-demo-app/

## 参照

https://ja.reactjs.org/docs/create-a-new-react-app.html#create-react-app
https://facebook.github.io/create-react-app/docs/deployment

## 追記

### 2019/11/07

PowerShellでdeployできない原因がわかりました。
自分がGit for Windowsをインストールするときに`git`コマンドをサードパーティ製コマンドラインツールから実行できるようにする設定をしていなかったからです。

別のWindows端末でGit for Windowsを再インストールする機会がありその設定の存在を知って、もしやと思い試してみたらドンピシャでした。

もしWindows環境で僕と同じエラーが出た場合は`git`コマンドがサードパーティ製コマンドラインツールから呼び出し可能になっているか確認してみてください。