キャッシュ戦略完全ガイド：CDN・Redis・API最適化でパフォーマンスを最大化

# Cache-Controlヘッダーの設定（静的ファイルのキャッシュ）
location ~* \.(css|js|jpg|png|gif|ico|svg|woff|woff2|ttf|otf)$ {
    expires 30d;
    add_header Cache-Control "public, max-age=2592000";
}

{
  "name": "MyCustomPolicy",
  "minTTL": 60,
  "maxTTL": 86400,
  "defaultTTL": 3600,
  "parametersInCacheKeyAndForwardedToOrigin": {
    "headersConfig": {
      "headerBehavior": "whitelist",
      "headers": ["Authorization"]
    }
  }
}

const { Pool } = require('pg');
const redis = require('redis');
const { promisify } = require('util');

const db = new Pool({ connectionString: 'postgres://user:password@localhost:5432/mydb' });
const redisClient = redis.createClient();
const getAsync = promisify(redisClient.get).bind(redisClient);
const setAsync = promisify(redisClient.set).bind(redisClient);

async function getLeaderboard(req, res) {
  const cacheKey = 'leaderboard';

  // Redis にキャッシュされているか確認
  const cachedData = await getAsync(cacheKey);
  if (cachedData) {
    return res.json(JSON.parse(cachedData));
  }

  // データベースからランキングデータを取得
  const result = await db.query('SELECT * FROM leaderboard ORDER BY score DESC LIMIT 10');
  
  // Redis にデータをキャッシュ（有効期限 10 分）
  await setAsync(cacheKey, JSON.stringify(result.rows), 'EX', 600);

  res.json(result.rows);
}

app.get('/leaderboard', getLeaderboard);

from flask import Flask, jsonify
import memcache

app = Flask(__name__)
cache = memcache.Client(['127.0.0.1:11211'])

def expensive_computation():
    return sum(range(1000000))  # 計算コストの高い処理

@app.route('/compute')
def compute():
    cache_key = "expensive_result"

    # キャッシュから取得
    cached_result = cache.get(cache_key)
    if cached_result:
        return jsonify({"result": cached_result, "cached": True})

    # 計算処理
    result = expensive_computation()

    # キャッシュに保存（有効期限 30 秒）
    cache.set(cache_key, result, time=30)

    return jsonify({"result": result, "cached": False})

if __name__ == '__main__':
    app.run(debug=True)

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

// Apollo Client の設定
const client = new ApolloClient({
  uri: 'https://example.com/graphql',
  cache: new InMemoryCache(),
});

// キャッシュを有効活用したクエリ
client.query({
  query: gql`
    query GetUser {
      user(id: "1") {
        id
        name
      }
    }
  `,
}).then(response => console.log(response.data));

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const cacheUrl = new URL(request.url);
  const cache = caches.default;

  let response = await cache.match(cacheUrl);
  if (!response) {
    response = await fetch(request);
    
    // キャッシュを設定（60秒間有効）
    response = new Response(response.body, response);
    response.headers.append("Cache-Control", "s-maxage=60");
    await cache.put(cacheUrl, response.clone());
  }

  return response;
}

import { ApolloServer, gql } from 'apollo-server-express';
import Redis from 'ioredis';

const redis = new Redis();

const typeDefs = gql`
  type User {
    id: ID!
    name: String!
  }

  type Query {
    user(id: ID!): User
  }
`;

