Reactのプロジェクトをgithub pagesに自動デプロイする

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

使用するツール・環境

• Node.js / npm
• React
• GitHub アカウント

手順概要

1. リポジトリをGitHubに作成
2. Reactアプリに gh-pages パッケージを導入
3. package.json を設定
4. アプリをビルドしてデプロイ
5. GitHub Pagesで公開設定

1. リポジトリをGitHubに作成

ここは省略

2. gh-pages をインストール

リポジトリをクローンし、プロジェクトのルート直下で以下を実行します。

npm install gh-pages --save-dev

3. package.json を編集

package.jsonのなかにhomepage を追加

GitHubのユーザー名とリポジトリ名に置き換えて設定します。

"homepage": "https://ユーザー名.github.io/リポジトリ名"

scripsのなかに以下を追加

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

.github/workflows/deploy.ymlを作成

プロジェクトのルートで

mkdir -p .github/workflows && touch .github/workflows/deploy.yml

を実行。

作成されたdeploy.ymlのなかには

name: Deploy React App to GitHub Pages

on:
  push:
    branches:
      - main  # ← 必要に応じて変更（開発しているブランチ）

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout source code
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: npm install

      - name: Deploy to GitHub Pages
        run: npm run deploy
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

を書き込みます。適宜開発ブランチを選択してあげてください。

github pagesの設定

GitHubでリポジトリを開いたら

「Settings」 → 「Pages」

「Build and deployment」→ 「Source」を「Deploy from a branch」に設定

「Branch」は gh-pages を選択

おわり

これでmain ブランチにpushすると、GitHub Actionsがビルド→gh-pagesブランチにデプロイしてくれるようになります。