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

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

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

## GitHub Pages とは？
**GitHub**が提供する**静的サイトホスティングサービス**です。

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

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


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

### netlify
https://www.netlify.com/

### Vercel
https://vercel.com/

### GitLab Pages
https://docs.gitlab.com/ee/user/project/pages/

### Firebase Hosting
https://firebase.google.com/products/hosting?hl=ja

### Surge
https://surge.sh/

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

```
npm install gh-pages --save-dev

または

yarn add gh-pages --dev
```

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

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

:::note info
**(1) GitHub Actions**
:::

:::note info
**(2) 手動でデプロイする**
:::

:::note info
**(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 git@github.com:<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://<your-username>.github.io/<your-repo-name>.git/' not found

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

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

## リンク

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