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

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

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

そもそもGitHub Pagesとは？

GitHubが提供している静的サイトのホスティングサービスで、リポジトリにアップした HTML・CSS・JavaScirptなどの静的ファイルを、そのまま Webサイトとして公開できる。
※ PHPなどのサーバー側で動的に動くアプリは公開できない；

なんと言っても、GitHubのアカウントを持っていれば、誰でも無料でウェブサイトを公開でき、レンタルサーバーなどを借りる必要もない。

独自ドメインでの運用も可能で、有料ではあるが、お名前comや、ムームードメインなどでドメインを取得して、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 の設定

Github Pagesで公開したアプリの URLは、 https://<ユーザー名>.github.io/<リポジトリ名>/ のようになります。この時、デフォルトでは cssや jsがルートディレクトリからの参照になっているため、<リポジトリ名> のパスが付いたURL上では、ファイルが正しく参照できません。

そこで、<リポジトリ名> のパスが付いたURLでも動作するように cross-env を導入します。

npm install cross-env --save-dev

インストールが終わったら、package.json の build を変更して、環境変数(PUBLIC_URL) にサブディレクトリ（リポジトリ名）を設定します。

  "scripts": {
-   "build": "react-scripts build",
+   "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 で追加する。

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

スポンサーリンク

デプロイ

GitHub Pagesにアプリをデプロイします！

アプリをデプロイするには、次のコマンドを使用します。なんと、このコマンドを叩くだけで、ビルド＋gh-pagesブランチの作成・公開までを一発でやってくれます。

npm run deploy

もし、パスワードを聞かれる画面が表示されたら、自分の GitHubのアカウントを入力します。

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

react-router を使う場合

「react-router」は、SPAの Reactアプリでページ遷移を可能にするライブラリです。

SPAでは実態の HTMLファイルは index.html ただ１つとなるが、その中でURLによって表示するコンポーネントを切り替え可能にします。

react-routerを使用しているアプリを Github Pagesに公開する場合は、もう少し対応が必要である。

Routeの設定を変更

Routeに指定するパスの先頭に、環境変数で設定した PUBLIC_URL を含める。

<BrowserRouter>
  <Routes>
-   <Route path="/" element={<Home />}/>
-   <Route path="/page1" element={<Page1 />}/>
-   <Route path="/page2" element={<PageB />} />
+    <Route path={`${process.env.PUBLIC_URL}/`} element={<Home />}/>
+    <Route path={`${process.env.PUBLIC_URL}/page1`} element={<Page1 />}/>
+    <Route path={`${process.env.PUBLIC_URL}/page2`} element={<PageB />} />
  </Routes>
</BrowserRouter>

URL直接入力時の404エラー対策

だが、上記の対策だけだと不十分だ。

このままでは、直接https://<ユーザー名>.github.io/<リポジトリ名>/page1 のような index.html 以外のファイルを指すURLを入力した時 、Github Pagesは URLで指定されたファイルをディレクトリから探そうとするため、404エラーになってしまう。

こも問題には、いくつかの対策方法があるが、一番手軽なのが index.html をコピーして 404.html としてファイルを置いておく方法である。

Github Pagesは URLで指定されたファイルが見るからない場合、404.html を表示する仕様となっているので、404.htmlの内容を index.html と同じにしておけば、直接URLを入力された場合にも正常にアプリが表示される。

package.json の scripts に postbuild の項目を追加し、ビルド後に index.html を 404.html にコピーするスクリプトを書く。

  "scripts": {
+    "postbuild": "cp build/index.html build/404.html",
  }

これで、デプロイをすると index.html をコピーした 404.html が作成される。

まとめ

以上の手順で、Github Pagesに Reactで作ったアプリを公開できる。

create-react-app のテンプレートから作ったから変更する点はあるものの、無料でアプリが公開できるのは嬉しい。