Разработка Edge Functions для сайта на Deno Deploy

Отметим: когда ваш сайт обслуживает пользователей по всему миру, задержка ответа становится критичной. Любой roundtrip к origin-серверу добавляет сотни миллисекунд, ухудшая LCP и TTFB. Edge Functions на Deno Deploy решают эту проблему, выполняя код на периферии — в 35+ регионах, на V8 Isolates без холодного старта, что напрямую улучшает Core Web Vitals. Мы разрабатываем такие функции под ключ: middleware, генерацию OG-изображений, кеширование, авторизацию и персонализацию на границе сети.

Наш опыт — 5+ лет в Edge-разработке, 15+ проектов под ключ. Мы гарантируем стабильность и соответствие Core Web Vitals. В отличие от Lambda или Cloud Functions, код выполняется в миллисекундах от пользователя, потому что не поднимает контейнер — изолят уже готов. Как указано в документации Deno Deploy, платформа использует V8 Isolates и не требует холодного старта. Deno Deploy docs Типичные задачи: A/B-тестирование на уровне CDN, персонализация по геолокации, middleware для авторизации, проксирование запросов с трансформацией, генерация динамических OG-изображений.

Как работает Deno Deploy

Каждая функция — это ES module с обработчиком Deno.serve. Платформа не поддерживает файловую систему (кроме bundle), нет setTimeout с длинными задержками, нет фонового выполнения после ответа (кроме waitUntil).

// entry.ts
Deno.serve(async (req: Request) => {
  const url = new URL(req.url);
  if (url.pathname === '/api/geo') {
    const country = req.headers.get('x-deno-country') ?? 'unknown';
    const region = req.headers.get('x-deno-region') ?? 'unknown';
    return Response.json({ country, region });
  }
  return new Response('Not Found', { status: 404 });
});

Деплой через CLI одной командой: deployctl deploy --project=my-site entry.ts.

Почему Edge Functions быстрее обычного бэкенда?

Ключевое преимущество — отсутствие холодного старта и выполнение на периферии. Запрос обрабатывается в регионе пользователя, latency снижается с 200-500 мс до 10-30 мс. Это напрямую улучшает LCP и TTFB. Кроме того, Edge-функции разгружают origin-сервер, обрабатывая кеширование и авторизацию без лишних roundtrip.

Middleware для авторизации: как устранить roundtrip к бэкенду?

Часто нужно проверить JWT до origin. На Edge это происходит без обращения к основному серверу:

import { create, verify, getNumericDate } from 'https://deno.land/x/[email protected]/mod.ts';
const JWT_SECRET = Deno.env.get('JWT_SECRET')!;
async function getKey(secret: string): Promise<CryptoKey> {
  const enc = new TextEncoder();
  return await crypto.subtle.importKey(
    'raw',
    enc.encode(secret),
    { name: 'HMAC', hash: 'SHA-256' },
    false,
    ['sign', 'verify']
  );
}
Deno.serve(async (req: Request) => {
  const url = new URL(req.url);
  if (url.pathname.startsWith('/public') || url.pathname === '/') {
    return await fetch(req);
  }
  const authHeader = req.headers.get('Authorization');
  if (!authHeader?.startsWith('Bearer ')) {
    return new Response('Unauthorized', { status: 401 });
  }
  const token = authHeader.slice(7);
  try {
    const key = await getKey(JWT_SECRET);
    const payload = await verify(token, key);
    const modifiedReq = new Request(req, {
      headers: {
        ...Object.fromEntries(req.headers),
        'x-user-id': String(payload.sub),
        'x-user-role': String(payload.role ?? 'user'),
      },
    });
    return await fetch(modifiedReq);
  } catch {
    return new Response('Invalid token', { status: 401 });
  }
});

Типичная ошибка — неверный импорт ключа: используйте crypto.subtle.importKey с правильным форматом.

Как интегрировать Edge-функции с существующим сайтом?

Deno Deploy работает как Edge Layer перед origin. Схема проста: DNS → Deno Deploy → Origin Server.

1. Настройте DNS: направьте трафик на Deno Deploy (например, через CNAME на deno.dev или собственный домен).
2. Напишите функции-обработчики, которые решают: проксировать запрос на бэкенд, изменить его или ответить самостоятельно.
3. Задеплойте через CLI или GitHub Actions. Менять текущий бэкенд не требуется.

{ "tasks": { "dev": "deno run --allow-net --allow-env --watch entry.ts", "deploy": "deployctl deploy --project=my-site --prod entry.ts" }, "imports": { "djwt": "https://deno.land/x/[email protected]/mod.ts" }, "deploy": { "project": "my-site", "entrypoint": "entry.ts", "include": ["entry.ts", "lib/"] } }
</details>
### Генерация OG-изображений на Edge
Satori — библиотека для рендеринга JSX в SVG — работает в Deno Deploy. Позволяет генерировать уникальные preview-картинки для каждой страницы без prebuild:
```typescript
import satori from 'npm:[email protected]';
import { Resvg } from 'npm:@resvg/[email protected]';

Deno.serve(async (req: Request) => {
  const url = new URL(req.url);
  if (!url.pathname.startsWith('/og')) return new Response('Not Found', { status: 404 });
  const title = url.searchParams.get('title') ?? 'My Site';
  const description = url.searchParams.get('desc') ?? '';
  const fontResponse = await fetch('https://your-cdn.com/fonts/Inter-Bold.ttf');
  const fontBuffer = await fontResponse.arrayBuffer();
  const svg = await satori(
    {
      type: 'div',
      props: {
        style: {
          display: 'flex',
          flexDirection: 'column',
          width: '100%',
          height: '100%',
          background: '#0f172a',
          padding: '60px',
          fontFamily: 'Inter',
        },
        children: [
          {
            type: 'h1',
            props: {
              style: {
                color: '#f8fafc',
                fontSize: 56,
                margin: 0,
                lineHeight: 1.2
              },
              children: title,
            },
          },
          {
            type: 'p',
            props: {
              style: {
                color: '#94a3b8',
                fontSize: 28,
                marginTop: 24
              },
              children: description,
            },
          },
        ],
      },
    },
    {
      width: 1200,
      height: 630,
      fonts: [{ name: 'Inter', data: fontBuffer, weight: 700, style: 'normal' }],
    }
  );
  const resvg = new Resvg(svg);
  const png = resvg.render().asPng();
  return new Response(png, {
    headers: {
      'Content-Type': 'image/png',
      'Cache-Control': 'public, max-age=86400, stale-while-revalidate=604800',
    },
  });
});
```

const kv = await Deno.openKv();
Deno.serve(async (req: Request) => {
  const url = new URL(req.url);
  const cacheKey = ['cache', url.pathname + url.search];
  const cached = await kv.get<string>(cacheKey);
  if (cached.value) {
    return new Response(cached.value, {
      headers: {
        'Content-Type': 'application/json',
        'X-Cache': 'HIT',
      },
    });
  }
  const response = await fetch(`https://api.example.com${url.pathname}`);
  const data = await response.text();
  await kv.set(cacheKey, data, { expireIn: 5 * 60 * 1000 });
  return new Response(data, {
    headers: {
      'Content-Type': 'application/json',
      'X-Cache': 'MISS',
    },
  });
});