開発環境
- 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名とは一致する必要はありません。
cd F:\development
npx create-react-app react-my-app
ちゃんとアプリが作成されているか確認しましょう。
下記のコマンドでWebサービスがlocalhost:3000で起動し、自動でブラウザが起動します。
cd F:\development\react-my-app
npm start
確認出来たらサービスは停止してよいです。
Git管理をするためにF:\development\react-my-appで右クリックしてGit Bash Hereを選択します。
起動したコンソールで下記コマンドを実行します。
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に読み替えてください。
{
...
"homepage": "https://stin-dev.github.io/react-demo-app",
...
}
今回はProjectPageにホストしますが、UserPageにホストする場合やカスタムドメインを取得している場合は追加で作業が必要になります。詳しくはこちらで。
gh-pagesパッケージをインストール
GithubPagesへホストするためのパッケージを導入します。
cd F:\development\react-my-app
npm install --save gh-pages
再びpackage.jsonを編集します。"scripts"オブジェクトに"predeploy"と"deploy"を追加します。
{
...
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
...
}
Deployしよう
下記コマンドを実行するだけでGithubのRepositoryにgh-pagesのブランチを作成してプッシュしてくれます。
npm run deploy
完了するまで待ちま。。。
エラーを吐いた
> 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で実行したらいけるんじゃね？」と思い実行してみました。
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コマンドがサードパーティ製コマンドラインツールから呼び出し可能になっているか確認してみてください。