Leveraging Edge Computing：Claude Code 实战指南

边缘コンピューティングとは

边缘コンピューティングは、用户に地理的に近い服务器で処理を実行する技術です。レイテンシを大幅に削減し、高速な响应を実現可以。Claude Codeを活用して、边缘支持の应用を构建吧。

Cloudflare Workers

// src/index.ts
export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    // Routing
    switch (url.pathname) {
      case "/api/geo":
        return handleGeo(request);
      case "/api/cache":
        return handleCachedData(request, env, ctx);
      default:
        return new Response("Not Found", { status: 404 });
    }
  },
};

function handleGeo(request: Request): Response {
  // Cloudflareが自動で付与する头部
  const country = request.headers.get("cf-ipcountry") || "unknown";
  const city = request.cf?.city || "unknown";

  return Response.json({
    country,
    city,
    message: `こんにちは！${city}からのアクセスですね。`,
  });
}

async function handleCachedData(
  request: Request,
  env: Env,
  ctx: ExecutionContext
): Promise<Response> {
  const cacheKey = new URL(request.url).pathname;

  // KVストアから缓存获取
  const cached = await env.MY_KV.get(cacheKey);
  if (cached) {
    return Response.json(JSON.parse(cached), {
      headers: { "X-Cache": "HIT" },
    });
  }

  // オリジンから数据获取
  const data = await fetch("https://api.example.com/data").then(
    (r) => r.json()
  );

  // KVに缓存（TTL: 5分）
  ctx.waitUntil(
    env.MY_KV.put(cacheKey, JSON.stringify(data), {
      expirationTtl: 300,
    })
  );

  return Response.json(data, {
    headers: { "X-Cache": "MISS" },
  });
}

Vercel Edge Functions

// app/api/personalize/route.ts
import { NextRequest } from "next/server";

export const runtime = "edge";

export async function GET(request: NextRequest) {
  const country = request.geo?.country || "JP";
  const region = request.geo?.region || "unknown";

  // 地域に応じた内容
  const content = await getLocalizedContent(country);

  // 边缘缓存配置
  return Response.json(
    {
      content,
      servedFrom: region,
      timestamp: Date.now(),
    },
    {
      headers: {
        "Cache-Control": "public, s-maxage=60, stale-while-revalidate=300",
      },
    }
  );
}

async function getLocalizedContent(country: string) {
  const priceMultiplier: Record<string, number> = {
    JP: 1,
    US: 0.0067,
    EU: 0.0061,
  };

  return {
    currency: country === "JP" ? "USD" : country === "US" ? "USD" : "EUR",
    multiplier: priceMultiplier[country] || 1,
  };
}

边缘での认证処理

// middleware.ts（Vercel Edge Middleware）
import { NextRequest, NextResponse } from "next/server";
import { jwtVerify } from "jose";

const secret = new TextEncoder().encode(process.env.JWT_SECRET!);

export async function middleware(request: NextRequest) {
  // 公開パスはスキップ
  const publicPaths = ["/", "/login", "/api/auth"];
  if (publicPaths.some((p) => request.nextUrl.pathname.startsWith(p))) {
    return NextResponse.next();
  }

  const token = request.cookies.get("token")?.value;
  if (!token) {
    return NextResponse.redirect(new URL("/login", request.url));
  }

  try {
    const { payload } = await jwtVerify(token, secret);

    // 请求头部に用户情報を付与
    const response = NextResponse.next();
    response.headers.set("x-user-id", payload.sub as string);
    response.headers.set("x-user-role", payload.role as string);
    return response;
  } catch {
    return NextResponse.redirect(new URL("/login", request.url));
  }
}

export const config = {
  matcher: ["/dashboard/:path*", "/api/protected/:path*"],
};

边缘でのA/B测试

export const runtime = "edge";

export async function middleware(request: NextRequest) {
  // 既存のバリアント割り当てを确认
  const variant = request.cookies.get("ab-variant")?.value;

  if (!variant) {
    // Randomly assign to new users
    const newVariant = Math.random() < 0.5 ? "A" : "B";
    const response = NextResponse.next();
    response.cookies.set("ab-variant", newVariant, {
      maxAge: 60 * 60 * 24 * 30,
    });

    // バリアントに応じた页面にリライト
    if (newVariant === "B") {
      return NextResponse.rewrite(
        new URL("/variants/b" + request.nextUrl.pathname, request.url)
      );
    }
    return response;
  }

  if (variant === "B") {
    return NextResponse.rewrite(
      new URL("/variants/b" + request.nextUrl.pathname, request.url)
    );
  }

  return NextResponse.next();
}

通过 Claude Codeの活用

边缘函数の实现を让 Claude Code依頼する例です。性能优化はSSR vs SSG比較、缓存戦略はRedis缓存设计也请参阅。

Vercel Edge FunctionsでAPIを実装して。
- 地域別のコンテンツ出し分け
- エッジでのJWT検証
- KVストアでのキャッシュ
- A/Bテストのミドルウェア

Cloudflare Workers的详细信息请参阅Cloudflare Workers官方文档。Claude Codeの使い方は官方文档中可以查看。

总结

边缘コンピューティングはレイテンシ削減と可扩展性の両立を実現します。借助 Claude Code，プラット表单固有のAPIや最佳实践を理解した上で边缘支持コードを高效地实现可以。