mirror of
https://github.com/Afilmory/afilmory
synced 2026-04-24 23:05:05 +00:00
178 lines
4.5 KiB
Plaintext
178 lines
4.5 KiB
Plaintext
---
|
|
title: Cloudflare Pages
|
|
description: Guide to deploying Afilmory via Cloudflare Pages.
|
|
createdAt: 2025-07-20T22:35:03+08:00
|
|
lastModified: 2025-11-23T19:40:52+08:00
|
|
order: 53
|
|
---
|
|
|
|
# Cloudflare Pages Deployment
|
|
|
|
Cloudflare Pages provides fast, global static hosting with excellent CDN performance. Perfect for static gallery deployments.
|
|
|
|
## Prerequisites
|
|
|
|
You need to upload your images to an OSS (Object Storage Service) like AWS S3 or Cloudflare R2 before deploying.
|
|
|
|
- Cloudflare account (free tier available)
|
|
- GitHub or GitLab repository
|
|
- Photos processed with builder
|
|
|
|
## Quick Deploy
|
|
|
|
Run the following command to build and deploy your application to Cloudflare Pages:
|
|
|
|
```bash
|
|
pnpm --filter=@afilmory/web deploy:cloudflare
|
|
```
|
|
|
|
## Deployment Steps
|
|
|
|
### Step 1: Connect Repository
|
|
|
|
1. Go to [Cloudflare Dashboard](https://dash.cloudflare.com)
|
|
2. Navigate to Pages → Create a project
|
|
3. Connect your GitHub/GitLab repository
|
|
4. Select the repository and branch
|
|
|
|
### Step 2: Configure Build Settings
|
|
|
|
**Build configuration:**
|
|
|
|
- **Framework preset**: Vite
|
|
- **Build command**: `pnpm run build:manifest && pnpm --filter web build`
|
|
- **Build output directory**: `apps/web/dist`
|
|
- **Root directory**: (leave empty, or set to project root)
|
|
|
|
**Environment variables:**
|
|
Add your storage credentials:
|
|
|
|
```
|
|
S3_ACCESS_KEY_ID=your_key
|
|
S3_SECRET_ACCESS_KEY=your_secret
|
|
S3_BUCKET_NAME=your_bucket
|
|
S3_REGION=us-east-1
|
|
```
|
|
|
|
### Step 3: Deploy
|
|
|
|
1. Click "Save and Deploy"
|
|
2. Cloudflare Pages will:
|
|
- Install dependencies
|
|
- Run builder to generate thumbnails and manifest
|
|
- Build the static site
|
|
- Deploy to Cloudflare's global CDN
|
|
|
|
## Build Configuration
|
|
|
|
### Using wrangler.toml (Optional)
|
|
|
|
Create `apps/web/wrangler.toml`:
|
|
|
|
```toml
|
|
name = "afilmory-gallery"
|
|
compatibility_date = "2024-01-01"
|
|
|
|
[build]
|
|
command = "pnpm run build:manifest && pnpm --filter web build"
|
|
cwd = "."
|
|
```
|
|
|
|
### Environment Variables
|
|
|
|
Set in Cloudflare Dashboard → Pages → Your Project → Settings → Environment Variables:
|
|
|
|
**Storage (S3 example):**
|
|
|
|
```
|
|
S3_ACCESS_KEY_ID
|
|
S3_SECRET_ACCESS_KEY
|
|
S3_BUCKET_NAME
|
|
S3_REGION
|
|
```
|
|
|
|
**Production vs Preview:**
|
|
|
|
- Set different variables for Production and Preview environments
|
|
- Useful for testing with different storage buckets
|
|
|
|
## Custom Domain
|
|
|
|
1. Go to Pages → Your Project → Custom domains
|
|
2. Add your domain
|
|
3. Configure DNS:
|
|
- Add CNAME record pointing to Cloudflare Pages
|
|
- Cloudflare will automatically provision SSL
|
|
|
|
## Continuous Deployment
|
|
|
|
Cloudflare Pages automatically:
|
|
|
|
- **Production**: Deploys on push to main/master
|
|
- **Preview**: Creates preview deployments for pull requests
|
|
|
|
Each deployment gets a unique URL.
|
|
|
|
## Performance Features
|
|
|
|
Cloudflare Pages provides:
|
|
|
|
- **Global CDN**: Fast delivery worldwide
|
|
- **Automatic compression**: Gzip and Brotli
|
|
- **Image optimization**: Automatic image optimization (Pro plan)
|
|
- **Cache control**: Intelligent caching headers
|
|
|
|
## Build Limits
|
|
|
|
Free tier limits:
|
|
|
|
- **Build time**: 20 minutes per build
|
|
- **Builds per month**: 500
|
|
- **Bandwidth**: 500 requests/second
|
|
|
|
Upgrade to Pro for higher limits.
|
|
|
|
## Troubleshooting
|
|
|
|
**Build failures:**
|
|
|
|
- Check build logs in Cloudflare Dashboard
|
|
- Verify all environment variables are set
|
|
- Ensure `builder.config.ts` is correct
|
|
- Check storage credentials
|
|
|
|
**Missing photos:**
|
|
|
|
- Verify thumbnails and manifest are in build output
|
|
- Check file paths are correct
|
|
- Ensure storage is accessible during build
|
|
|
|
**Slow builds:**
|
|
|
|
- Use repo cache plugin to avoid full rebuilds
|
|
- Optimize storage access
|
|
- Consider reducing photo count
|
|
|
|
## Limitations
|
|
|
|
Deploying the `web` app directly to Cloudflare Pages results in a static site. This means you will lose server-side features provided by the `ssr` application (Next.js), such as:
|
|
|
|
- **Dynamic Open Graph (OG) Images**: Social media preview cards will not be generated dynamically.
|
|
|
|
- **Share/Iframe Support**: Specific sharing functionality that relies on server-side rendering may not work as expected.
|
|
|
|
To support these features on Cloudflare, you would need to deploy the `ssr` application using a Cloudflare Workers adapter for Next.js (e.g., `@opennextjs/cloudflare`), which adds significant complexity to the deployment process.
|
|
|
|
## Next Steps
|
|
|
|
- Configure custom domain
|
|
- Set up monitoring
|
|
- Optimize build performance
|
|
- Review [Cloudflare Pages documentation](https://developers.cloudflare.com/pages)
|
|
|
|
## Learn more
|
|
|
|
- [Commands - Wrangler](https://developers.cloudflare.com/workers/wrangler/commands/#deploy-1)
|
|
|
|
- [Deploy a Next.js project on Workers - Cloudflare Docs](https://developers.cloudflare.com/workers/framework-guides/web-apps/nextjs/)
|