無料！Reactで作ったサイトやアプリを公開・自動更新する方法【Github Pages】

{
  "name": "my-react-app",
  "version": "0.1.0",
  "homepage": "https://${ユーザ名}.github.io/${リポジトリ}", // ここに追加
  "dependencies": {
    // …省略
  },
  "scripts": {
    "deploy": "npm run build && gh-pages -d build", // ここに追加
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

"homepage": "https://${ユーザ名}.github.io/${リポジトリ}", // ここに追加

"deploy": "npm run build && gh-pages -d build", // ここに追加

name: github pages

on:
  pull_request:
    branches:
      - main
    types:
      - closed

jobs:
  deploy:
    runs-on: ubuntu-18.04
    env:
       working-directory: ./my-react-app
       SUPER_SECRET: ${{ secrets.SuperSecret }}
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: '16'

      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Install gh-pages
        run: npm i gh-pages --save-dev
        working-directory: ${{env.working-directory}}

      - name: Deploy with gh-pages
        working-directory: ${{env.working-directory}}
        run: |
          git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
          npm run deploy -- -u "github-actions-bot <support+actions@github.com>"
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

name: github pages # ワークフロー全体の名前

on:
  pull_request:
    branches:
      - main

    types:
      - closed

jobs:
  deploy:
    runs-on: ubuntu-18.04 # ubuntuを使う
    env:
       working-directory: ./my-react-app # my-react-appディレクトリのなか処理を行う
       SUPER_SECRET: ${{ secrets.SuperSecret }} # シークレットキーを使う
    steps:
      - uses: actions/checkout@v2 # ブランチをチェックアウトする

- name: Setup Node  # ワークフローの名前
  uses: actions/setup-node@v2 # setup-node@v2を使う設定
  with:
    node-version: '16' # Nodeのバージョン設定

- name: Cache dependencies
  uses: actions/cache@v2 # キャッシュを使うよ
  with:
    path: ~/.npm # npmの場所の指定
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} # 'package-lock.json'を設定
    restore-keys: | # キャッシュを見つけるために使われる代理キー
      ${{ runner.os }}-node- 

- name: Install gh-pages
  run: npm i gh-pages --save-dev # gh-pagesのインストール
  working-directory: ${{env.working-directory}} # gh-pagesをインストールするディレクトリの設定。上の方で設定したmy-react-appディレクトリの場所を呼び出しています。

- name: Deploy with gh-pages
  working-directory: ${{env.working-directory}} # 以下のコマンドを実行するディレクトリの設定
  run: | # 実行するコマンド（リポジトリの設定・デプロイ）
    git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
    npm run deploy -- -u "github-actions-bot <support+actions@github.com>"
  env:
    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # GITHUB_TOKENの設定

git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git

npm run deploy -- -u "github-actions-bot <support+actions@github.com>"