【 React 】アプリケーションをGitHub Pagesにデプロイする方法 Gh-pages使用

はじめに

ReactアプリケーションをGitHub Pagesにデプロイする手順を説明します。

この記事ではcreate-react-appを使用して作成したアプリケーションを例にしていますが、他のReactアプリケーションにも適用可能です。

GitHub Pages とは？

GitHubが提供する静的サイトホスティングサービスです。

これを利用することで、GitHubリポジトリ内のコードから直接ウェブサイトを公開することができます。

GitHub Pagesは、特にプロジェクトのドキュメント、個人のポートフォリオサイト、ブログなど、静的なコンテンツを簡単にホスティングするために広く利用されています。

類似サービスで下記があります

netlify

Vercel

GitLab Pages

Firebase Hosting

Surge

必要なパッケージのインストール

まずgh-pagesパッケージをインストールします。
このパッケージは、GitHub Pagesに簡単にデプロイするために使用されます。

npm install gh-pages --save-dev

または

yarn add gh-pages --dev

gh-pages
Node.js環境で動作する小さなユーティリティツールで、GitHub Pagesに静的ファイルをデプロイするために使用されます。
ReactアプリケーションをGitHub Pagesにデプロイする際に非常に便利です。

ほの他の方法

gh-pagesは必ずしも必要ではありません。
下記の方法でもReactプロジェクトをGithubPagesにデプロイできます。

(1) GitHub Actions

(2) 手動でデプロイする

(3) GitHubの設定から直接デプロイ
※その他のフォルダーを使用しないといけない

package.json の設定

package.json ファイルに以下の設定を追加します。

1. homepage: アプリケーションがデプロイされるURLを指定します。
2. scripts: デプロイ用のスクリプトを追加します。

{
  "homepage": "https://<your-username>.github.io/<your-repo-name>",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

your-username をあなたのGitHubユーザー名に、your-repo-name をリポジトリ名に置き換えてください。

リポジトリの初期化とリモート設定

まだリポジトリを初期化していない場合は、次のコマンドでリポジトリを初期化し、リモートリポジトリを追加します。

git init
git remote add origin https://github.com/<your-username>/<your-repo-name>.git
git add .
git commit -m "Initial commit"
git push -u origin main

デプロイ方法の選択

GitHub Pagesにデプロイする際にはHTTPまたはSSHのどちらかを使用してリポジトリにアクセスすることができます。
以下に、それぞれの方法について説明します。

HTTPを使用する場合

HTTPを使用する場合、デフォルトの設定で問題ありません。
package.json の deploy スクリプトは以下のようになります。

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build",
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

SSHを使用する場合

SSHを使用する場合、gh-pages コマンドにリポジトリのSSH URLを指定する必要があります。
package.json の deploy スクリプトは以下のように修正します。

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build -r [e-mail]:<your-username>/<your-repo-name>.git",
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

※SSHを使用するためには、事前にGitHubにSSHキーを設定している必要があります。

アプリケーションのビルドとデプロイ

npm run deploy

または

yarn deploy

デプロイが成功すると、gh-pages ブランチにビルドされたファイルがプッシュされ、GitHub Pagesにデプロイされます。

デプロイの確認

ブラウザを開き、https://your-username.github.io/your-repo-name にアクセスして、アプリケーションが正しくデプロイされているか確認してください。

問題が発生した場合の対処方法

エラー: Failed to get remote.origin.url

このエラーは、リポジトリの設定が正しく行われていない場合に発生します。
リポジトリのルートディレクトリで以下のコマンドを実行して、リモートリポジトリが設定されていることを確認してください。

git remote -v

リモートリポジトリが設定されていない場合は、次のコマンドで追加します。

git remote add origin https://github.com/<your-username>/<your-repo-name>.git

エラー: fatal: repository 'https://.github.io/.git/' not found

このエラーは、リポジトリのURLが間違っているか、リポジトリが存在しない場合に発生します。
リモートリポジトリのURLが正しいことを確認し、リポジトリが存在するか確認してください。

まとめ

以上で、ReactアプリケーションをGitHub Pagesにデプロイする方法の説明を終わります。
これで、簡単にReactアプリケーションをデプロイし、公開することができます。

リンク