はじめに

本記事ではReactを使って作成した静的WebサイトをGithubPagesを使って公開する方法についてご紹介します。

gh-pagesというnpmパッケージを使用することでとても簡単に公開することができるため何かのサンプルサイトやポートフォリオ等を公開したい方などにオススメです。

大まかな流れと用語の解説

Github pagesとは

GitHub Pages とは、GitHub の無料の静的ウェブサイトホスティングサービスです。

静的サイトとは、HTML、CSS、JavaScript などのコードから構成され、サーバー側で動的な処理を行わないウェブサイトのことを指します。

GitHub Pages を利用すると、GitHub 上に置いた静的なウェブサイトを公開することができます。たとえば、自分が作成したポートフォリオやブログを公開したり、オープンソースのプロジェクトのドキュメントサイトを作成することができます。

また、GitHub Pages では、独自のドメイン名を使用することもできます。

GitHub Pages は無料で利用できるため、開発者や個人のプロジェクトに最適です。また、GitHub Pages は Git によるバージョン管理に対応しているため、静的サイトの管理や更新が簡単に行えます。

Reactによるサイトも公開できる？

create-react-app等を使用したReactのプロジェクトも問題なく公開できますが、それらはbuildをしたファイル群をgithub上に配置しなければいけません。

本来buildディレクトリ等はバージョン管理として含めたくないところではあるので、その点をどうするか。

Github Pagesはリポジトリの配下を公開するためbuildディレクトリをリモートに含めないという選択肢は選ぶことができませんので、せめて独立したbranchとしてbuildディレクトリ以下を分けたい。

そこでnpm packageで公開されているgh-pagesの出番となります。

gh-pagesとは

https://www.npmjs.com/package/gh-pages

Github Pages用の公開ディレクトリを別ブランチ上にコマンド一つで生成してくれるパッケージです。
手動でやってもいいのですが、せっかく楽にできるので使ったほうが良いかもしれません。

gh-pagesはビルドしたファイルを自動的にgh-pagesブランチにデプロイすることができます。

GithubPagesを使ってプロジェクトを公開する方法

ソースコード側の変更

まずはgh-pagesをインストールします

yarn add gh-pages
または
npm i gh-pages

package.jsonに以下を追加します

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",　// ←追加
    "eject": "react-scripts eject"　// ←追加
  },

そして、yarn deployコマンドを使用するだけでgh-pagesブランチがリモートにプッシュされます

Github側の変更

リポジトリのSettingsからPagesを選択します。

Build and deploymentの箇所でブランチにgh-pagesを指定し、保存します

１分ほど待つと、Github Pagesにソースコードがデプロイされます。

React Routerを使用している際の注意点

ReactプロジェクトはSPAとなっているため、常にindex.htmlを返してあげる必要がありますが、Github Pagesではhtaccessの設定などができないのと、githubのURLとリポジトリのURLがあるせいでルーティングがうまくいかず真っ白な画面が描画されてしまうことがあります。

以下はReact Routerを使用している際にGithub Pagesに公開する際の対策方法です

Package.jsonにhomepageを追記

  "homepage": "https://***.github.io/***",

Route pathにリポジトリ名を追記

const URL = process.env.PUBLIC_URL;
・・・
<Routes location={location} key={location.pathname}>
  <Route path={URL + PageLink.Top} element={<pages.Top />} />
・・・

上記例では環境変数にリポジトリの文字列を保存しておきGithub Pagesのデプロイ環境のみ階層を追加するようにしています。

環境変数を管理するために”cross-env”を使用しています。

最後に

ということで、Reactを使って作成した静的WebサイトをGithubPagesを使って公開する方法についてご紹介しました。

最後まで閲覧いただきありがとうございました。