はじめに
Facebookが作成しているReactを試してみたかったので、GitHub PagesでReactアプリを公開する方法です。現時点のReactの公式ページとGitHubの公式ページに記載されている方法で動いたので、この方法を書いていきます。
Reactアプリの環境構築
Reactアプリの環境構築は、コマンド1つで作成できるcreate-react-appを使います。このツールは、Reactと同様にFacebookが公開しています。使い方は、簡単。インストールに必要な環境は、npxのバージョンが5.2以上。この環境があれば、公式ページに書かれている手順でReactが使えるようになります。
Reactアプリの環境を作るのは、以下のコマンドを実行します。
npx create-react-app my-app
my-appは、ディレクトリ名なので、自分の好きな名前に変更できます。この記事では、my-appとします。Reactのページをブラウザで表示するには、以下のコマンドを実行して、ブラウザで http://localhost:3000/ を開きます。my-app/src/App.js を編集すれば、表示内容を修正することができるので、試してみてください。
cd my-app
npm start
Reactアプリのデプロイ
GitHub Pagesに設置するURLをpackage.json ファイルのhomepageの項目に設定します。初期のpackage.jsonファイルには、homepageの項目はないので、例えば、以下のように設定を追加します。
"homepage" : "http://myname.github.io/myapp",
設定後、以下のコマンドでbuildを行います。
ビルド結果は、my-app/build ディレクトリに生成されます。
このディレクトリをGitHubに設置すれば公開することができます。
npm run build
GitHub Pagesで公開
- GitHubでusername.github.ioのレポジトリを作成
usernameの部分は、自分のGitHubユーザ名に変更します。このレポジトリは、GitHub Pagesとしてwebサーバとして公開されます。 - GitHubのレポジトリ(username.github.io)にbuildディレクトリを設置
ディレクトリ名は、myappにします。git pushしてGitHubに反映させます。 - http://myname.github.io/myapp にアクセスして確認
環境
- create-react-app 3.0.0
- npx 6.7.0
- node 11.10.1