Cloudflare WorkersでReactを動かす！静的サイトからSSRまで環境構築完全ガイド

import React from 'react';

const App = () => {

  const approaches = [
    {
      name: '静的サイト (SPA)',
      description: 'ビルド済みのHTML、CSS、JSファイルをデプロイする最もシンプルな方法です。',
      useCase: '基本的なWebサイト、ポートフォリオ、ドキュメントサイトなど、コンテンツの更新が少ない場合に最適です。',
      difficulty: '易しい',
      tools: 'Wrangler CLI, create-react-appなど',
      ref: 'https://developers.cloudflare.com/workers/static-assets/',
      ref_text: 'Static Assets - Workers Docs'
    },
    {
      name: 'HTMLRewriter API',
      description: '配信するHTMLをエッジで動的に書き換えます。',
      useCase: 'A/Bテスト、ユーザーごとのコンテンツパーソナライズ、動的なOGP設定など、静的コンテンツに動的要素を加えたい場合に有効です。',
      difficulty: '中程度',
      tools: 'HTMLRewriter API',
      ref: 'https://developers.cloudflare.com/workers/runtime-apis/html-rewriter/',
      ref_text: 'HTMLRewriter - Workers Docs'
    },
    {
      name: 'サーバーサイドレンダリング (SSR)',
      description: 'Reactアプリケーションをエッジサーバー上で直接レンダリングします。',
      useCase: '初期表示速度の向上やSEO対策が重要なWebアプリケーション、動的なデータが多いサービスに適しています。',
      difficulty: '難しい',
      tools: 'React Router, Hono, Viteなど',
      ref: 'https://developers.cloudflare.com/workers/framework-guides/web-apps/react-router/',
      ref_text: 'React Router - Workers Docs'
    }
  ];

  const ssrTools = [
    {
      tool: 'React Router v7 + Vite Plugin',
      feature: 'Cloudflare公式推奨のフルスタック構成。`create-cloudflare` CLIで簡単に環境を構築可能。開発サーバーがWorkersランタイムで動作するため、本番環境との差異が少ないです。',
      recommendation: '安定した公式サポートを求め、フルスタックな機能を活用したい開発者。',
      reference_text: 'React Router Docs',
      reference_url: 'https://developers.cloudflare.com/workers/framework-guides/web-apps/react-router/'
    },
    {
      tool: 'Hono + Vite',
      feature: '軽量で柔軟なWebフレームワークHonoを使用。大規模フレームワークに頼らず、ほぼ「素のReact」でSSRを構築可能です。`renderToReadableStream`でストリーミングにも対応。',
      recommendation: 'フレームワークの規約に縛られず、独自の構成で軽量なSSR環境を構築したい開発者。',
      reference_text: 'Zenn Article',
      reference_url: 'https://zenn.dev/sora_kumo/articles/hono-ssr-react'
    },
    {
      tool: 'vite-plugin-ssr',
      feature: '汎用性が高いViteプラグイン。SSRだけでなく、SSGやSPAなど、1つのコードベースで多様なレンダリングモードをサポートします。',
      recommendation: '複数のレンダリング戦略（SSR/SSG/SPA）を柔軟に使い分けたい、またはミニマムな構成から始めたい開発者。',
      reference_text: 'vite-plugin-ssr Docs',
      reference_url: 'https://vite-plugin-ssr.com/cloudflare-workers'
    }
  ];
  
  const cacheStrategies = [
      {
          method: 'Cache API',
          feature: 'Workerが動作したデータセンターにのみキャッシュを保存。データセンター間の同期はありません。',
          useCase: '高速なローカルキャッシュが必要で、グローバルな一貫性が厳密には求められない場合。',
          ref_text: 'zenn.dev',
          ref_url: 'https://zenn.dev/chimame/articles/7570c71d1e6c38'
      },
      {
          method: 'Workers KV',
          feature: 'グローバルに分散されたキーバリューストア。書き込みには少し時間がかかるが、どこからでも読み取り可能です。',
          useCase: '高いキャッシュヒット率が求められる場合や、Next.jsのISRのように状態をグローバルに共有したい場合。Cloudflareも推奨。',
          ref_text: 'Cloudflare Docs',
          ref_url: 'https://developers.cloudflare.com/pages/framework-guides/nextjs/ssr/caching/'
      }
  ];

  return (
    <div className="bg-gray-900 text-white min-h-screen font-sans p-4 sm:p-6 md:p-8">
      <div className="max-w-7xl mx-auto">

        <header className="text-center mb-12">
          <h1 className="text-4xl md:text-5xl font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-orange-400 to-orange-600">Cloudflare Workers 実行環境構築ガイド</h1>
          <p className="text-lg text-gray-400">React & HTMLアプリケーションのホスティング方法</p>
        </header>

        <section id="approaches" className="mb-16">
          <h2 className="text-3xl font-bold mb-8 text-center">構築アプローチの選択肢</h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {approaches.map((approach, index) => (
              <div key={index} className="bg-gray-800 rounded-lg p-6 border border-gray-700 hover:border-orange-500 transition-all duration-300 transform hover:-translate-y-1">
                <h3 className="text-2xl font-semibold mb-3 text-orange-400">{approach.name}</h3>
                <p className="text-gray-300 mb-4">{approach.description}</p>
                <p className="text-sm text-gray-400 mb-4"><strong>ユースケース:</strong> {approach.useCase}</p>
                <div className="text-sm text-gray-400 mb-4">
                  <p><strong>構築難易度:</strong> <span className={`font-bold ${approach.difficulty === '易しい' ? 'text-green-400' : approach.difficulty === '中程度' ? 'text-yellow-400' : 'text-red-400'}`}>{approach.difficulty}</span></p>
                  <p><strong>主要ツール:</strong> {approach.tools}</p>
                </div>
                <a href={approach.ref} target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:text-blue-300 underline text-sm">{approach.ref_text}</a>
              </div>
            ))}
          </div>
        </section>

        <section id="ssr-tools" className="mb-16">
          <h2 className="text-3xl font-bold mb-8 text-center">SSR実現のためのツールスタック比較</h2>
          <div className="overflow-x-auto">
              <table className="w-full text-left border-collapse">
                  <thead>
                      <tr>
                          <th className="border-b-2 border-gray-700 p-4 bg-gray-800">ツール/フレームワーク</th>
                          <th className="border-b-2 border-gray-700 p-4 bg-gray-800">特徴</th>
                          <th className="border-b-2 border-gray-700 p-4 bg-gray-800">推奨される開発者</th>
                          <th className="border-b-2 border-gray-700 p-4 bg-gray-800">参考文献</th>
                      </tr>
                  </thead>
                  <tbody>
                      {ssrTools.map((tool, index) => (
                          <tr key={index} className="bg-gray-800/50 hover:bg-gray-700/50 transition-colors">
  <td className="border-b border-gray-700 p-4 font-semibold text-orange-400">{tool.tool}</td>
  <td className="border-b border-gray-700 p-4 text-gray-300">{tool.feature}</td>
  <td className="border-b border-gray-700 p-4 text-gray-300">{tool.recommendation}</td>
  <td className="border-b border-gray-700 p-4"><a href={tool.reference_url} target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:text-blue-300 underline">{tool.reference_text}</a></td>
                          </tr>
                      ))}
                  </tbody>
              </table>
          </div>
        </section>

        <section id="workflow" className="mb-16">
            <h2 className="text-3xl font-bold mb-8 text-center">開発からデプロイまでのワークフロー</h2>
            <div className="grid md:grid-cols-3 gap-8 text-center">
                <div className="bg-gray-800 p-6 rounded-lg border border-gray-700">
                    <h3 className="text-2xl font-semibold mb-3 text-orange-400">1. ローカル開発 & デバッグ</h3>
                    <ul className="text-left list-disc list-inside text-gray-300 space-y-2">
                        <li><code className="bg-gray-700 text-sm p-1 rounded">wrangler dev</code>でローカル実行 <a href="https://developers.cloudflare.com/workers/development-testing/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[ref]</a></li>
                        <li>ブラウザDevToolsでデバッグ <a href="https://developers.cloudflare.com/workers/observability/dev-tools/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[ref]</a></li>
                        <li>VS Codeでブレークポイントデバッグ <a href="https://developers.cloudflare.com/workers/observability/dev-tools/breakpoints/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[ref]</a></li>
                    </ul>
                </div>
                 <div className="bg-gray-800 p-6 rounded-lg border border-gray-700">
                    <h3 className="text-2xl font-semibold mb-3 text-orange-400">2. CI/CDによる自動化</h3>
                    <p className="text-gray-300 mb-4">GitHub Actionsでビルドとデプロイを自動化します。</p>
                    <a href="https://developers.cloudflare.com/workers/ci-cd/external-cicd/github-actions/" target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:text-blue-300 underline text-sm">GitHub Actions連携ガイド</a>
                </div>
                <div className="bg-gray-800 p-6 rounded-lg border border-gray-700">
                    <h3 className="text-2xl font-semibold mb-3 text-orange-400">3. パフォーマンス最適化</h3>
                    <p className="text-gray-300 mb-4">キャッシュ戦略とバンドルサイズ最適化で応答速度を向上させます。</p>
                     <a href="https://speakerdeck.com/yoshiitaka/new-options-for-caching-dynamic-content-with-cloudflare-workers" target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:text-blue-300 underline text-sm">動的コンテンツのキャッシュ</a>
                </div>
            </div>
            <div className="bg-gray-800 rounded-lg p-6 mt-8 border border-gray-700">
                <h4 className="text-xl font-semibold mb-4">GitHub Actions ワークフロー例</h4>
                <pre className="bg-gray-900 text-left text-sm text-white p-4 rounded-md overflow-x-auto">
                    <code>
{`name: Deploy
on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Deploy
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${\{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${\{ secrets.CLOUDFLARE_ACCOUNT_ID }}
`}
                    </code>
                </pre>
                <p className="text-xs text-gray-500 mt-2">出典: <a href="https://developers.cloudflare.com/workers/ci-cd/external-cicd/github-actions/" target="_blank" rel="noopener noreferrer" className="underline">Cloudflare Docs</a></p>
            </div>
        </section>
        
        <section id="optimization" className="mb-16">
          <h2 className="text-3xl font-bold mb-8 text-center">パフォーマンス最適化手法</h2>
          <div className="grid md:grid-cols-2 gap-8">
              <div className="bg-gray-800 p-6 rounded-lg border border-gray-700">
                  <h3 className="text-2xl font-semibold mb-4 text-orange-400">キャッシュ戦略</h3>
                  <div className="overflow-x-auto">
                    <table className="w-full text-left border-collapse">
                        <thead>
                            <tr>
  <th className="border-b-2 border-gray-700 p-3 bg-gray-900">方法</th>
  <th className="border-b-2 border-gray-700 p-3 bg-gray-900">特徴</th>
  <th className="border-b-2 border-gray-700 p-3 bg-gray-900">ユースケース</th>
  <th className="border-b-2 border-gray-700 p-3 bg-gray-900">出典</th>
                            </tr>
                        </thead>
                        <tbody>
                            {cacheStrategies.map((strategy, index) => (
  <tr key={index} className="bg-gray-800/50 hover:bg-gray-700/50 transition-colors">
  <td className="border-b border-gray-700 p-3 font-semibold">{strategy.method}</td>
  <td className="border-b border-gray-700 p-3 text-gray-300">{strategy.feature}</td>
  <td className="border-b border-gray-700 p-3 text-gray-300">{strategy.useCase}</td>
  <td className="border-b border-gray-700 p-3"><a href={strategy.ref_url} target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:text-blue-300 underline text-sm">{strategy.ref_text}</a></td>
  </tr>
                            ))}
                        </tbody>
                    </table>
                  </div>
                  <p className="text-sm text-gray-400 mt-4">stale-while-revalidate (SWR) 戦略もWorkerでカスタム実装可能です。<a href="https://gist.github.com/wilsonpage/a4568d776ee6de188999afe6e2d2ee69" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[実装例]</a></p>
              </div>
              <div className="bg-gray-800 p-6 rounded-lg border border-gray-700">
                  <h3 className="text-2xl font-semibold mb-4 text-orange-400">バンドルサイズの最適化</h3>
                  <p className="text-gray-300 mb-4">Cloudflareプラットフォームにはファイルサイズ制限があるため、バンドルを小さく保つことが重要です。<a href="https://blog.developersteve.com/overcoming-the-cloudflare-asset-file-limit-using-github-actions-145a87215004" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[制限回避例]</a></p>
                  <ul className="list-disc list-inside text-gray-300 space-y-2">
                      <li>
                          <strong>ツリーシェイキング (Tree Shaking):</strong> 未使用のコードを最終的なバンドルから削除します。ES6モジュールでインポートすることで効果を発揮します。<a href="https://docs.sentry.io/platforms/javascript/guides/cloudflare/configuration/tree-shaking/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[Sentryの例]</a>
                      </li>
                      <li>
                          <strong>ビルドプロセスの分離:</strong> GitHub Actionsなどでビルドを行い、生成された静的アセットのみをデプロイすることで、Cloudflare環境の制限を回避します。
                      </li>
                  </ul>
              </div>
          </div>
        </section>
        
      </div>
    </div>
  );
}

export default App;