edge-commerce

エッジコマース

概要

エッジコンピューティングでは、各ユーザーに最も近い CDN PoP でコードを実行し、レイテンシを数百ミリ秒（中央のオリジンとの往復時間）から 50ms 未満に短縮します。E コマースでは、地域別ルーティング（英国のユーザーを英国のストアフロントにリダイレクト）、エッジ側のパーソナライズ（ユーザーのティア情報をキャッシュされたページに挿入）、オリジンとの往復を伴わない即時 A/B テスト、エッジ KV ストアを介した分散在庫キャッシュが可能になります。

このスキルを使用するタイミング

• 中央のオリジンを経由するページで、海外ユーザーの TTFB が長い（300ms 超）場合
• ユーザーを地域別のストアフロントやローカライズされた商品カタログにリダイレクトする必要がある場合
• ページのレンダリングを遅らせる JavaScript を追加せずに A/B テストを実施したい場合
• 各地域に専用のオリジンが必要で、単一のドメインを共有するマルチリージョンデプロイメントを構築する場合

基本的な手順

ステップ 1：利用するプラットフォームと、エッジコンピューティングでできることを確認する

プラットフォーム	エッジ機能	使用方法
Shopify	Shopify の CDN（Fastly）は、すでに世界各地のエッジロケーションからストアを配信しています	カスタムのエッジコードを使わずに地域別ルーティングや複数通貨に対応するには、Shopify Markets を使用します。Markets は通貨、言語、ドメインのルーティングを標準で処理します
WooCommerce	Cloudflare を CDN／プロキシとして追加すると、エッジ機能を利用できます	Cloudflare Workers（無料枠：1 日あたり 100k リクエスト）でエッジロジックを追加できます。ドメインを追加した後、Cloudflare ダッシュボードで設定します
BigCommerce	BigCommerce は世界各地で Fastly CDN を使用しています	地域別ルーティングには BigCommerce の組み込みマルチストアフロント機能を使用します。カスタムのエッジロジックを追加するには、前段に Cloudflare を配置します
カスタム／ヘッドレス	完全に制御できます。Cloudflare Workers、Vercel Edge Middleware、Fastly Compute から選択できます	エッジでカスタムの地域別ルーティング、A/B テスト、パーソナライズを構築します。実装については以下を参照してください

ステップ 2：プラットフォームで地域別ルーティングを設定する

---

Shopify：Shopify Markets を使用する

1. Shopify 管理画面で 設定 → Markets に移動します
2. マーケットを追加 をクリックし、新しいマーケットの国／地域を選択します
3. マーケットごとの設定を行います：
   • 通貨：現地通貨を設定します（Shopify が自動で換算します）
   • 言語：翻訳済みのテーマバージョンを割り当てます
   • ドメイン／サブドメイン：例：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. 通貨／言語には、Worker が設定する URL パスまたは Cookie を読み取る WooCommerce の複数通貨プラグイン（WPML + WooCommerce Multilingual、または Aelia Currency Switcher）を使用します

---

カスタム／ヘッドレス

地域別ルーティングのための 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 — テスト場所に米国、EU、アジアを指定して、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