نشر Puppeteer API على Vercel مجاناً

عند بناء موقع توثيق بـ Nuxt، احتجت لتوليد صور Open Graph (OG) ديناميكية لكل صفحة. بينما يملك Nuxt وحدة OG image خاصة به، إلا أنها تعاني مع النص العربي والتخطيط من اليمين لليسار. إليك كيف حللت هذه المشكلة باستخدام Puppeteer على منصة Vercel serverless.

التحدي

بدأت مع Nuxt، بهدف إنشاء موقع بنمط التوثيق مع صور OG ديناميكية لكل صفحة. المشاكل الرئيسية كانت:

وحدة OG Image في Nuxt: تعمل بشكل سيء مع النص العربي واتجاه RTL
قيود Vercel: الدوال serverless لا تستطيع التعامل مع الحزم الكبيرة أو أوقات التنفيذ الطويلة
حجم Puppeteer: تثبيت Chromium الكامل كبير جداً لبيئات serverless

الحل: إعداد Puppeteer بسيط

بفضل @sparticuz/chromium-min و puppeteer-core، وجدت طريقة لنشر Puppeteer على Vercel دون تجاوز حدود الحجم أو المهلة الزمنية.

الخطوة 1: تثبيت الاعتماديات

npm install @sparticuz/chromium-min puppeteer-core

الخطوة 2: استيراد الوحدات المطلوبة

أنشئ مسار خادم واستورد الحزم اللازمة:

import chromium from "@sparticuz/chromium-min";
import puppeteerCore, { Browser, Page } from "puppeteer-core";

الخطوة 3: إعداد Chromium عن بُعد

بدلاً من تضمين Chromium في البناء، حمّله في وقت التشغيل. تأكد من مطابقة الإصدار مع الحزمة المثبتة:

const remoteExecutablePath =
  "https://github.com/Sparticuz/chromium/releases/download/v138.0.1/chromium-v138.0.1-pack.tar";

let browser: Browser | null = null;

الخطوة 4: تشغيل المتصفح

أنشئ مثيل المتصفح داخل دالة الخادم. للتطوير المحلي، استخدم Chromium مثبت مسبقاً:

if (!browser) {
  browser = await puppeteerCore.launch({
    args: chromium.args,
    executablePath: process.env.DEV
      ? "/usr/bin/chromium"  // التطوير المحلي
      : await chromium.executablePath(remoteExecutablePath),  // الإنتاج
    headless: true,
  });
}

الخطوة 5: استخدام Puppeteer كالمعتاد

الآن يمكنك استخدام API الكامل لـ Puppeteer:

const page = await browser.newPage();
await page.setViewport({ width: 1200, height: 630 });

// ضبط المحتوى مع دعم العربية
await page.setContent(`
  <!DOCTYPE html>
  <html lang="ar" dir="rtl">
    <head>
      <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" rel="stylesheet">
      <style>
        body {
          font-family: 'Cairo', sans-serif;
          direction: rtl;
        }
      </style>
    </head>
    <body>
      <h1>مرحباً بك</h1>
    </body>
  </html>
`);

// التقاط الشاشة
const screenshot = await page.screenshot({ type: 'png' });
await page.close();

return screenshot;

الفوائد الرئيسية

بدون تكلفة: يعمل على طبقة Vercel المجانية
دعم العربية: عرض مثالي لنص RTL
سريع: يتم تحميل Chromium مرة واحدة ويُخزن مؤقتاً
قابل للتوسع: الدوال serverless تتعامل مع الترافيك تلقائياً

شاهده في العمل

هذا بالضبط كيف تُولد صور OG على موقعي. تحقق من مثال: https://uqucc.sb.sa/برمجة-جافا

صورة OG التي تراها عند مشاركة هذا الرابط على وسائل التواصل الاجتماعي وُلدت عند الطلب باستخدام هذا الإعداد بالضبط!

الخلاصة

نشر Puppeteer على Vercel لا يجب أن يكون معقداً. مع الإعداد الصحيح باستخدام Chromium البسيط، يمكنك توليد صور ديناميكية، PDFs، أو كشط المحتوى—كل ذلك ضمن حدود Vercel المجانية السخية.

هذا النهج يعمل في الإنتاج منذ أشهر بدون أي مشاكل، يتعامل مع آلاف طلبات صور OG مجاناً!