pnpmで管理しているWebフロントエンドをGitHub ActionsでGitHub Pagesにデプロイする

Posted at 2024-03-01

やりたいこと

pnpm でパッケージ管理をしている Web フロントエンドアプリケーションを、GitHub Actions を用いることで、main ブランチへ push されたタイミングで自動的にデプロイします。

前提

Ubuntu (22.04.4)
Node.js (20.11.1)
pnpm (8.15.4)

ディレクトリ構成

pnpm-ghpages-deploy/
├── .github/workflows/ghpages-deploy.yml
├── frontend/
├── .gitignore
├── LICENSE
└── README.md

プロジェクト作成

下記のコマンドでテンプレートの React アプリケーションを作成します。ビルドツールには Vite を採用しています。

pnpm create vite@latest --template react-swc-ts frontend

デプロイ先の URL は https://<user name>.github.io/<repository name>/ となるので、それに合わせてプロジェクトも変更します。
<user name> には GitHub のアカウント名（を小文字にしたもの）が、<repository name> には GitHub レポジトリの名前がそのまま入ります。
今回は https://yuki-imajuku.github.io/pnpm-ghpages-deploy/ となるので、以下のように設定を変更します。

frontend/vite.config.ts

export default defineConfig({
  plugins: [react()],
+ base: '/pnpm-ghpages-deploy/'
})

GitHub レポジトリの設定

Settings タブから設定画面を開き、Pages タブをクリックし、Build and deployment の Source という部分を Deploy from a branch から GitHub Actions に変更します。
設定が完了すると、以下のスクリーンショットのような画面になります。

GitHub Actions の設定

.github/workflows 以下に YAML ファイルを書くことで設定できます。
今回は ghpages-deploy.yml としました。
まず、全体像は以下の通りです。

ghpages-deploy.yml

name: GitHub Pages Deploy

on:
  push:
    branches:
      - main
    paths:
      - .github/workflows/ghpages-deploy.yml
      - frontend/**

jobs:
  build:
    runs-on: ubuntu-22.04

    defaults:
      run:
        working-directory: ./frontend

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20.11.1

      - name: Install pnpm
        uses: pnpm/action-setup@v3
        with:
          version: 8.15.4
          run_install: false

      - name: Get pnpm store directory
        shell: bash
        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV

      - name: Setup pnpm cache
        uses: actions/cache@v4
        with:
          path: ${{ env.STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: ${{ runner.os }}-pnpm-store-

      - name: Install dependencies
        run: pnpm install

      - name: Build
        run: pnpm run build

      - name: Upload Pages artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./frontend/dist

  deploy:
    needs: build

    permissions:
      pages: write
      id-token: write

    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    runs-on: ubuntu-22.04

    steps:
      - name: Deploy to GitHub Pages
        uses: actions/deploy-pages@v4
        id: deployment

それぞれ説明していきます。

名前
表示される名前です。
```
name: GitHub Pages Deploy
```
以下のスクリーンショットを見ると、名前が適用されている様子が分かります。
実行条件
main ブランチに push されたタイミングで実行します。
README.md など影響がないファイルを除外するために paths も設定しています。
```
on:
  push:
    branches:
      - main
    paths:
      - .github/workflows/ghpages-deploy.yml
      - frontend/**
```
以下のスクリーンショットを見ると、README.md だけ更新した場合は実行されていない様子が分かります。
ビルドジョブの設定
build というのがそのまま名前になります。
今回は Ubuntu 環境を使いました。
また、pnpm install などを行うため、frontend ディレクトリで run するように設定を書きます。
```
jobs:
  build:
    runs-on: ubuntu-22.04

    defaults:
      run:
        working-directory: ./frontend
```

ブランチのチェックアウト
actions/checkout を使います。

jobs:
  build:
    :
    steps:
      - name: Checkout
        uses: actions/checkout@v4

Node.js のインストール
actions/setup-node を使います。

jobs:
  build:
    :
    steps:
      :
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20.11.1

pnpm のインストール
pnpm/action-setup を使います。
公式の README にある通り、キャッシュを利用してインストール時間を短縮します。

jobs:
  build:
    :
    steps:
      :
      - name: Install pnpm
        uses: pnpm/action-setup@v3
        with:
          version: 8.15.4
          run_install: false

      - name: Get pnpm store directory
        shell: bash
        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV

      - name: Setup pnpm cache
        uses: actions/cache@v4
        with:
          path: ${{ env.STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: ${{ runner.os }}-pnpm-store-

    　- name: Install dependencies
        run: pnpm install

ビルド
frontend/package.json に設定してある通りビルドしていきます。

jobs:
  build:
    :
    steps:
      :
      - name: Build
        run: pnpm run build

ビルド済みのコードをアップロード
actions/upload-pages-artifact を使います。
path によってビルド済みのコードの格納場所を指定していきます。
working-directory で設定したパスは関係ないので、./frontend/ の部分から指定します。
```
jobs:
  build:
    :
    steps:
      :
      - name: Upload Pages artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./frontend/dist
```

デプロイジョブの設定
build ジョブが終了してから実行するようにします。こちらも Ubuntu 環境を使いました。
actions/deploy-pages の README にある通り、最小限の権限を付与します。

jobs:
  :
  deploy:
    needs: build

    permissions:
      pages: write
      id-token: write

    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    runs-on: ubuntu-22.04

GitHub Pages にデプロイ
actions/deploy-pages を使います。

jobs:
  :
  deploy:
    :
    steps:
      - name: Deploy to GitHub Pages
        uses: actions/deploy-pages@v4
        id: deployment

参考文献

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up