やりたいこと
pnpm でパッケージ管理をしている Web フロントエンドアプリケーションを、GitHub Actions を用いることで、main ブランチへ push されたタイミングで自動的にデプロイします。
前提
こちらの GitHub レポジトリ も参照してください。
- 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/ となるので、以下のように設定を変更します。
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 としました。
まず、全体像は以下の通りです。
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