fix: deploy website previews via GitHub Actions instead of Vercel auto-deploy

Vercel's 'Skip deployments when no changes' feature treats files
outside workspace packages (e.g. browser_tests/, src/) as global
changes, triggering website preview builds on every PR.

- Add GitHub Action with paths filter scoped to apps/website/,
  packages/design-system/, and packages/tailwind-utils/
- Add vercel.json to disable Vercel's automatic GitHub integration
- Preview deployments only trigger when website-relevant files change
- Production deployments trigger on push to main

Requires adding VERCEL_TOKEN, VERCEL_ORG_ID, and
VERCEL_WEBSITE_PROJECT_ID to GitHub repo secrets.
This commit is contained in:
bymyself
2026-04-15 18:32:09 -07:00
parent e34548724d
commit 3b413abb00
2 changed files with 96 additions and 0 deletions

View File

@@ -0,0 +1,91 @@
---
name: 'CI: Vercel Website Preview'
on:
pull_request:
types: [opened, synchronize, reopened]
paths:
- 'apps/website/**'
- 'packages/design-system/**'
- 'packages/tailwind-utils/**'
push:
branches: [main]
paths:
- 'apps/website/**'
- 'packages/design-system/**'
- 'packages/tailwind-utils/**'
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_WEBSITE_PROJECT_ID }}
jobs:
deploy-preview:
if: github.event_name == 'pull_request'
runs-on: ubuntu-latest
permissions:
contents: read
pull-requests: write
steps:
- name: Checkout repository
uses: actions/checkout@v6
- name: Install Vercel CLI
run: npm install --global vercel@latest
- name: Pull Vercel environment information
run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
- name: Build project artifacts
run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
- name: Deploy project artifacts to Vercel
id: deploy
run: |
URL=$(vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }})
echo "url=$URL" >> "$GITHUB_OUTPUT"
- name: Comment preview URL on PR
uses: actions/github-script@v8
with:
script: |
const body = `**Website Preview:** ${process.env.PREVIEW_URL}`
const { data: comments } = await github.rest.issues.listComments({
owner: context.repo.owner,
repo: context.repo.repo,
issue_number: context.issue.number,
})
const existing = comments.find(
(c) => c.user?.type === 'Bot' && c.body?.includes('**Website Preview:**')
)
const params = {
owner: context.repo.owner,
repo: context.repo.repo,
body,
}
if (existing) {
await github.rest.issues.updateComment({ ...params, comment_id: existing.id })
} else {
await github.rest.issues.createComment({ ...params, issue_number: context.issue.number })
}
env:
PREVIEW_URL: ${{ steps.deploy.outputs.url }}
deploy-production:
if: github.event_name == 'push'
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v6
- name: Install Vercel CLI
run: npm install --global vercel@latest
- name: Pull Vercel environment information
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
- name: Build project artifacts
run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
- name: Deploy project artifacts to Vercel
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}