Evaluate CloudFlare Pages deployment feasibility#5
Evaluate CloudFlare Pages deployment feasibility#5jason-curtis wants to merge 8 commits intomainfrom
Conversation
- Install @opennextjs/cloudflare adapter and wrangler - Add wrangler.jsonc for Cloudflare Workers configuration - Create open-next.config.ts for OpenNext adapter settings - Update package.json with Cloudflare Pages build scripts - Configure static asset caching with public/_headers - Update .gitignore for Cloudflare build artifacts - Add comprehensive deployment documentation in CLOUDFLARE_DEPLOYMENT.md - Update README with Cloudflare Pages deployment information This enables free deployment to Cloudflare Pages with: - Unlimited developers (vs Vercel's single-user free tier) - 500 builds/month (sufficient for small teams) - Unlimited bandwidth - Full Next.js SSR support via Cloudflare Workers - Airtable API integration compatibility
Add post-build script to copy worker.js to _worker.js in assets directory. This ensures the Cloudflare Worker is deployed alongside static assets, enabling dynamic routes, API routes, and server-side rendering. - Add scripts/cloudflare-postbuild.sh to copy worker after build - Update pages:build script to run post-build step - Update deployment docs with correct build command
Cloudflare Pages automatic Git integration doesn't work correctly with OpenNext Cloudflare's build structure. Instead, use GitHub Actions to deploy via wrangler CLI, which properly handles the worker + assets. Changes: - Add .github/workflows/deploy-cloudflare-pages.yml for automated deployment - Update CLOUDFLARE_DEPLOYMENT.md with GitHub Actions setup instructions - Remove post-build script (no longer needed with CLI deployment) - Revert pages:build to standard OpenNext command This approach: - Deploys on push to main (production) - Creates preview deployments for PRs - Properly deploys both the Cloudflare Worker and static assets - Uses npx opennextjs-cloudflare deploy which handles everything correctly
Create a comprehensive post-build script that copies all worker dependencies into the assets directory, enabling Cloudflare Pages Git integration to properly bundle the worker. Changes: - Add scripts/prepare-cloudflare-git-deploy.sh to copy worker and dependencies - Add pages:build:git npm script for Git integration builds - Update CLOUDFLARE_DEPLOYMENT.md with three deployment options: 1. GitHub Actions (recommended for teams/CI) 2. Cloudflare Git Integration (simple setup) 3. Manual CLI (testing/one-off) - Add comparison table to help users choose deployment method The script copies: - worker.js → assets/_worker.js - cloudflare/ directory (images, init, skew-protection) - server-functions/ directory - middleware/ directory - .build/ directory This allows both GitHub Actions AND Cloudflare Git integration to work, giving users flexibility in deployment approach.
Update documentation to include compatibility flags configuration. Cloudflare Pages Git integration bundles the worker itself and needs the nodejs_compat flag to be set in the dashboard, not just in wrangler.jsonc. Required flags: - nodejs_compat (for Node.js built-ins like async_hooks, fs, path, etc.) - global_fetch_strictly_public (for fetch polyfills) - Compatibility date: 2024-09-23 or later These must be configured in: Cloudflare Dashboard > Pages Project > Settings > Functions > Compatibility flags
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
jason-curtis
changed the title
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
This PR is being reviewed by Cursor Bugbot
Details
You are on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle.
To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.
| "pages:build": "npx opennextjs-cloudflare build", | ||
| "pages:build:git": "npm run pages:build && bash scripts/prepare-cloudflare-git-deploy.sh", | ||
| "pages:preview": "npm run pages:build && npx opennextjs-cloudflare preview", | ||
| "pages:deploy": "npm run pages:build && npx opennextjs-cloudflare deploy" |
There was a problem hiding this comment.
Bug: Standardize Package Manager Usage
The pages:build:git, pages:preview, and pages:deploy scripts use npm run instead of pnpm run, creating a package manager inconsistency. The project uses pnpm everywhere else (install commands, documentation, GitHub workflow), so these scripts will fail if npm isn't installed or if the package-lock.json doesn't exist.
- Check if environment variables are set (showing partial values) - Test Cloudflare API token validity before deployment - Provide clear error messages for common authentication issues This will help diagnose the authentication error without exposing sensitive credentials in the logs.
| cd .open-next | ||
|
|
||
| echo " → Copying worker to assets/_worker.js" | ||
| cp worker.js assets/_worker.js |
There was a problem hiding this comment.
Bug: Directory Validation Prevents Cryptic Build Errors
The script attempts to copy worker.js to assets/_worker.js without verifying that the assets directory exists. With set -e enabled, the script will fail with a cryptic error if the assets directory is missing due to a partial build failure or changes in OpenNext's output structure. The script validates .open-next exists but doesn't check for or create the assets subdirectory before copying files into it.
| if [ -z "$CLOUDFLARE_ACCOUNT_ID" ]; then | ||
| echo "❌ CLOUDFLARE_ACCOUNT_ID is not set!" | ||
| else | ||
| echo "✅ CLOUDFLARE_ACCOUNT_ID is set: $CLOUDFLARE_ACCOUNT_ID" |
There was a problem hiding this comment.
Bug: Sensitive Account IDs Exposed in Logs
The workflow logs the full CLOUDFLARE_ACCOUNT_ID in plain text to GitHub Actions logs. While less sensitive than API tokens, account IDs are still considered sensitive information that could aid attackers in targeting specific accounts and should not be exposed in logs.
| body=$(echo "$response" | sed '/HTTP_CODE:/d') | ||
|
|
||
| echo "Response code: $http_code" | ||
| echo "Response body: $body" |
There was a problem hiding this comment.
Bug: Stop Logging Sensitive API Responses
The workflow logs the full API response body from Cloudflare's token verification endpoint, which may contain sensitive token metadata or account information that shouldn't be exposed in GitHub Actions logs accessible to repository collaborators.
| "https://api.cloudflare.com/client/v4/accounts/$CLOUDFLARE_ACCOUNT_ID/tokens/verify") | ||
|
|
||
| echo "Full token verification response:" | ||
| echo "$response" | jq '.' || echo "$response" |
There was a problem hiding this comment.
Bug: Sensitive Data Leaks in Public Logs
The workflow logs the complete token verification response which may contain sensitive token details, permissions, and metadata that shouldn't be exposed in publicly accessible GitHub Actions logs.
| account_body=$(echo "$account_response" | sed '/HTTP_CODE:/d') | ||
|
|
||
| echo "Account access response code: $account_http_code" | ||
| echo "$account_body" | jq '.' || echo "$account_body" |
There was a problem hiding this comment.
Bug: Sensitive Data Leak in Workflow Logs
The workflow logs the full account API response body which may contain sensitive account details, settings, and metadata beyond just the account name that shouldn't be exposed in GitHub Actions logs.
2 participants
Note
Adds Cloudflare Pages deployment using OpenNext with a GitHub Actions workflow, Wrangler config, build scripts, caching headers, and documentation.
/.github/workflows/deploy-cloudflare-pages.ymlwith credential checks, API verification, andpages:deploystep.open-next.config.ts) and Wrangler config (wrangler.jsonc).pages:*npm scripts andscripts/prepare-cloudflare-git-deploy.sh.public/_headers.@opennextjs/cloudflareandwrangler; updatepackage.jsonscripts.CLOUDFLARE_DEPLOYMENT.md; updateREADME.mdwith Cloudflare Pages deployment info..gitignorefor Cloudflare artifacts (.open-next/,.dev.vars,.wrangler/).Written by Cursor Bugbot for commit 8c1ae8c. This will update automatically on new commits. Configure here.