chore(infra): migrate desktop web to Cloudflare (#4869)

* chore(infra): migrate desktop web from Vercel to Cloudflare Workers

Replaces separate Vercel deployments (follow SPA + follow-external-ssr) with unified Cloudflare Workers + Assets deployment. Implements meta tag injection, OG image generation, and environment variable management in Hono-based Worker. Adds GitHub Actions CI/CD for automatic deployment on push to dev/main branches.

- Replace Fastify with Hono for Cloudflare Workers compatibility
- Create Worker entry point with SSR routes and SPA fallback
- Add AsyncLocalStorage-based request context shim
- Implement WASM-based OG image rendering with R2 font storage
- Split SPA and SSR routing: /share/* and auth routes use SSR, others fallback to SPA
- Add Cloudflare wrangler configuration with dev/prod environments
- Create GitHub Actions workflow for automated deployments
- Add build scripts for font data and WASM patching

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(ssr): exclude worker files from typecheck and fix tsdown config

Worker-specific files (*.worker.ts) use Cloudflare Workers types and
generated modules that aren't available during the main tsc typecheck.
Exclude them from tsconfig since they're only used via tsdown aliases.
Also fix broken path.resolve reference in tsdown.worker.config.ts.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: DIYgod

.github/workflows/deploy-cloudflare.yml

@@ -0,0 +1,70 @@
+on:
+  push:
+    branches: [main, dev]
+
+name: ☁️ Deploy to Cloudflare Workers
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+jobs:
+  deploy:
+    name: Build & Deploy
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [lts/*]
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+        with:
+          lfs: true
+
+      - name: Checkout LFS objects
+        run: git lfs checkout
+
+      - name: Cache turbo build setup
+        uses: actions/cache@v5
+        with:
+          path: .turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
+
+      - uses: pnpm/action-setup@v4
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v6
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build desktop web (SPA)
+        run: pnpm exec turbo run Folo#build:web
+
+      - name: Build SSR Worker
+        working-directory: apps/ssr
+        run: pnpm run build:worker
+
+      - name: Copy WASM file
+        run: cp node_modules/@resvg/resvg-wasm/index_bg.wasm apps/ssr/dist/worker/resvg.wasm
+
+      - name: Deploy to Cloudflare (dev)
+        if: github.ref == 'refs/heads/dev'
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          workingDirectory: apps/ssr
+          command: deploy --env dev
+
+      - name: Deploy to Cloudflare (prod)
+        if: github.ref == 'refs/heads/main'
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          workingDirectory: apps/ssr
+          command: deploy

.gitignore

@@ -29,3 +29,5 @@ apps/desktop/build/appxmanifest.xml
 
 .claude/settings.local.json
 .serena
+
+.wrangler

apps/ssr/package.json

@@ -4,6 +4,9 @@
   "private": true,
   "scripts": {
     "build": "cross-env NODE_ENV=production vite build && tsx scripts/prepare-vercel-build.ts && tsdown && tsx scripts/cleanup-vercel-build.ts",
+    "build:worker": "cross-env NODE_ENV=production vite build && tsx scripts/prepare-vercel-build.ts && tsx scripts/generate-font-data.ts && tsdown --config tsdown.worker.config.ts && tsx scripts/patch-worker-build.ts && cp -r dist/dist-external ../desktop/out/web/dist-external",
+    "deploy:dev": "wrangler deploy --env dev",
+    "deploy:prod": "wrangler deploy",
     "dev": "cross-env NODE_ENV=development tsx watch --include \"src/**/*.ts\" --exclude \"./*.ts\" --exclude \"./*.mjs\" index.ts",
     "meta": "tsx helper/meta-map.ts --watch",
     "start": "tsx index.ts",
@@ -54,6 +57,7 @@
     "@follow/shared": "workspace:*",
     "@follow/types": "workspace:*",
     "@follow/utils": "workspace:*",
+    "@resvg/resvg-wasm": "2.6.2",
     "@types/html-minifier-terser": "7.0.2",
     "chokidar": "4.0.3",
     "code-inspector-plugin": "1.4.2",
@@ -62,6 +66,7 @@
     "es-toolkit": "1.44.0",
     "fast-glob": "3.3.3",
     "foxact": "0.2.52",
+    "hono": "4.12.1",
     "html-minifier-terser": "7.2.0",
     "lightningcss": "1.31.1",
     "masonic": "4.1.0",
@@ -72,6 +77,7 @@
     "tsx": "4.21.0",
     "typescript": "catalog:",
     "vite": "7.3.1",
-    "vite-plugin-route-builder": "0.4.1"
+    "vite-plugin-route-builder": "0.4.1",
+    "wrangler": "4.67.0"
   }
 }

