GitHub PagesでのReactアプリのデプロイが失敗した原因と対応策

## はじめに

タイトル通り、GitHub Pagesを使用してReactアプリをデプロイしようとしたら上手くいきませんでした。

原因を一言で言うと、**Gitのリポジトリのルートディレクトリの直下に　`docs`　ディレクトリがない**せいです。

詳しい原因と対応策について書いていきます。

## 手順

基本的に以下の記事を参考にさせていただきました。

https://qiita.com/snow_swallow/items/8455dd135b81fe0ce25f

ただし、以下のような相違点がありました。

- Dockerを使っていないこと
- 作業ディレクトリが、既存のリポジトリの**ルートディレクトリの孫ディレクトリ**である

1点目は問題ないです。

問題は2点目です。何が悪いのか、具体的に手順を書いていきます。

:::note alert
以下は誤った手順です。
この通り実行しても上手くデプロイできませんのでご注意ください。
:::

### 0. 前提

Gitの`study`リポジトリを `git_root_dir` ディレクトリに紐づけています。

```
git_root_dir/
```

### 1. Reactアプリを作成

`git_root_dir` ディレクトリ直下に `React` ディレクトリを作成し、移動します。

```bash
$ mkdir React
$ cd React
```

Reactアプリを作成します。

```bash
$ npx create-react-app react-practice
```

この時点でのディレクトリ構成は以下の通りです。

```
git_root_dir/
 └ React/
    └ react-practice/
```

動作確認のため、Reactアプリを起動します。

```bash
$ npm run start
```

ブラウザで `http://localhost:3000/` にアクセスすると、無事に動作しています。

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/911578/388d010d-8434-81d5-1d1a-ae8299abadfb.png">

### 2. package.jsonの修正

ビルドのために `package.json` に設定を追加します。

```diff:react-practice/package.json
{
+ "homepage": "https://<GitHubアカウント名>.github.io/<リポジトリ名>/",
  "name": "<Reactアプリ名>",
  "version": "0.1.0",
  "private": true,
   // 中略

  "scripts": {
+   "deploy": "rm -rf docs && npm run build && mv build docs",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  // 後略
}
```

### 3. ビルド

`react-practice` ディレクトリで以下のコマンドを実行します。

```bash
$ npm run deploy
```

`react-practice` ディレクトリ直下に公開用の `docs` ディレクトリができます。

### 4. add, commit, push

デプロイするためにGitにpushします。

```bash
$ git add .
$ git commit -m "<コミットメッセージ>"
$ git push
```

### 5. GitHub Pagesの設定

GitHubの`study`リポジトリのページを開き、Settingを開きます。

![スクリーンショット 2023-12-25 20.57.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/911578/c8da00a0-500a-bf76-8d24-bd3656f1402b.png)

Pagesを選択します。

![スクリーンショット 2023-12-25 20.59.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/911578/c49b5363-4326-19b1-b803-e581dd496ccb.png)

Branchを選んだ後、Select folderで `/docs` を選択し、Saveを押します。

![スクリーンショット 2023-12-25 21.01.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/911578/27976ddc-8137-bde7-0404-731e5e9fd499.png)

### 成功していたら...

デプロイが正常に完了していれば、数分経つとVisit siteからデプロイしたアプリへと遷移でき、正常に表示されます。

![スクリーンショット 2023-12-25 21.08.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/911578/b85ef32a-691d-45ed-d4c8-0fa96ba6667e.png)

### 失敗、そして原因

が、今回は失敗しました。

Actionsから詳細を見ていきます。

![スクリーンショット 2023-12-25 21.11.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/911578/a10b47a7-f491-0ef3-dea7-88e0f10275f6.png)

失敗したデプロイ結果をクリックします。

<img width="400" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/911578/f21414d7-8ec0-254e-4d1b-410ede2db2bb.png>

エラーメッセージを見ます。

![スクリーンショット 2023-12-25 21.12.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/911578/69f5c3df-b4aa-7af7-14cc-e407f6bfa301.png)

見にくいですが、エラーメッセージの最後に以下のように表示されています。

```bash
Error: No such file or directory @ dir_chdir - /github/workspace/docs 
```

Select folderで **`/docs`を指定したけど、docsディレクトリがない**ので怒られています。

前述した通り、`study`リポジトリのルートディレクトリは `git_root_dir` になっています。

```
git_root_dir/
 └ React/
    └ react-practice/
       └ docs/  ← ここにdocsがある
```

なので、デプロイするときに<font color="OrangeRed"> `git_root_dir` ディレクトリの直下に `docs` ディレクトリを置く必要があり、</font>現状はそうなっていないのでエラーになってしまいます。。

### 試行錯誤

`docs` ディレクトリの位置は動かしたくなかったので、なんとか`git_root_dir/React/react-practice/`を基準にして`docs`を認識させられないかと、packeage.jsonを以下のように変更してみたのですが、同じエラーメッセージが出てしまい、効果はありませんでした。。

```diff:react-practice/package.json
{
+ "homepage": "https://<GitHubアカウント名>.github.io/<リポジトリ名>/git_root_dir/React/react-practice/",
  // 後略
}
```

## 対応策

ルートディレクトリの直下に `docs` ディレクトリを配置できない/したくない場合、`gh-pages`というパッケージを使用するデプロイ方法を採ります。

こちらはディレクトリの配置場所に関わらずデプロイが可能です。

手順は以下を参照させていただきました。

https://emit.hateblo.jp/entry/2023/08/26/163533

## 終わりに

今回は結局 `gh-pages` パッケージを利用する方法でデプロイしました。

もし他に何か良い対応策がありましたら、コメント欄で教えていただけますと幸いです！

## 参考

https://qiita.com/P-man_Brown/items/515f0a3e5ad8ca070449