ReactをGitHub Pagesにデプロイしよう

### 追記(2023.11.11)
reactの環境をdockerで構築したいという場合は2023年11月に寄稿したこちらの記事を参考にしてみてください。

https://qiita.com/tat_mae084/items/47654da312c7ab18d8c3

## 今回の目的
Reactに取り組んだ際に、
「GitHub Pagesにデプロイできるんじゃね？」
と思ってトライしてみました。

その備忘録になります。

### 前提条件
- MacOS
- githubアカウント取得済み
- Node.jsのバージョン：v16.14.0
- npmのバージョン：8.3.1

(2023年3月追記)
この記事ではnpxでプロジェクトを作っています。
その後にも近しい記事を書いていて、viteを使ったバージョンです。
viteとは、2020年にリリースされた新しいフロントエンドのビルドツールです。
viteを使った場合のGitHub Pagesへのデプロイに関する記事も書いていますのでこちらもよければ参考にしてみてください。
[ReactをGitHub Pagesにデプロイしよう~Vite編~](https://qiita.com/tat_mae084/items/4051c61926dc8165e80b)

## デプロイ手順

### githubでremote repositoryを作る
※今回はrepository名：react-second-repo


### 自分のPCでlocal repository(フォルダ)を作る

### ターミナルでそのフォルダを開く
※今回のLocal repository名：react-app

```shell:terminal
cd react-app
```

npxコマンドでreactのデフォルトアプリをセッティングする

```shell:terminal
npx create-react-app app-dir
```
※Local repositoryのapp-dirはフォルダ名になります。



上記コマンドを打って処理が走ると思います。
その結果として行末に

```shell
~ 略 ~
We suggest that you begin by typing:

  cd app-dir
  npm start

Happy hacking!
```
とでていればapp生成は完了です。

### app-dirのフォルダにterminalで移動する
```shell:terminal
cd app-dir
```


### Visual Studio Codeでapp-dirを開く

### package.json を編集する

下記の5行の内容をpackage.jsonに追記してください
```json:package.json
{
~ 省略 ~
"homepage": "https://<GitHubアカウント名>.github.io/<GitHubリポジトリ名>/",
~ 省略 ~
  "scripts": {
    ~ 略 ~
    "rm": "rm -rf docs",
    "mv": "mv build docs",
    "git": "git add . && git commit && git push origin master",
    "deploy": "npm run rm && npm run build && npm run mv && npm run git"
  },
}
```
上記の特定箇所は私の場合は以下の通りです。
＜GitHubアカウント名＞：TatsuyaMaeta
＜GitHubリポジトリ名＞：react-second-repo

この時点でまだGitHubにリポジトリを作成していない様でしたら作成してください。

```zsh:terminal
git remote add origin https://github.com/<GitHubアカウント名>/<GitHubリポジトリ名>.git
```
上記の特定箇所は私の場合は以下の通りです
＜GtHubアカウント名＞：TatsuyaMaeta
＜GitHubリポジトリ名＞：react-second-repo
問題なくgitコマンドが通っているとterminalでの戻り値はありません。

他の記事だとterminalで git initをしているものもありますが、上記のコマンドで行末が.gitとなっていることもあり、不要です。


```shell:terminal
npm run deploy
```
上記のコマンドを叩くと処理が色々と走ります。
そうすると下記の様なterminalの表示になります。
![スクリーンショット 2022-03-09 21.02.56.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566867/fd53bbb2-2fba-2152-7868-4396a45183db.jpeg)
ここで求められていること、それはこの#から始まる変更内容をvimで編集するして保存するということです！
terminalをクリックしてから shift + Zを2回です。
「ZZ」はvimでは上書き保存してvim終了になります。Zは大文字になるのでご注意ください。
参考記事：https://qiita.com/hide/items/5bfe5b322872c61a6896



### GitHubの設定を変更してGitHub Pagesのを有効にする

GitHubのSettingから左カラムのPagesをクリックします
![スクリーンショット 2022-03-09 21.15.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566867/e4840bcd-c604-64b7-6ea1-4bba8f92f13c.png)

次にSourceのBranchを
「None」→「main  /  docs」に切り替えてSaveします。

![スクリーンショット 2022-03-09 21.17.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566867/0905bf85-984b-6aad-1e5f-b1e14a06e6b9.png)

URLがすぐ発行されますが、URLを叩いてもおそらく404になります。
何故かというとbuild処理がまだ出来ていないからですね。
Actionsからbuild状況がわかります。

![スクリーンショット 2022-03-09 21.20.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566867/da6c6442-de04-9a6a-e0b3-efebbb07886d.png)

ステータスがグリーンランプになっているとSuccessです！
![スクリーンショット 2022-03-09 21.22.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566867/b58581f3-1f60-4084-4346-1df5676cd768.png)

github pagesのURLを叩くと
![スクリーンショット 2022-03-09 21.23.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566867/28f570a5-2785-a153-eb94-95ba47ec057b.png)
https://tatsuyamaeta.github.io/react-second-repo/
完成です！

あと、ローカルでの変更コードについてはシンプルにコードをコミットしてもgithub pagesに反映されません。
その際はterminalで「npm run deploy」して変更内容をpushすれば完成です！

皆さんも是非試してみてください。