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

8561 ワード
React Node.js github-pages Node.js テキストリンク

開発環境

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

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

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

手順

GithubにRepository作成

今回はreact-demo-appという名前で作成します。
.gitignoreやREADME.mdなどは不要で、完全に空のRepositoryでよいです。

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

適当なフォルダ(僕は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

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

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

GitBash
git init
git add .
git commit -m "first commit"
git remote add origin [email protected]:stin-dev/react-demo-app.git
git push origin master

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

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

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

今回はProjectPageにホストしますが、UserPageにホストする場合やカスタムドメインを取得している場合は追加で作業が必要になります。詳しくはこちらで。

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

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

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

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

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! [email protected] deploy: `gh-pages -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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コマンドがサードパーティ製コマンドラインツールから呼び出し可能になっているか確認してみてください。