ReactアプリをGitHub Pagesに公開してみよう！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/f1787892-02d9-c6a5-258c-c12a0d349470.png)


# はじめに
Reactアプリを、[GitHub Pages](https://pages.github.com/)にデプロイする手順を簡単にまとめます！
開発環境は、下記の通りです。現時点での最新バーションです。（2022年3月21日）
また、今回はターミナルを使わずにGitHub Desktopを使ってcommit, pushを行います。
事前に、[GitHub Desktop](https://desktop.github.com/)のインストールもお願いします。

```:開発環境
$ node --version
v16.14.0

$ npm --version
v8.3.0

$ git --version
v2.34.0
```

# １，ローカルにReactアプリケーションを作成

```
$ npx create-react-app my-project
$ cd my-project
$ code .
```
下記ディレクトリ構造となっています。
特に変更など加えていないのでこのまま進めていきます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/90aeff89-cb5f-bb18-0393-de8ba7efd3cd.png)

# ２，GitHubにRepositoryを作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/9d86e18c-7436-238e-8ca4-d1d8783ff096.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/ccd09c9a-ca11-31c6-3730-9600f7d88f64.png)

上記自動生成されたコマンドをターミナルにコピペして実行すると、

**ローカルのReactアプリ** が **GitHubのRepository** にpushされます。


```
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/iwasaki-hub/my-project.git
git push -u origin main
```
Repositoryにpushされましたね！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/7da166cf-a5f5-c9e4-708a-42eeecbafb90.png)





# ３，ローカルのReactアプリをGitHub Desktopに追加します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/2071abc2-81d7-b367-5635-96cd0c419544.png)

**Add an Existing Repository from your hard drive...** から、作成したフォルダを選択してください。
**Current repository** に作成したフォルダ名が記載されていれば大丈夫です。
これで、GitHub DesktopとGitHubアカウントが連携しました。

[➪GitHub Desktopのインストール方法](https://docs.github.com/ja/desktop/installing-and-configuring-github-desktop/installing-and-authenticating-to-github-desktop/installing-github-desktop)
[➪GitHubとGitHub Desktopの連携](https://docs.github.com/ja/desktop/installing-and-configuring-github-desktop/installing-and-authenticating-to-github-desktop/authenticating-to-github)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/13b59b10-1949-4a7e-5b4c-a09b82b812d2.png)

# ４，ローカルのReactアプリにgh-pagesパッケージをインストール

gh-pagesパッケージをインストールします。

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

インストールしたら、package.jsonに３行追記します。（//追加　部分）

>"homepage": "http://(Githubのアカウント名).github.io/(GitHubのRepository名)",　//追記
...
"predeploy": "npm run build",　//追記
"deploy": "gh-pages -d build",　//追記
...

```json:package.json
{
  "homepage": "http://(Githubのアカウント名).github.io/(GitHubのRepository名)",　//追記
  "name": "my-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "predeploy": "npm run build",　//追記
    "deploy": "gh-pages -d build",　//追記
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "gh-pages": "^3.2.3"
  }
}
```

変更を加えたのでRepositoryに commit , pushします。

GitHub Desktopに移動して、コメントにFirst commitを記述して、Commit to mainボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/5bf74ad3-2c91-ccab-5441-e2fb9d0e436b.png)

すると、右上にPush originが表示されるのでそちらをクリックすると、簡単にpushできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/9d7aa73c-2732-5bef-844d-9ea53fc8005c.png)

ターミナルに戻って、下記のコマンドを入力しましょう。

```
npm run deploy
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/a41b46ac-eec6-3f90-4119-146d1925971c.png)

これで、Publishedしました。

# ５，最後に、Settingのみです。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/1ae1fe11-cecc-21b3-5a77-9bd005968a02.png)

RepositoryのSettingから、左下のPagesに移動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/78a7bfbe-64b3-bff8-ec78-9bf1026c1148.png)

Branchをgh-pagesに選択して、Saveすると設定完了です。

みどりのエリアに表示されているURLをクリックしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/5ea62de8-89b8-6600-5471-3548e0c489bb.png)


# ６，Deploy完了

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/b0b1aaad-07a2-2812-9a56-459c33578734.png)

# まとめ
今回は、GitHub Desktopも使って、簡単にcommit, pushを行うことができました！


参考動画

https://youtu.be/Q9n2mLqXFpU