株式会社Infigate

Blog

Reactのプロジェクトをgithub pagesを使ってお手軽にdeployする方法


投稿日2023/3/21 更新日2023/3/21 システム

はじめに

本記事では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を指定し、保存します

1分ほど待つと、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を使って公開する方法についてご紹介しました。

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

この記事を書いた人

Infigate

北海道札幌市のシステム開発会社、株式会社Infigateです。 活動内容やシステム開発技術に関するTips、DX化に関連する記事やその他地域活性化に繋がる情報等を発信していきます。

お問い合わせ

Contact

お見積ご相談は無料です。
どうぞお気軽にご相談くださいませ。