search
LoginSignup
81

More than 3 years have passed since last update.

posted at

updated at

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

はじめに

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-pagesnpm 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」を選択します。

react.png

これで設定終了です。
私はこの設定変更を忘れていて、デプロイは成功しているはずなのにブラウザで確認すると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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
81