const resolvers = {
  Query: {
    user: async (_, { id }) => {
      const cacheKey = `user:${id}`;
      const cachedData = await redis.get(cacheKey);

      if (cachedData) {
        return JSON.parse(cachedData);
      }

      const user = { id, name: "John Doe" }; // DB から取得するデータ（例）
      await redis.set(cacheKey, JSON.stringify(user), "EX", 60); // 60秒キャッシュ

      return user;
    },
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

import express from "express";
import crypto from "crypto";

const app = express();

app.get("/data", (req, res) => {
  const data = { message: "Hello, World!" };
  const etag = crypto.createHash("md5").update(JSON.stringify(data)).digest("hex");

  res.setHeader("ETag", etag);

  if (req.headers["if-none-match"] === etag) {
    res.status(304).end(); // 304: Not Modified
  } else {
    res.json(data);
  }
});

app.listen(3000, () => console.log("Server running on port 3000"));

app.get("/data", (req, res) => {
  res.setHeader("Cache-Control", "public, max-age=3600"); // 1時間キャッシュ
  res.json({ message: "Hello, Cached World!" });
});

import express from 'express';
import session from 'express-session';
import Redis from 'ioredis';
import RedisStore from 'connect-redis';

const app = express();
const redisClient = new Redis();

app.use(session({
  store: new RedisStore({ client: redisClient }),
  secret: 'your_secret_key', // 環境変数で管理
  resave: false,
  saveUninitialized: false,
  cookie: { secure: false, httpOnly: true, maxAge: 1000 * 60 * 60 } // 1時間
}));

app.get('/login', (req, res) => {
  req.session.user = { id: 1, name: "John Doe" };
  res.send("Logged in");
});

app.get('/profile', (req, res) => {
  if (!req.session.user) return res.status(401).send("Unauthorized");
  res.json(req.session.user);
});

app.listen(3000, () => console.log("Server running on port 3000"));

{
  "sess:U2FtMWJhMWVh...": {
    "cookie": {
      "originalMaxAge": 3600000,
      "expires": "2025-03-07T12:00:00.000Z",
      "httpOnly": true,
      "path": "/"
    },
    "user": {
      "id": 1,
      "name": "John Doe"
    }
  }
}

import express from 'express';
import jwt from 'jsonwebtoken';

const app = express();
const SECRET_KEY = "your_secret_key"; // 環境変数で管理

app.use(express.json());

app.post('/login', (req, res) => {
  const user = { id: 1, name: "John Doe" };
  const token = jwt.sign(user, SECRET_KEY, { expiresIn: '1h' });
  res.json({ token });
});

const authenticate = (req, res, next) => {
  const token = req.headers.authorization?.split(" ")[1];
  if (!token) return res.status(401).send("Unauthorized");

  try {
    req.user = jwt.verify(token, SECRET_KEY);
    next();
  } catch (err) {
    res.status(403).send("Invalid token");
  }
};

app.get('/profile', authenticate, (req, res) => {
  res.json(req.user);
});

app.listen(3000, () => console.log("Server running on port 3000"));

import express from 'express';
import jwt from 'jsonwebtoken';
import Redis from 'ioredis';

const app = express();
const SECRET_KEY = "your_secret_key"; // 環境変数で管理
const redisClient = new Redis();

app.use(express.json());

app.post('/login', (req, res) => {
  const user = { id: 1, name: "John Doe" };
  const token = jwt.sign(user, SECRET_KEY, { expiresIn: '1h' });
  res.json({ token });
});

const authenticate = async (req, res, next) => {
  const token = req.headers.authorization?.split(" ")[1];
  if (!token) return res.status(401).send("Unauthorized");

  const isRevoked = await redisClient.get(`blacklist:${token}`);
  if (isRevoked) return res.status(403).send("Token has been revoked");

  try {
    req.user = jwt.verify(token, SECRET_KEY);
    next();
  } catch (err) {
    res.status(403).send("Invalid token");
  }
};

app.post('/logout', async (req, res) => {
  const token = req.headers.authorization?.split(" ")[1];
  if (!token) return res.status(400).send("Token required");

  await redisClient.setex(`blacklist:${token}`, 3600, "revoked"); // 1時間後に自動削除
  res.send("Logged out");
});

app.get('/profile', authenticate, (req, res) => {
  res.json(req.user);
});

app.listen(3000, () => console.log("Server running on port 3000"));

const cacheKey = `session_${userId}`;
const sessionTTL = 600; // 10 分

// 1. ユーザーのセッションをキャッシュから取得
const sessionData = cache.get(cacheKey);

if (sessionData) {
  // 2. アクセスがあったので TTL をリセット（キャッシュ延命）
  cache.set(cacheKey, sessionData, sessionTTL);
  return sessionData;
}

// 3. セッションがなければ、新しいセッションを作成
const newSession = createSession(userId);
cache.set(cacheKey, newSession, sessionTTL);
return newSession;

const cacheKey = `search_results_${query}`;
const cacheTTL = 300; // 5 分

// キャッシュを取得
const cachedResults = cache.get(cacheKey);

if (cachedResults) {
  // キャッシュがあれば、TTL を延長
  cache.set(cacheKey, cachedResults, cacheTTL);
  return cachedResults;
}

// キャッシュがない場合は API からデータを取得
const results = fetchSearchResults(query);
cache.set(cacheKey, results, cacheTTL);
return results;

function updateUserProfile(userId, newProfileData) {
  // 1. データベースを更新
  database.updateUserProfile(userId, newProfileData);

  // 2. 変更があったのでキャッシュを削除
  cache.delete(`user_profile_${userId}`);
}

curl -X POST "https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache" \
     -H "Authorization: Bearer {api_token}" \
     -H "Content-Type: application/json" \
     --data '{"purge_everything":true}'

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: { posts }, // ビルド時にデータを取得し、ページに渡す
  };
}

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();

  return {
    props: { products },
    revalidate: 60, // 60秒ごとにページを再生成
  };
}

