Remix で Panda CSS での開発のキャッチアップのために少しいじっていたときのメモ。

せっかくなので、デプロイ先も流行りの Cloudflare Pages にしてみたが、GitHub Actions でのデプロイの設定が少し手間だったのでそのときのメモ。

GitHub Actions の workflow

説明は省くが、次のような workflow を作成した。

name: Deploy to Cloudflare Pages

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: Build and Deploy
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "18.x"

      - name: Install Dependencies
        run: yarn install

      - name: Prepare for Build
        run: yarn prepare

      - name: Build Project
        run: yarn build

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy ./public --project-name=your-project-name

以下参考にさせていただいた記事／ページ。