apps/ssr/scripts/check-fonts.ts

@@ -0,0 +1,20 @@
+import fs from "node:fs"
+import { createRequire } from "node:module"
+
+import path, { resolve } from "pathe"
+
+const require = createRequire(import.meta.url)
+
+const snPath = require.resolve("@fontsource/sn-pro")
+const filesDir = resolve(snPath, "../files")
+const files = fs.readdirSync(filesDir).filter((f) => !f.endsWith(".woff2") && !f.includes("italic"))
+files.forEach((f) => {
+  const stat = fs.statSync(path.join(filesDir, f))
+  console.info(f, `${(stat.size / 1024).toFixed(1)}KB`)
+})
+const kosePath = require.resolve("kose-font")
+const koseSize = fs.statSync(kosePath).size
+console.info(`kose-font: ${(koseSize / 1024).toFixed(1)}KB`)
+let total = files.reduce((sum, f) => sum + fs.statSync(path.join(filesDir, f)).size, 0)
+total += koseSize
+console.info(`Total: ${(total / 1024 / 1024).toFixed(1)}MB`)

apps/ssr/scripts/generate-font-data.ts

@@ -0,0 +1,46 @@
+import fs from "node:fs"
+import { createRequire } from "node:module"
+import { fileURLToPath } from "node:url"
+
+import path, { dirname, resolve } from "pathe"
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const require = createRequire(import.meta.url)
+
+const weights = [
+  { name: "Thin", weight: 100 },
+  { name: "ExtraLight", weight: 200 },
+  { name: "Light", weight: 300 },
+  { name: "Regular", weight: 400 },
+  { name: "Italic", weight: 400 },
+  { name: "Medium", weight: 500 },
+  { name: "SemiBold", weight: 600 },
+  { name: "Bold", weight: 700 },
+  { name: "ExtraBold", weight: 800 },
+  { name: "Black", weight: 900 },
+] as const
+
+const snFontDepsPath = require.resolve("@fontsource/sn-pro")
+const snFontsDirPath = resolve(snFontDepsPath, "../files")
+const snFontsDir = fs
+  .readdirSync(snFontsDirPath)
+  .filter((name) => !name.endsWith(".woff2") && !name.includes("italic"))
+
+const fontsData: Record<string, string> = {}
+
+for (const file of snFontsDir) {
+  const weight = weights.find((w) => file.includes(w.weight.toString()))
+  if (!weight) continue
+  const data = fs.readFileSync(path.join(snFontsDirPath, file))
+  fontsData[`sn-pro-${weight.weight}`] = data.toString("base64")
+}
+
+// kose-font is too large (~24MB) to bundle, loaded from R2 at runtime instead
+
+const outDir = path.join(__dirname, "../.generated")
+fs.mkdirSync(outDir, { recursive: true })
+fs.writeFileSync(
+  path.join(outDir, "fonts-data.ts"),
+  `export default ${JSON.stringify(fontsData)} as Record<string, string>`,
+)
+console.info("Generated fonts-data.ts with", Object.keys(fontsData).length, "fonts")

apps/ssr/scripts/patch-worker-build.ts

@@ -0,0 +1,24 @@
+import fs from "node:fs"
+
+import { dirname, join } from "pathe"
+
+const distDir = join(dirname(import.meta.url.replace("file://", "")), "../dist/worker")
+
+const files = fs.readdirSync(distDir).filter((f) => f.endsWith(".mjs"))
+
+for (const file of files) {
+  const filePath = join(distDir, file)
+  const code = fs.readFileSync(filePath, "utf-8")
+
+  // Fix createRequire(import.meta.url) - import.meta.url is undefined in Cloudflare Workers
+  // Provide a fallback URL so createRequire can initialize properly
+  const patched = code.replaceAll(
+    "createRequire(import.meta.url)",
+    'createRequire(import.meta.url || "file:///worker.mjs")',
+  )
+
+  if (patched !== code) {
+    fs.writeFileSync(filePath, patched)
+    console.info(`Patched createRequire in ${file}`)
+  }
+}

apps/ssr/scripts/upload-fonts-to-r2.ts