npm install workbox-window

import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate, CacheFirst, NetworkFirst } from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';

// ビルド時にキャッシュするリソース
precacheAndRoute(self.__WB_MANIFEST || []);

// 静的リソース（CSS, JS, 画像）をキャッシュ
registerRoute(
  ({ request }) => request.destination === 'style' || request.destination === 'script' || request.destination === 'image',
  new CacheFirst({
    cacheName: 'static-resources',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 50, // キャッシュの上限数
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30日間保持
      }),
    ],
  })
);

// API レスポンスのキャッシュ（stale-while-revalidate）
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
  })
);

// 古いキャッシュを削除
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.filter((cacheName) => cacheName !== 'static-resources' && cacheName !== 'api-cache')
          .map((cacheName) => caches.delete(cacheName))
      );
    })
  );
});

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { registerSW } from './serviceWorkerRegistration';

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// Service Worker を登録
registerSW();

import { Workbox } from 'workbox-window';

export function registerSW() {
  if ('serviceWorker' in navigator) {
    const wb = new Workbox('/serviceWorker.js');

    wb.addEventListener('installed', (event) => {
      if (event.isUpdate) {
        console.log('新しいバージョンの Service Worker がインストールされました。');
      }
    });

    wb.addEventListener('waiting', () => {
      console.log('Service Worker が待機中です。');
    });

    wb.addEventListener('activated', () => {
      console.log('Service Worker がアクティブになりました。');
    });

    wb.register();
  }
}

import React from 'react';

const ClearCacheButton: React.FC = () => {
  const clearCache = async () => {
    if ('caches' in window) {
      const cacheNames = await caches.keys();
      await Promise.all(cacheNames.map((name) => caches.delete(name)));
      alert('キャッシュが削除されました！');
    }
  };

  return <button onClick={clearCache}>キャッシュをクリア</button>;
};

export default ClearCacheButton;

import React from 'react';
import ClearCacheButton from './components/ClearCacheButton';

const App: React.FC = () => {
  return (
    <div>
      <h1>React + Service Worker + Workbox</h1>
      <ClearCacheButton />
    </div>
  );
};

export default App;

import { StaleWhileRevalidate } from 'workbox-strategies';

