edge-commerce

边缘商务

概述

边缘计算会在距离每位用户最近的 CDN PoP 中执行代码，将延迟从数百毫秒（往返中央源站）降低到 50ms 以下。对于电子商务，这可以实现地理路由（将英国用户重定向到英国店面）、边缘侧个性化（将用户等级注入缓存页面）、无需往返源站的即时 A/B 测试，以及通过边缘 KV 存储实现分布式库存缓存。

何时使用此技能

• 经中央源站路由的页面对国际用户而言 TTFB 较高（>300ms）时
• 需要将用户重定向到特定地区的店面或本地化产品目录时
• 希望运行 A/B 测试，又不想添加会延迟页面渲染的 JavaScript 时
• 构建多区域部署时，每个区域都需要自己的源站，但共用同一个域名

核心说明

步骤 1：确定你的平台以及边缘计算能为你做什么

平台	边缘功能	使用方法
Shopify	Shopify 的 CDN（Fastly）已通过全球边缘节点为店铺提供服务	使用 Shopify Markets 实现地理路由和多币种，无需自定义边缘代码；Markets 原生处理货币、语言和域名路由
WooCommerce	添加 Cloudflare 作为 CDN/代理以获得边缘功能	Cloudflare Workers（免费套餐：每天 100k 次请求）可添加边缘逻辑；添加域名后，在 Cloudflare 控制面板中进行配置
BigCommerce	BigCommerce 在全球使用 Fastly CDN	使用 BigCommerce 内置的多店面功能实现地理路由；如需自定义边缘逻辑，可在前端接入 Cloudflare
自定义 / 无头架构	完全自主控制——选择 Cloudflare Workers、Vercel Edge Middleware 或 Fastly Compute	在边缘构建自定义地理路由、A/B 测试和个性化功能；请参阅下方的实现示例

步骤 2：在你的平台上配置地理路由

---

Shopify：使用 Shopify Markets

1. 在 Shopify 管理后台中，前往 Settings → Markets
2. 点击 Add market，并选择新市场对应的国家/地区
3. 配置各市场的设置：
   • Currency：设置当地货币（Shopify 会自动处理货币转换）
   • Language：分配翻译后的主题版本
   • Domain/subdomain：例如，uk.yourstore.com 会自动将英国访客路由到相应店面
4. Shopify 会根据 IP 地理位置自动将用户重定向到其所在市场——无需自定义代码
5. 如需手动覆盖市场 URL：Shopify 基于 Cookie 的市场选择器会处理希望更改所在市场的用户

---

WooCommerce：使用 Cloudflare Workers 实现地理路由

1. 将你的域名添加到 Cloudflare（免费套餐足以满足地理路由需求）
2. 在 Cloudflare 控制面板中，前往 Workers & Pages → Create Worker
3. 添加简单的地理重定向规则：

// Cloudflare Worker — deploy via Cloudflare dashboard
export default {
  async fetch(request) {
    const country = request.headers.get('CF-IPCountry') ?? 'US';
    const url = new URL(request.url);

    // Redirect UK users to UK store variant
    if (country === 'GB' && !url.pathname.startsWith('/uk')) {
      return Response.redirect(`https://${url.hostname}/uk${url.pathname}`, 302);
    }

    return fetch(request);
  }
};