@@ -0,0 +1,36 @@
+import { execSync } from "node:child_process"
+import fs from "node:fs"
+import { createRequire } from "node:module"
+
+import path, { resolve } from "pathe"
+
+const require = createRequire(import.meta.url)
+
+const BUCKET = "follow"
+const PREFIX = "ssr-fonts"
+const ACCOUNT_ID = "1f1d1678a2413a54c944b3081bab5c84"
+
+const snFontDepsPath = require.resolve("@fontsource/sn-pro")
+const snFontsDirPath = resolve(snFontDepsPath, "../files")
+const snFontsDir = fs
+  .readdirSync(snFontsDirPath)
+  .filter((name) => !name.endsWith(".woff2") && !name.includes("italic"))
+
+for (const file of snFontsDir) {
+  const filePath = path.join(snFontsDirPath, file)
+  const key = `${PREFIX}/${file}`
+  console.info(`Uploading ${file}...`)
+  execSync(
+    `CLOUDFLARE_ACCOUNT_ID=${ACCOUNT_ID} npx wrangler r2 object put ${BUCKET}/${key} --file "${filePath}" --remote`,
+    { stdio: "inherit" },
+  )
+}
+
+const koseFontPath = require.resolve("kose-font")
+console.info("Uploading kose-font.ttf...")
+execSync(
+  `CLOUDFLARE_ACCOUNT_ID=${ACCOUNT_ID} npx wrangler r2 object put ${BUCKET}/${PREFIX}/kose-font.ttf --file "${koseFontPath}" --remote`,
+  { stdio: "inherit" },
+)
+
+console.info("All fonts uploaded successfully!")

apps/ssr/src/lib/load-env.worker.ts

@@ -0,0 +1,2 @@
+// No-op for Cloudflare Workers - environment variables are provided via wrangler config
+export {}

apps/ssr/src/lib/og/fonts.worker.ts

@@ -0,0 +1,66 @@
+import fontsBase64Data from "../../../.generated/fonts-data"
+
+let cachedFonts: any[] | null = null
+let koseFont: any | null = null
+
+// Global reference to R2 bucket, set by worker-entry.ts
+let _fontsBucket: R2Bucket | null = null
+export function setFontsBucket(bucket: R2Bucket) {
+  _fontsBucket = bucket
+}
+
+function decodeSNProFonts(): any[] {
+  const fontsData: any[] = []
+  for (const [key, base64] of Object.entries(fontsBase64Data)) {
+    if (key === "kose-400") continue
+    const weightStr = key.split("-").pop()!
+    const weight = Number.parseInt(weightStr)
+    const buf = Uint8Array.from(atob(base64), (c) => c.codePointAt(0)!)
+    fontsData.push({
+      name: "SN Pro",
+      data: buf.buffer,
+      weight,
+      style: "normal" as const,
+    })
+  }
+  return fontsData
+}
+
+async function loadKoseFont(): Promise<any | null> {
+  if (koseFont) return koseFont
+  if (!_fontsBucket) {
+    console.warn("R2 fonts bucket not configured, skipping kose-font")
+    return null
+  }
+  try {
+    const obj = await _fontsBucket.get("ssr-fonts/kose-font.ttf")
+    if (!obj) {
+      console.warn("Kose font not found in R2")
+      return null
+    }
+    const data = await obj.arrayBuffer()
+    koseFont = {
+      name: "Kose",
+      data,
+      weight: 400,
+      style: "normal" as const,
+    }
+    return koseFont
+  } catch (e) {
+    console.error("Failed to load kose font from R2:", e)
+    return null
+  }
+}
+
+export async function getFonts(): Promise<any[]> {
+  if (cachedFonts) return cachedFonts
+
+  const snProFonts = decodeSNProFonts()
+  const kose = await loadKoseFont()
+
+  cachedFonts = kose ? [...snProFonts, kose] : snProFonts
+  return cachedFonts
+}
+
+// Default export for compatibility with original fonts module API
+export default [] as any[]

apps/ssr/src/lib/og/render-to-image.worker.ts

@@ -0,0 +1,33 @@
+import type { ReactElement } from "react"
+import type { SatoriOptions } from "satori"
+import satori from "satori"
+
+import { getFonts } from "./fonts.worker"
+import { ensureInitialized, Resvg } from "./resvg-wasm-shim"
+
+export async function renderToImage(
+  node: ReactElement,
+  options: {
+    width?: number
+    height: number
+    debug?: boolean
+    fonts?: SatoriOptions["fonts"]
+  },
+) {
+  await ensureInitialized()
+
+  const fonts = options.fonts || (await getFonts())
+
+  const svg = await satori(node, {
+    ...options,
+    fonts,
+  })
+
+  const w = new Resvg(svg)
+  const image = w.render().asPng()
+
+  return {
+    image,
+    contentType: "image/png",
+  }
+}