Create React Appで作成したReact ApplicationをGitHub Pagesで公開する
フロントエンドできるようになりたいなって思ったので、Reactの勉強をはじめました。
公式のチュートリアルを終えたので、ブラウザ上で遊べるオセロを作ってGithub Pagesで公開しようとしたのですが、その際に手こずったので備忘録も兼ねてまとめておきます。
React Applicationを作成するための環境構築
そもそも、ローカルでReactを動かせるようにするのが難しいです。
FacebookがCreate React Appという環境構築のためのアプリケーションを提供してくださっているので、これを使います。
npmでインストールしましょう。
npm install -g create-react-app
このコマンドは何度も使うだろうと考えて、グローバルインストールをしたのですが、ローカルインストールの方がいいのでしょうか？
ローカルインストールとグローバルインストールの使い分け方がよく分かりません…
あとはGitHubのRAEDME.mdに従えばReact Applicationを起動することができます。
GitHub Pagesへの公開
GitHubのリポジトリの設定から、そのリポジトリのdocs/ 直下のファイルをhttps://ユーザー名.github.io/リポジトリ名で公開することができます。
やり方はこのQiitaの記事で丁寧に解説されています。
上のやり方でReact Applicationを公開するためには、ビルド先のディレクトリ名をdocsにしなければなりません。
しかし、デフォルトのディレクトリ名はbuildになっています。
解決方法としては、package.jsonのscripts.buildの部分を次のように書き換えてやります。
"build": "react-scripts build && mv build docs",
これでいいのかという気もしますが、Reactの開発者の方が提案された方法なのでよいのでしょう。
あとはpushして終わり…と行きたいところなのですが、ビルド先のindex.htmlを開いてみると、"Failed to load resource: net::ERR_FILE_NOT_FOUND"というエラーが出て読み込みに失敗します。
僕の場合は、どうやらビルドされたファイルが相対パスで参照されていないことによるものらしかったです。
package.jsonに以下のように追記します。
"homepage": ".",
これでようやく無事ビルドしたファイルを開けるようになりました！
最後にGitHub Pagesにデプロイすれば終了です。
無事公開はできましたが、やっぱり公開するほどのものじゃないですね…(気にせずバンバンアウトプットするつもりではありますが)
今は完全に2人で交互にクリックしてゲームを進めるだけなのですが、今後は対戦AIの方も実装しようと思っています。
今はごくごく単純なオセロアプリですが、これを通して色々勉強できたら嬉しいです。