4. 在 Worker 设置中，添加与域名匹配的 Route：*yourstore.com/*
5. 如需支持货币/语言：使用 WooCommerce 多币种插件（WPML + WooCommerce Multilingual，或 Aelia Currency Switcher），读取 URL 路径或 Worker 设置的 Cookie

---

自定义 / 无头架构

使用 Vercel Edge Middleware（Next.js）实现地理路由：

// middleware.ts — runs at the edge globally, <5ms
import { NextRequest, NextResponse } from 'next/server';
import { geolocation } from '@vercel/functions';

const REGION_MAP: Record<string, string> = {
  GB: 'uk', DE: 'de', FR: 'fr', CA: 'ca', AU: 'au',
};

export function middleware(request: NextRequest) {
  const { country } = geolocation(request);
  const region = country ? REGION_MAP[country] : null;

  // Redirect root to regional store
  if (region && request.nextUrl.pathname === '/') {
    const url = request.nextUrl.clone();
    url.pathname = `/${region}`;
    return NextResponse.redirect(url, { status: 302 });
  }

  // Pass country to origin for catalog/pricing logic
  const response = NextResponse.next();
  if (country) response.headers.set('x-user-country', country);
  return response;
}

export const config = { matcher: ['/', '/products/:path*', '/collections/:path*'] };

边缘 A/B 测试（分配一次变体，并将其保存在 Cookie 中）：

// In middleware.ts — no origin round-trip needed
const EXPERIMENTS = [
  { id: 'checkout-cta', buckets: [{ name: 'control', weight: 0.5 }, { name: 'variant-a', weight: 0.5 }] },
];

function assignVariant(buckets: Array<{name: string; weight: number}>) {
  let r = Math.random(), cumulative = 0;
  for (const b of buckets) {
    cumulative += b.weight;
    if (r < cumulative) return b.name;
  }
  return buckets[0].name;
}

// Add to existing middleware function:
for (const exp of EXPERIMENTS) {
  const cookieName = `ab_${exp.id}`;
  let variant = request.cookies.get(cookieName)?.value;
  if (!variant) {
    variant = assignVariant(exp.buckets);
    response.cookies.set(cookieName, variant, { maxAge: 30 * 24 * 3600, httpOnly: true });
  }
  response.headers.set(`x-ab-${exp.id}`, variant); // available in your app for rendering
}

使用 Cloudflare Workers KV 缓存边缘库存：

// cloudflare-worker.ts — inventory cached at every Cloudflare PoP globally
export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const url = new URL(request.url);

    if (url.pathname.startsWith('/api/inventory/')) {
      const productId = url.pathname.replace('/api/inventory/', '');
      const cached = await env.INVENTORY_KV.get(productId, 'json');

      if (cached) {
        return new Response(JSON.stringify(cached), {
          headers: { 'Content-Type': 'application/json', 'X-Edge-Cache': 'HIT' },
        });
      }

      // Cache miss — fetch from origin and store for 60 seconds
      const data = await fetch(`${env.ORIGIN_URL}/api/inventory/${productId}`).then(r => r.json());
      await env.INVENTORY_KV.put(productId, JSON.stringify(data), { expirationTtl: 60 });
      return new Response(JSON.stringify(data), {
        headers: { 'Content-Type': 'application/json', 'X-Edge-Cache': 'MISS' },
      });
    }

    return fetch(request);
  },
};

KV 命名空间 wrangler.toml：

name = "commerce-edge"
main = "src/index.ts"
compatibility_date = "2025-01-01"
[[kv_namespaces]]
binding = "INVENTORY_KV"
id = "your-kv-namespace-id"

使用 Vercel Edge Config 实现即时功能标记：

// Read feature flags at edge — ~0ms latency (stored in PoP)
import { get } from '@vercel/edge-config';

export async function middleware(request: NextRequest) {
  const maintenanceMode = await get<boolean>('maintenance_mode');
  if (maintenanceMode) {
    return NextResponse.rewrite(new URL('/maintenance', request.url));
  }
  return NextResponse.next();
}

步骤 3：监控边缘性能

无论使用哪个平台，都要衡量以下指标：

1. 从多个区域测量 TTFB — 使用 WebPageTest.org 等工具，选择美国、欧盟和亚洲的测试地点；目标是每个区域的 TTFB 都低于 200ms
2. CDN 缓存命中率 — Cloudflare：Analytics → Performance → Cache hit rate（目标为 90% 以上）；Shopify：通过 Online Store → Themes → View report 查看 Lighthouse 报告
3. 边缘错误率 — Cloudflare：Workers → Metrics；Vercel：Deployments → Functions 选项卡
4. 地理位置延迟明细 — Cloudflare Analytics 会显示各国家/地区的延迟；据此识别适合增加源站的区域

最佳实践

• 使用边缘节点做路由决策，而非处理业务逻辑 — 边缘函数最适合根据请求元数据（国家/地区、Cookie、标头）快速做出决策；复杂的业务逻辑（定价、库存）应放在源站处理，并将结果缓存在边缘节点
• 确保边缘函数快速运行 — Cloudflare Workers 免费方案的 CPU 限制为 10ms，付费方案为 30ms；避免在关键路径上的边缘中间件中同步调用外部 API
• 在产品发布前预填充 KV — Workers KV 具有最终一致性；限时抢购前，通过 KV REST API 预填充边缘库存缓存
• 从多个位置测试地理路由 — 使用 VPN 验证重定向逻辑；生产环境中的地理路由错误会影响某个区域内的所有用户

常见问题

问题	解决方案
边缘节点在每次请求时都调用外部 API	将外部数据缓存在 Edge Config 或 Workers KV 中；切勿在关键路径上的边缘中间件中同步调用第三方 API
个性化响应未设置 Vary 标头却被缓存	设置 Vary: Cookie 或能区分个性化响应的自定义标头；否则，一个用户的内容可能会被提供给其他用户
Workers KV 中库存数据过时，导致超卖	边缘 KV 仅用于显示库存状态；结账时始终要根据权威库存来源进行验证
首次加载时 A/B 变体闪烁	在页面渲染前于响应中设置变体 Cookie；首次访问时，设置 Cookie 并重定向，以确保渲染一致

相关技能

• @ecommerce-caching
• @flash-sale-scaling
• @monitoring-alerting-commerce
• @image-optimization-cdn