Cloudflare 全栈部署流程

浏览器
  |
  | 访问页面
  v
Cloudflare Pages: example.com
  |
  | fetch API
  v
Cloudflare Zero Trust Tunnel: api.example.com
  |
  v
内网后端服务
  |
  | 生成短期签名媒体 URL
  v
Cloudflare Worker: media.example.com
  |
  | 校验 exp + sig
  v
Cloudflare R2 私有 Bucket

<tunnel-id>.cfargotunnel.com

media.example.com/*

npm install
npm run build

npx wrangler pages deploy dist

npx wrangler login

example.com

https://api.example.com

uploads/sha256/<hash>.mp3
images/sha256/<hash>.webp

https://api.example.com/api/files/1/download
https://api.example.com/api/files/1/cover

https://media.example.com/uploads/example.mp3?exp=1717000000&sig=...

api.example.com -> http://localhost:<backend-port>

openssl rand -hex 32

npx wrangler secret put MEDIA_SIGNING_SECRET

name = "media-gateway"
main = "src/index.js"
compatibility_date = "2026-05-30"
workers_dev = false
preview_urls = false

[vars]
MEDIA_ALLOWED_ORIGIN = "https://example.com"

[[r2_buckets]]
binding = "MEDIA_BUCKET"
bucket_name = "app-media"

export default {
  async fetch(request, env) {
    const allowedOrigin = env.MEDIA_ALLOWED_ORIGIN;

    if (request.method === "OPTIONS") {
      return cors(null, allowedOrigin);
    }

    if (request.method !== "GET" && request.method !== "HEAD") {
      return cors(new Response("Method Not Allowed", { status: 405 }), allowedOrigin);
    }

    if (!env.MEDIA_BUCKET || !env.MEDIA_SIGNING_SECRET) {
      return cors(new Response("Server configuration error", { status: 500 }), allowedOrigin);
    }

    const url = new URL(request.url);
    const exp = url.searchParams.get("exp");
    const sig = url.searchParams.get("sig");

    // 签名 URL 必须同时携带过期时间和签名
    if (!exp || !sig) {
      return cors(new Response("Forbidden", { status: 403 }), allowedOrigin);
    }

    const expires = Number(exp);
    const now = Math.floor(Date.now() / 1000);

    // 过期 URL 直接拒绝，避免媒体链接长期有效
    if (!Number.isFinite(expires) || now > expires) {
      return cors(new Response("Expired", { status: 403 }), allowedOrigin);
    }

    // 后端和 Worker 使用同一套签名规则：pathname + 换行 + exp
    const payload = `${url.pathname}\n${exp}`;
    const expected = await hmacHex(env.MEDIA_SIGNING_SECRET, payload);

    if (!timingSafeEqual(sig, expected)) {
      return cors(new Response("Forbidden", { status: 403 }), allowedOrigin);
    }

    const key = objectKeyFromPath(url.pathname);
    if (!key) {
      return cors(new Response("Forbidden", { status: 403 }), allowedOrigin);
    }

    const object = request.method === "HEAD"
      ? await env.MEDIA_BUCKET.head(key)
      : await env.MEDIA_BUCKET.get(key);

    if (!object) {
      return cors(new Response("Not found", { status: 404 }), allowedOrigin);
    }

    const headers = mediaHeaders(object, allowedOrigin);

    if (request.method === "HEAD") {
      headers.set("content-length", String(object.size));
      return new Response(null, { status: 200, headers });
    }

    return new Response(object.body, { status: 200, headers });
  },
};

function objectKeyFromPath(pathname) {
  try {
    const key = decodeURIComponent(pathname.replace(/^\/+/, ""));

    // 防止把 URL path 解析成目录穿越路径
    if (!key || key.includes("..") || key.includes("\\")) return "";

    return key;
  } catch {
    return "";
  }
}

function mediaHeaders(object, allowedOrigin) {
  const headers = new Headers();

  object.writeHttpMetadata(headers);
  headers.set("etag", object.httpEtag);
  headers.set("cache-control", "private, max-age=300");
  headers.set("access-control-allow-origin", allowedOrigin);
  headers.set("access-control-expose-headers", "Content-Length, ETag, Content-Type");

  return headers;
}

function cors(response, allowedOrigin) {
  const headers = new Headers(response?.headers);

  headers.set("access-control-allow-origin", allowedOrigin);
  headers.set("access-control-allow-methods", "GET, HEAD, OPTIONS");
  headers.set("access-control-allow-headers", "Range, Content-Type");

  return new Response(response?.body ?? null, {
    status: response?.status ?? 204,
    statusText: response?.statusText,
    headers,
  });
}

async function hmacHex(secret, payload) {
  const encoder = new TextEncoder();
  const key = await crypto.subtle.importKey(
    "raw",
    encoder.encode(secret),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["sign"],
  );

  const signature = await crypto.subtle.sign("HMAC", key, encoder.encode(payload));

  return [...new Uint8Array(signature)]
    .map((byte) => byte.toString(16).padStart(2, "0"))
    .join("");
}

function timingSafeEqual(a, b) {
  if (a.length !== b.length) return false;

  let diff = 0;
  for (let i = 0; i < a.length; i += 1) {
    diff |= a.charCodeAt(i) ^ b.charCodeAt(i);
  }

  return diff === 0;
}

npx wrangler deploy

前端来源: https://example.com
API 域名: https://api.example.com
媒体域名: https://media.example.com

ALLOWED_ORIGIN="https://example.com"

MEDIA_ALLOWED_ORIGIN="https://example.com"

npm install
npm run build
npx wrangler pages deploy dist

npm install
npx wrangler secret put MEDIA_SIGNING_SECRET
npx wrangler deploy

go run ./cmd/server

npm install
npm run start