めっちゃ簡単！GitHub Pagesに Reactアプリを公開する方法

Reactで作ったアプリをビルドして、静的な Webページとして GitHub Pagesに公開する方法を紹介します。

今回は、gh-pages というツールをインストールして GitHub Pagesにアプリを公開します。これ使うと簡単にアプリが公開できちゃいます。

前提

まー、GitHubのアカウントは持っている前提です。

Reactアプリの作成

お試しで GitHub Pagesにデプロイするための、適当なプロジェクトを作ります。

npx create-react-app myApp --template typescript

gh-page のインストール

 npm install gh-pages --save-dev

package.json の scripts に次の行を追加する。

  "scripts": {
    "deploy": "npm run build && gh-pages -d build"
  },

cross-env の設定

アプリをリポジトリページとして公開する場合、URLは https://<ユーザー名>.github.io/<リポジトリ名>/ のようになります。しかし、Reactは通常 cssや jsがルートディレクトリからの参照になってしまうたため、サブディレクトリの URL上にデプロイすると正しく動作しません。

そこで、サブディレクトリでも動作するように cross-env を導入します。

npm install cross-env --save-dev

package.json の build の設定を変更して、環境変数(PUBLIC_URL) にサブディレクトリ（リポジトリ名）を設定します。

  "scripts": {
    "build": "cross-env PUBLIC_URL=/<リポジトリ名> react-scripts build",
  },

※ アプリをユーザーページとして公開する場合は、URLは https://<ユーザー名>.github.io/ のようになるので、この cross-env の手順は不要です。

GitHub リポジトリの作成

GitHubのページに行って、デプロイ用に新しくリポジトリを作成する。

今回は「MySample」という名前でリポジトリを作成した。リポジトリのスコープは Public で作っておく。（GitHub Pageは Privateでも公開できるので、PrivateでもOK）

ローカルのリポジトリに、上で作成したリモートリポジトリを追加する。

git remote add origin https://github.com/<Gitユーザー名>/MySample.git

デプロイ

次のコマンドで GitHub Pagesにデプロイします。

npm run deploy

最初は何度かパスワードを聞かれるため、自分の GitHubのアカウントを入力します。

このコマンドで、ビルド＋gh-pagesブランチの作成、GitHub Pagesのブランチ設定が一発でできます。

公開されるまでに少し時間がかかるので１分程度待って、https://<ユーザー名>.github.io/<リポジトリ名>/ にアクセスすると、公開したアプリが見れます。