docs: add Cloudflare Pages deployment guide (#162)

Co-authored-by: Innei <tukon479@gmail.com>

Author: lawvs

apps/docs/contents/deployment/cloudflare-pages.mdx

@@ -1,6 +1,6 @@
 ---
 title: Cloudflare Pages
-description: Deploy your gallery to Cloudflare Pages for fast global CDN distribution.
+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
@@ -12,10 +12,20 @@ Cloudflare Pages provides fast, global static hosting with excellent CDN perform
 
 ## 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
@@ -28,13 +38,15 @@ Cloudflare Pages provides fast, global static hosting with excellent CDN perform
 ### 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
@@ -71,6 +83,7 @@ cwd = "."
 Set in Cloudflare Dashboard → Pages → Your Project → Settings → Environment Variables:
 
 **Storage (S3 example):**
+
 ```
 S3_ACCESS_KEY_ID
 S3_SECRET_ACCESS_KEY
@@ -79,6 +92,7 @@ S3_REGION
 ```
 
 **Production vs Preview:**
+
 - Set different variables for Production and Preview environments
 - Useful for testing with different storage buckets
 
@@ -93,6 +107,7 @@ S3_REGION
 ## Continuous Deployment
 
 Cloudflare Pages automatically:
+
 - **Production**: Deploys on push to main/master
 - **Preview**: Creates preview deployments for pull requests
 
@@ -101,6 +116,7 @@ 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)
@@ -109,6 +125,7 @@ Cloudflare Pages provides:
 ## Build Limits
 
 Free tier limits:
+
 - **Build time**: 20 minutes per build
 - **Builds per month**: 500
 - **Bandwidth**: 500 requests/second
@@ -118,24 +135,43 @@ 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/)

apps/web/package.json

@@ -11,6 +11,7 @@
     "analyze": "analyzer=1 vite build",
     "build": "tsx scripts/build.ts",
     "build:serve": "BUILD_FOR_SERVER_SERVE=1 vite build",
+    "deploy:cloudflare": "pnpm build && pnpx wrangler pages deploy",
     "dev": "tsx scripts/dev.ts",
     "format": "prettier --write \"src/**/*.ts\" ",
     "lint": "eslint --fix",