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

はじめに

GitHub PagesにReactアプリをデプロイしてみました。
その際にいろいろな記事を回ったり、エラーが発生したりしたので、自分なりにまとめておきます。

前提

Node : v9.10.1
npm : 5.6.0
create-react-app : 1.5.2

create-react-app を使用してReactアプリを作成します。
導入方法は以下の記事がとても参考になると思います。
Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する

また、今回はGitHubのmasterブランチをWebページとして公開するようにします。

1. Reactアプリの作成とgh-pagesのインストール

まずはReactアプリを作成します。

$ create-react-app react-pages

Reactアプリの作成が終わったら、gh-pagesをインストールします。
gh-pages は npm run deploy と打つだけでGithub Pagesにデプロイできるnpmのパッケージです。

$ cd react-pages
$ npm install gh-pages --save-dev

インストールが終わったら、package.json を編集します。

2. package.jsonに設定を追加

package.json

//...
"homepage": "http://username.github.io/react-pages"

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

これで準備完了です！

3. GitHubにリポジトリを作成してデプロイ

GitHubでリポジトリを作成します。
（リポジトリの名前はReactアプリの名前と異なっていても大丈夫です。）

リポジトリを作成したら、以下のコマンドを叩いてデプロイします。

$ git init
$ git remote add origin https://github.com/username/react-pages.git
$ npm run deploy

デプロイに失敗した

通常ならうまくいくはずですが、
$ npm run deploy を叩いたあと、すぐにエラーが出て止まってしまいました。

$ npm run deploy

> react-vim-cheat-sheet@0.1.0 predeploy /Users/username/workspace/react-pages
> npm run build


> react-vim-cheat-sheet@0.1.0 build /Users/username/workspace/react-pages
> react-scripts build

sh: react-scripts: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! react-vim-cheat-sheet@0.1.0 build: `react-scripts build`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the react-vim-cheat-sheet@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
...

node_modules 以下を消して再度挑戦。

$ rm -rf node_modules
$ npm install
$ npm run deploy

で今度は成功しました。

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

GitHubリポジトリのGitHub Pagesの設定を変更します。

Settings > GitHub Pages > Source で、「master branch」を選択します。

これで設定終了です。
私はこの設定変更を忘れていて、デプロイは成功しているはずなのにブラウザで確認すると404…という状態で少し時間を無駄にしました…。

ブラウザで確認してみると、無事にReactアプリがデプロイされていました。
https://yuitnnn.github.io/react-vim-cheat-sheet/
（リポジトリ名は気にしないでください）

おわりに

Reactアプリ作成から30分もかからずにGitHub Pagesにデプロイすることができました。
簡単にできるので、ぜひ試してみてはいかがでしょうか。

参考

https://github.com/gitname/react-gh-pages
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#github-pages