ReactアプリをGithub Pagesにデプロイする方法

# はじめに
Github Pagesを用いるとReactアプリを公開することができます。
備忘録も兼ねGithub Pageを使ったReactアプリの公開方法をまとめていきたいと思います。

Github Pagesの詳細につきましては下記公式サイトよりご確認をお願いします。
[Github Pages公式サイト](https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-pages)

# 手順
大まかに手順をまとめると以下の通りです。
1. 公開するReactアプリを作成
1. Githubに新しいリポジトリを作成する
1. 作成したリポジトリとReactアプリを連携する
1. Reactアプリをビルドする
1. コミット＆プッシュをする
1. Github Pagesの公開設定をする

## 1. 公開するReactアプリを作成
公開するReactアプリを作成し、PCに保管します。
ここでは、Dockerを用いて`create-react-app`でプロジェクトを作成する例を記載します。
※Dokcerを用いない場合は、`node.js`をインストールし、
`npx create-react-app <プロジェクト名>`で作成可能です。

任意のディレクトリに`Dockerfile`と`docker-compose.yml`ファイルを作成し、
以下の通り記述します。
`<プロジェクト名>`には`template`のようにお好きなプロジェクト名をつけます。
(山括弧は不要)

```Dockerfile:Dockerfile
# ベースイメージの指定
FROM node:lts
# 作業ディレクトリの指定
WORKDIR /usr/src/app
```

```yaml:docker-compose.yml
version: "3.9"
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - type: bind
        source: .
        target: /usr/src
    command: sh -c "cd <プロジェクト名> && npm start"
    ports:
      - 3000:3000
    stdin_open: true
```

記述が終わりましたら、ビルドを行うため以下のコマンドを実行します。
```zsh:terminal
$ docker-compose build
```

ビルドが完了しましたら、以下のコマンドを実行し、プロジェクトを作成します。

```zsh:terminal
$ docker-compose run --rm app sh -c 'npx create-react-app <プロジェクト名>'
```

下記のように表示された場合は`y`を入力＆`Enter`を押下し、続行します。
```zsh:terminal
Need to install the following packages:
create-react-app@5.0.1
Ok to proceed? (y)
```

2〜3分ほど待ち、`Happy hacking!`が表示されれば、プロジェクトの作成は完了です。
以下のコマンドを実行し、[localhost:3000](http://localhost:3000/)にアクセスして、
以下画像のように表示されていれば問題ありません。

```zsh:terminal
$ docker-compose up
```

![スクリーンショット 2023-10-10 21.42.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3326710/9610f5bf-9ca3-e40b-2df2-2c9d0d262dad.png)

## 2. Githubに新しいリポジトリを作成する
Githubアカウントにサインインして、画面右上の`+`のアイコンをクリックし、
New repositoryを選択します。
Githubアカウントをお持ちでない方は、[こちら](https://github.co.jp/)よりアカウントを登録します。
<img width="250" alt="your repository" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3326710/51a48994-6cdd-3c92-6af5-a33c470798f7.png
">

Create a new repositoryの画面の `Repository name` にリポジトリ名を記入し、
画面下部の `Create repository`を選択します。
<img width="600" alt="create repository" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3326710/581dbdb3-8b57-bb04-5ebf-31a02d3b5158.png
">

下図のような画面が表示され、リポジトリが作成できていればOKです。
<img width="600" alt="repository window" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3326710/8321a8c9-096a-c1f8-7387-f97c99dad6e2.png
">

## 3. 作成したリポジトリとReactアプリを連携する
`Dockerfile`と`docker-compose.yml`ファイルのディレクトリから
以下のコマンドを実行し、ディレクトリを移動します。
※Dockerを使用せずに`create-react-app <プロジェクト名>`で作成した場合は、
`cd <プロジェクト名>`でOKです。

```zsh:terminal
$ cd app/<プロジェクト名>
```

ディレクトリを移動したら、以下のコマンドを実行し、Githubリポジトリにプッシュします。
```zsh:terminal
$ git init
$ git add .
$ git commit -m "first commit"
$ git branch -M main
$ git remote add origin https://github.com/ユーザー名/template.git
$ git push -u origin main
```

## 4. Reactアプリをビルドする
`package.json`に以下の内容を追記します。
`<Githubアカウント名>`にはご自身のGithubアカウント名を、`<リポジトリ名>`には作成したリポジトリの名前を入れます。
(いずれも山括弧は不要)

```diff_json:package.json
{
+ "homepage": "https://<Githubアカウント名>.github.io/<リポジトリ名>/",
  "name": "<プロジェクト名>",
  "version": "<バージョン>",
  "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"
  },
}
```

追記が完了しましたら以下のコマンドを実行して、
`Dockerfile`と`docker-compose.yml`ファイルがあるディレクトリに移動し、
docker-composeコマンドを実行します。
※Dockerを使用していない場合は、ディレクトリを移動せず単に`npm run deploy`で問題ありません。
```zsh:terminal
$ cd ../..
$ docker-compose run --rm app sh -c 'cd <プロジェクト名> && npm run deploy'
```

## 5. コミット＆プッシュをする
以下のコマンドを実行し、プロジェクトのディレクトリに移動し、コミット＆プッシュをします。
```zsh:terminal
$ cd app/<プロジェクト名>
$ git add .
$ git commit -m "build"
$ git push -u origin main
```

## 6. Github Pagesの公開設定をする
Settingタブを選択します。
<img width="600" alt="Setting" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3326710/d5c6258f-f600-4d75-e1f2-43f948b81fcf.png
">

左サイドバーにあるCode and automationの `Pages` を選択します。
<img width="200" alt="Select Pages" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3326710/710e0928-1d68-ed72-42ec-5616c7b30ccb.png
">

`None`を選択し、公開用ブランチを選択します。
<img width="300" alt="Select Branch" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3326710/4283bf2b-5e90-6571-517f-661ed63784c6.png
">

フォルダを選択し、公開用のディレクトリを選択します。
<img width="350" alt="Select Branch" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3326710/837eba87-c12a-cc84-d1bf-565f360a1536.png
">

最後に`Save`を選択します。
<img width="300" alt="Select Branch" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3326710/25401305-763b-171c-a774-eaa58ee9e4a7.png
">

数分程度待つとデプロイされ、公開したWebページのURLが表示されます。
URLにアクセスすると、作成したReactアプリを確認することができると思います。
![スクリーンショット 2023-10-10 21.42.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3326710/9610f5bf-9ca3-e40b-2df2-2c9d0d262dad.png)


# 最後に
以上がGithub Pagesを用いたReactアプリの公開手順となります。
Github PagesでReactアプリを手軽に公開することができ、便利だと感じました。
皆さんもぜひGithub Pagesを使って、作成したReactアプリを公開されてみてはいかがでしょうか。

# 参考文献
https://qiita.com/tat_mae084/items/745761eee6cd1d42949d

https://qiita.com/kntr0116/items/17042c792de76104f5c0

https://coosy.co.jp/blog/docker-react/