GitHub PagesでReactアプリを公開する

#概要
Reactでアプリを作成した際にGitHub Pagesを利用したのですが、
その際に少しつまづく部分もありましたので備忘録も兼ねて記載します。

#環境
・macOS Big Sur
・Node.js(v16.13.1)

#手順
###GitHubにRepositoryを作成する
今回はreact-sampleという名称でRepositoryを作成していきます。
![スクリーンショット 2021-12-10 21.55.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1654510/6ae1581f-abf1-6005-1022-3ac3f72695f4.png)
###プロジェクトを作成する
create-react-appでプロジェクトを作成します。
プロジェクト名はGitHubと同じreact-sampleにし、ディレクトリに移動します。

```:~
❯ npx create-react-app react-sample
❯ cd react-sample
```
ディレクトリの構造は下記のようになります。

```:~/react-sample
❯ tree -L 1
.
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── public
└── src
```
プロジェクトを実行するには`npm start`コマンドを使います。

```:~/react-sample
❯ npm start
```
ブラウザで`localhost:3000`にアクセスし、
下記のような画面がでれば、ローカルで実行できています。
![スクリーンショット 2021-12-10 22.35.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1654510/af9fa689-35fc-791b-cdad-26f97d066283.png)

###GitHubにpushする
さきほど作成したGitHubのRepositoryに`react-sample`をpushしましょう。

```:~/react-sample
❯ git init
❯ git add .
❯ git commit -m "first commit"
❯ git branch -M main
❯ git remote add origin git@github.com:(GitHubユーザー名)/(Repository名).git
❯ git push -u origin main
```

GitHubのreact-sample Repositoryにpushすることができました。

![スクリーンショット 2021-12-10 22.58.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1654510/77a20f1b-7ece-b32e-8866-8944f0e5a315.png)

###GitHub Pagesを使って公開する
それではいよいよGitHub pagesを使って公開していきます。
そもそもGitHub pagesとは、GitHubが提供している静的サイトのホスティングサービスのことです。
GitHub pagesを利用することで、静的なwebサイトを無料で公開することができます。

先ほど作成したreact-sample Repositoryで、
Settings→ページ下部のGithub Pagesの`Check it out here!`をクリック
下記のような画面になるので、SourceのBranchをmainにしてsaveします。
![スクリーンショット 2021-12-10 23.26.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1654510/f8fb8ff2-1e7e-2594-8de0-4df00750c1f8.png)

`Your site is published at https://(Githubユーザー名).github.io/(Repository名)/`
とあるので、作成されたURLにアクセスしてみます。

![スクリーンショット 2021-12-10 23.30.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1654510/0364b0c0-e37c-5968-965b-ef7ed11cf91a.png)

うまく表示されない。。。

よく見てみると、プロジェクト作成したときに自動的に作成されるREADME.mdの内容が
表示されているようでした。

解決方法は[GitHub Pagesを使ったWebページでREADME.mdが初期表示されないようにする。](https://qiita.com/mogamoga1337/items/1752ec783d0fdc866a6a)の記事を
参考にさせて頂きました。

まずはローカルのreact-sampleディレクトリ上で、.githubディレクトリを作成し、
README.mdファイルを.githubディレクトリに移動させます。
こうすることで、Github上ではREADME.mdを表示したまま、webページではindex.htmlを表示することができます。

```:~/react-sample
❯ mkdir .github
❯ mv README.md .github
```
再度変更内容をpushし、先ほどと同様の手順で作成されたURLにアクセスしてみます。

![スクリーンショット 2021-12-10 23.56.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1654510/427a44d7-ad2a-db70-298b-ad97c2b23151.png)

おお？？？
今度はなぜか404が表示されてしまいました。
色々と調べてみると、gh-pagesというパッケージをインストールし、
プロジェクトファイル上にあるpackage.jsonの中身にスクリプトとホームページを追加する必要があるようです。

こちらの手順は、[ReactアプリをGitHub Pages(Project Pages)で公開する](https://qiita.com/EisKern/items/15dcf7864fa49df8f247)
の記事を参考にさせて頂きました。

まずは`gh-pages`パッケージをインストールします。
こちらはGithub Pagesにデプロイするためのnpmパッケージです。

```:~/react-sample
❯ npm install gh-pages --save-dev
```
次にpackage.jsonの中身にコードを追加します。

```:~/react-sample/package.json
{
  ...,
  "scripts": {
    ...,
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  ...,
  "homepage": "https://(Githubユーザー名).github.io/(Repository名)/"
}
```

こうすることで、`npm run deploy`コマンドを入力した際に、
リモートにgh-pagesブランチが作成され、ディレクトリの中身をGithub Pagesで公開できます。
実際に実行してみましょう。

```:~/react-sample
❯ git add .
❯ git commit -m "gh-pagesで公開用に設定"
❯ git push
❯ npm run deploy
```
先ほどのGithub Pagesの設定ページに戻ると、
Sourceでgh-pagesが選択できるようになっているため、
選択してsaveし、作成されたURLに再度アクセスします。

![スクリーンショット 2021-12-10 22.35.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1654510/2e4d62ae-547a-2d78-ae35-ada33ac752e1.png)

今度は無事公開することができました！

#まとめ
今回初めてGithub Pagesを利用しましたが、
静的サイトの場合は非常にスピーディに、しかも無料で公開できるため、
今後も使っていきたいと感じました！
初学者のため拙い文章ですが、今後も発信を続けていけたらと考えております。
お読み頂きありがとうございました！

#参考
[GitHub Pagesを使ったWebページでREADME.mdが初期表示されないようにする。 - Qiita](https://qiita.com/mogamoga1337/items/1752ec783d0fdc866a6a)
[ReactアプリをGitHub Pages(Project Pages)で公開する - Qiita](https://qiita.com/EisKern/items/15dcf7864fa49df8f247)