mcpField
C
caching-cdn-strategy-planner

caching-cdn-strategy-planner

github.com/patricio0312revクラウド・DevOps63249 回インストール41 週間前に更新
リポジトリ

caching-cdn-strategy-planner について

クライアント、CDN、サーバー、データベースの各層を対象にキャッシュを計画するスキルです。CDN 設定、Redis によるサーバーキャッシュ、無効化、ヘッダー、監視を扱います。

主な機能

  1. 01階層型キャッシュ計画
  2. 02CloudFront 設定例
  3. 03Redis サーバーキャッシュ
  4. 04キャッシュ無効化戦略
  5. 05キャッシュヘッダー設定
  6. 06監視チェックリスト

活用シーン

  1. 01アプリケーションのキャッシュ層の計画
  2. 02サーバーリクエストへの Redis キャッシュ追加
  3. 03データ更新後のキャッシュ無効化方法の策定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/patricio0312rev/skills --skill caching-cdn-strategy-planner

インストール後、Claude Code で/caching-cdn-strategy-plannerを入力して読み込まれたか確認します。

詳細

キャッシュと CDN 戦略プランナー

すべてのレイヤーで効果的なキャッシュを設計します。

キャッシュレイヤー

Client → CDN (Edge) → Server Cache → Database

CDN 設定（CloudFront）

const distribution = {
  Origins: [
    {
      DomainName: "api.example.com",
      CustomHeaders: [
        {
          HeaderName: "X-CDN-Secret",
          HeaderValue: process.env.CDN_SECRET,
        },
      ],
    },
  ],
  DefaultCacheBehavior: {
    ViewerProtocolPolicy: "redirect-to-https",
    AllowedMethods: ["GET", "HEAD", "OPTIONS"],
    CachedMethods: ["GET", "HEAD"],
    Compress: true,
    DefaultTTL: 86400, // 1 day
    MaxTTL: 31536000, // 1 year
    MinTTL: 0,
    ForwardedValues: {
      QueryString: true,
      Cookies: { Forward: "none" },
      Headers: ["Accept", "Accept-Encoding"],
    },
  },
  CacheBehaviors: [
    {
      PathPattern: "/api/static/*",
      DefaultTTL: 31536000, // 1 year - never changes
    },
    {
      PathPattern: "/api/dynamic/*",
      DefaultTTL: 300, // 5 min - changes frequently
    },
  ],
};

サーバーサイドキャッシュ（Redis）

import Redis from 'ioredis';

const redis = new Redis(process.env.REDIS_URL);

async function getCachedOrFetch<T>(
  key: string,
  fetcher: () => Promise<T>,
  ttl: number = 3600
): Promise<T> {
  // Try cache
  const cached = await redis.get(key);
  if (cached) {
    return JSON.parse(cached);
  }

  // Fetch and cache
  const data = await fetcher();
  await redis.setex(key, ttl, JSON.stringify(data));

  return data;
}

// Usage
app.get('/api/user/:id', async (req, res) => {
  const user = await getCachedOrFetch(
    \`user:\${req.params.id}\`,
    () => prisma.user.findUnique({ where: { id: req.params.id } }),
    3600
  );

  res.json(user);
});

キャッシュの無効化

// Invalidate on update
app.put('/api/user/:id', async (req, res) => {
  const user = await prisma.user.update({
    where: { id: req.params.id },
    data: req.body,
  });

  // Invalidate cache
  await redis.del(\`user:\${req.params.id}\`);

  // Invalidate CDN
  await cloudfront.createInvalidation({
    DistributionId: DISTRIBUTION_ID,
    InvalidationBatch: {
      Paths: { Items: [\`/api/user/\${req.params.id}\`] },
      CallerReference: Date.now().toString(),
    },
  });

  res.json(user);
});

キャッシュヘッダー

app.get("/api/products", (req, res) => {
  res.set({
    "Cache-Control": "public, max-age=3600", // Browser + CDN: 1h
    ETag: generateETag(products),
    "Last-Modified": new Date(products.updatedAt).toUTCString(),
  });

  res.json(products);
});

app.get("/api/user/profile", (req, res) => {
  res.set({
    "Cache-Control": "private, no-cache", // No caching (sensitive)
  });

  res.json(profile);
});

出力チェックリスト

  • CDN を設定済み
  • サーバーキャッシュを実装済み
  • 無効化戦略を策定済み
  • キャッシュヘッダーを設定済み
  • モニタリングを設定済み ENDFILE

コメント

Markdown 対応