OpenGraph и социальные краулеры в SPA: проксирование ботов на Edge и Nginx

<div id="root"></div>
<script src="/bundle.js"></script>

+-------------------------------------------------------------------------+
|             АРХИТЕКТУРА ДИНАМИЧЕСКОГО ПРОКСИРОВАНИЯ БОТОВ               |
+-------------------------------------------------------------------------+

                  [ Входящий HTTP GET Запрос ]
                               |
                               v
               +-------------------------------+
               | Пограничный шлюз (Edge/Nginx) |
               | Анализ заголовка User-Agent   |
               +-------------------------------+
                               |
            +------------------+------------------+
            |                                     |
   [ Обычный Браузер ]                    [ Социальный Бот ]
   (Chrome, Safari, Firefox)             (TelegramBot, TwitterBot, etc.)
            |                                     |
            v                                     v
   +-------------------+                +-------------------+
   |  Статический CDN  |                |  Edge Worker /    |
   |  Origin Storage   |                |  Meta Prerender   |
   +-------------------+                +-------------------+
            |                                     |
    Отдача index.html                     Запрос данных в API ->
    + React JS Bundle                     Генерация легкого HTML
            |                             со всеми <meta og:...>
            v                                     |
   Клиентский рендеринг                           v
   в браузере пользователя                Отдача 200 OK + теги
                                          (Vary: User-Agent)

# Определение социальных краулеров и поисковых ботов без JS
map $http_user_agent $is_social_bot {
    default 0;
    ~*(telegrambot|twitterbot|facebookexternalhit|whatsapp|discordbot|slackbot|vkshare|linkedinbot|applebot) 1;
}

server {
    listen 443 ssl http2;
    server_name agenticlab.dev;

    # SSL сертификаты и базовые настройки...
    root /var/www/agenticlab/spa/dist;
    index index.html;

    location / {
        # КРИТИЧЕСКИ ВАЖНО: оповещаем CDN и браузеры о вариативности ответа по User-Agent
        add_header Vary "User-Agent" always;

        # Если запрос пришел от бота — проксируем на Node.js сервис метаданных
        if ($is_social_bot = 1) {
            proxy_pass http://127.0.0.1:3001;
            break;
        }

        # Обычным пользователям отдаем статический SPA с поддержкой HTML5 History API
        try_files $uri $uri/ /index.html;
    }

    # Статические ассеты отдаются напрямую без проксирования
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, max-age=31536000, immutable";
        try_files $uri =404;
    }
}

interface Env {
  ASSETS: { fetch: typeof fetch };
  API_BASE_URL: string;
}

// Регулярное выражение для выявления краулеров
const BOT_UA_REGEX =
  /telegrambot|twitterbot|facebookexternalhit|whatsapp|discordbot|slackbot|vkshare|linkedinbot|applebot/i;

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const userAgent = request.headers.get('User-Agent') || '';
    const url = new URL(request.url);

    // Игнорируем запросы к статическим ассетам
    const isStaticAsset = /\.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?)$/i.test(url.pathname);

    // Если это не бот или запрос к ассету — отдаем оригинальный SPA-бандл
    if (isStaticAsset || !BOT_UA_REGEX.test(userAgent)) {
      const response = await env.ASSETS.fetch(request);
      // Добавляем Vary, если его нет
      const newHeaders = new Headers(response.headers);
      newHeaders.append('Vary', 'User-Agent');
      return new Response(response.body, {
        status: response.status,
        headers: newHeaders,
      });
    }

    // Обработка запроса бота: извлекаем метаданные через API
    return await handleBotRequest(url, env);
  },
};

async function handleBotRequest(url: URL, env: Env): Promise<Response> {
  const pathParts = url.pathname.split('/').filter(Boolean);
  let title = 'Fullstack Agentic Lab — Образовательная платформа';
  let description = 'Глубокие курсы по веб-разработке и системной архитектуре.';
  let ogImage = 'https://agenticlab.dev/assets/default-og.png';

  try {
    // Пример: парсинг динамического роута /courses/:slug
    if (pathParts[0] === 'courses' && pathParts[1]) {
      const slug = pathParts[1];
      const apiRes = await fetch(`${env.API_BASE_URL}/api/v1/courses/${slug}`);
      
      if (apiRes.ok) {
        const data = await apiRes.json() as { title: string; summary: string; coverUrl?: string };
        title = `${data.title} | Fullstack Agentic Lab`;
        description = data.summary;
        if (data.coverUrl) {
          ogImage = data.coverUrl;
        }
      }
    }
  } catch (err: unknown) {
    console.error('[Bot Proxy Error]:', err instanceof Error ? err.message : 'Unknown');
    // При сбое API отдаем дефолтные метаданные
  }

  // Генерация ультралегкого HTML-шелла исключительно для бота
  const metaHtml = `<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>${escapeHtml(title)}</title>
  <meta name="description" content="${escapeHtml(description)}">
  
  <!-- OpenGraph -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="${url.href}">
  <meta property="og:title" content="${escapeHtml(title)}">
  <meta property="og:description" content="${escapeHtml(description)}">
  <meta property="og:image" content="${ogImage}">
  
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="${escapeHtml(title)}">
  <meta name="twitter:description" content="${escapeHtml(description)}">
  <meta name="twitter:image" content="${ogImage}">
</head>
<body>
  <h1>${escapeHtml(title)}</h1>
  <p>${escapeHtml(description)}</p>
</body>
</html>`;

  return new Response(metaHtml, {
    status: 200,
    headers: {
      'Content-Type': 'text/html; charset=utf-8',
      'Vary': 'User-Agent',
      'Cache-Control': 'public, max-age=3600, s-maxage=86400',
    },
  });
}

function escapeHtml(str: string): string {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;');
}