registerRoute(
  ({ request }) => request.destination === 'script' || request.destination === 'style',
  new StaleWhileRevalidate({
    cacheName: 'static-resources',
  })
);

import { NetworkFirst } from 'workbox-strategies';

registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new NetworkFirst({
    cacheName: 'api-cache',
    networkTimeoutSeconds: 5, // 5秒以内に応答がなければキャッシュを使用
  })
);

import { CacheFirst } from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';

registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 50, // キャッシュする最大エントリ数
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30日間有効
      }),
    ],
  })
);

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

const fetchData = async () => {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts');
  return data;
};

const Posts = () => {
  const { data, error, isLoading } = useQuery({
    queryKey: ['posts'],  // クエリの識別キー（キャッシュ管理に使用）
    queryFn: fetchData,   // データ取得関数
    staleTime: 1000 * 60, // 1分間は「フレッシュ」なデータとみなす
    cacheTime: 1000 * 300 // 5分間キャッシュを保持
  });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.map((post: { id: number; title: string }) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default Posts;

import { useQuery, useQueryClient } from '@tanstack/react-query';
import axios from 'axios';

const fetchPosts = async () => {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts');
  return data;
};

const Posts = () => {
  const queryClient = useQueryClient();
  const { data, isLoading } = useQuery({ queryKey: ['posts'], queryFn: fetchPosts });

  const refreshData = () => {
    queryClient.invalidateQueries({ queryKey: ['posts'] }); // キャッシュを無効化し、データを再取得
  };

  if (isLoading) return <p>Loading...</p>;

  return (
    <div>
      <button onClick={refreshData}>更新</button>
      <ul>
        {data.map((post: { id: number; title: string }) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default Posts;

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql',
  cache: new InMemoryCache(),
});

const App = () => (
  <ApolloProvider client={client}>
    <YourComponent />
  </ApolloProvider>
);

export default App;

import { gql, useQuery } from '@apollo/client';

const GET_POSTS = gql`
  query GetPosts {
    posts {
      id
      title
    }
  }
`;

const Posts = () => {
  const { data, loading, error } = useQuery(GET_POSTS, {
    fetchPolicy: 'cache-first', // キャッシュを優先して使用
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.posts.map((post: { id: number; title: string }) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default Posts;

import { gql, useMutation } from '@apollo/client';

const CREATE_POST = gql`
  mutation CreatePost($title: String!) {
    createPost(title: $title) {
      id
      title
    }
  }
`;

const GET_POSTS = gql`
  query GetPosts {
    posts {
      id
      title
    }
  }
`;

const CreatePost = () => {
  const [createPost] = useMutation(CREATE_POST, {
    refetchQueries: [{ query: GET_POSTS }], // クエリを再取得
  });

  const handleCreate = async () => {
    await createPost({ variables: { title: 'New Post' } });
  };

  return <button onClick={handleCreate}>新規投稿</button>;
};

export default CreatePost;

performance.getEntriesByType("resource").forEach((entry) => {
  console.log(entry.name, entry.transferSize === 0 ? "Cache Hit" : "Cache Miss");
});

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((cachedResponse) => {
      if (cachedResponse) {
        console.log("Cache Hit:", event.request.url);
        return cachedResponse;
      } else {
        console.log("Cache Miss:", event.request.url);
        return fetch(event.request);
      }
    })
  );
});

const { cache } = useApolloClient();

const data = cache.readQuery({
  query: GET_USER_PROFILE,
  variables: { id: "123" },
});

console.log(data ? "Cache Hit" : "Cache Miss");

log_format cache_status '$remote_addr - $upstream_cache_status - $request';
access_log /var/log/nginx/cache.log cache_status;

const redis = require("redis");
const client = redis.createClient();

const cacheKey = `user:${userId}`;
client.get(cacheKey, (err, data) => {
  if (data) {
    console.log("Cache Hit");
  } else {
    console.log("Cache Miss");
  }
});