הגדרת פריסה ב-Vercel: תצורה, Serverless, CI/CD

הגדרת פריסה ב-Vercel: תצורה, Serverless, CI/CD

תארו לעצמכם: אתם מפעילים פריסה ב-Vercel, אבל במערכת הייצור מופיעה שגיאה שלא הייתה קיימת מקומית. אי-התאמת Hydration, משתני סביבה שגויים, או סקירת PR שנמשכת בגלל קישורי תצוגה מקדימה חסרים. נתקלנו בזה עשרות פעמים ואנחנו יודעים כיצד להגדיר את Vercel כך שהפריסה תפסיק להיות צוואר בקבוק. בפרויקט אחד עם Next.js 14, ייעלנו את Serverless Functions על ידי פיצול פונקציה מונוליטית למספר מיקרוסרוויסים — זה קיצר את זמן התגובה של ה-API ב-40% (הפך את ה-API למהיר פי 1.7) והפחית את זמן ה-cold start מ-3 שניות ל-200 מילישניות. בנוסף, זה הוריד את עלויות Serverless Functions בכ-200 דולר לחודש.

אנחנו צוות מהנדסים עם ניסיון של חמש שנים בפיתוח Next.js ו-React. במהלך הזמן הזה, הגדרנו את Vercel ליותר מ-30 פרויקטים — מדפי נחיתה ועד לוחות מחוונים מורכבים עם Serverless Functions. אנחנו מבטיחים פעולה יציבה לאחר הפריסה.

כיצד Vercel פותר את בעיית הסביבה?

Vercel יוצר אוטומטית שלוש סביבות: Production, Preview ו-Development. לכל אחת יש משתני סביבה, דומיינים והגדרות משלה. Preview Deployments לכל PR מספקים קישור מוכן לסקירה לפני המיזוג. זה מבטל את הבעיה של "אבל זה עבד מקומית".

טיפלנו ביותר מ-500 פריסות והפחתנו את זמן החזרה לאחור ב-60% לאחר יישום Preview Deployments: עכשיו כל PR נבדק מול עותק מדויק של מערכת הייצור.

כיצד לחבר דומיין מותאם אישית?

1. בלוח הבקרה של Vercel, פתחו Project → Settings → Domains.
2. הוסיפו את הדומיין והגדירו רשומות DNS (CNAME).
3. חכו לאימות (בדרך כלל 2–5 דקות).
4. הגדירו הפניות (www ללא www) ב-# Установка CLI npm install -g vercel # Деплой из текущей директории vercel # Деплой с настройками vercel --prod # production vercel --env preview # staging .

תצורת Vercel: מחיבור ועד Production

חיבור פרויקט

# Установка CLI
npm install -g vercel
# Деплой из текущей директории
vercel
# Деплой с настройками
vercel --prod # production
vercel --env preview # staging

הגדרת vercel.json

קובץ התצורה vercel.json שולט בניתוב, כותרות אבטחה, אזורים ופקודות בנייה. להלן דוגמה לפרויקט Vite עם פרוקסי API וכותרות מחמירות.

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "installCommand": "npm ci",
  "framework": "vite",
  "rewrites": [
    {
      "source": "/api/(.*)",
      "destination": "https://api.example.com/$1"
    },
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "Strict-Transport-Security",
          "value": "max-age=31536000; includeSubDomains"
        }
      ]
    },
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ],
  "regions": ["fra1", "iad1"]
}

הוספת Serverless Functions

מחשוב Serverless הוא מודל ביצוע בענן שבו ספק הענן מנהל דינמית את ההקצאה והאספקה של שרתים (מקור: ויקיפדיה).

Serverless Functions ב-Node.js, Python, Go אידיאליות לפרוקסי API, שליחת מיילים, עיבוד webhooks. זמינות של מעל 99.99% אופיינית ל-Vercel Serverless Functions. דוגמה למטפל בטופס יצירת קשר באמצעות Resend:

// api/contact.ts (Vercel Edge Function)
import type { VercelRequest, VercelResponse } from '@vercel/node';

export default async function handler(req: VercelRequest, res: VercelResponse) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  const { name, email, message } = req.body;

  // Отправить через Resend
  const response = await fetch('https://api.resend.com/emails', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${process.env.RESEND_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      from: '[email protected]',
      to: '[email protected]',
      subject: `Новое сообщение от ${name}`,
      html: `<p>${message}</p>`,
    }),
  });

  return res.status(response.ok ? 201 : 500).json({ ok: response.ok });
}

אוטומציה עם GitHub Actions

לאוטומציה של פריסה אנו משתמשים ב-GitHub Actions. דחיפה ל-{ "buildCommand": "npm run build", "outputDirectory": "dist", "installCommand": "npm ci", "framework": "vite", "rewrites": [ { "source": "/api/(.*)", "destination": "https://api.example.com/$1" }, { "source": "/(.*)", "destination": "/index.html" } ], "headers": [ { "source": "/(.*)", "headers": [ { "key": "X-Frame-Options", "value": "DENY" }, { "key": "X-Content-Type-Options", "value": "nosniff" }, { "key": "Strict-Transport-Security", "value": "max-age=31536000; includeSubDomains" } ] }, { "source": "/assets/(.*)", "headers": [ { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" } ] } ], "regions": ["fra1", "iad1"] } מפעילה פריסת production, פתיחת PR מפעילה תצוגה מקדימה. הצינור הזה הפחית שגיאות פריסה ידניות ב-80% בפרויקטים שלנו. דוגמה ל-workflow:

---
# .github/workflows/deploy.yml
name: Deploy to Vercel

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: ${{ github.event_name == 'push' && '--prod' || '' }}

משתני סביבה לסביבות שונות

# Добавить через CLI vercel env add DATABASE_URL production vercel env add API_KEY preview # Просмотреть vercel env ls 

בלוח הבקרה של Vercel → Project → Settings → Environment Variables. ערכים שונים עבור Production, Preview, Development. אל תאחסנו מפתחות בקוד — השתמשו בחשבונות שירות.

כיצד להגדיר Preview Deployments?

כל PR מקבל אוטומטית כתובת URL ייחודית כמו // api/contact.ts (Vercel Edge Function) import type { VercelRequest, VercelResponse } from '@vercel/node'; export default async function handler(req: VercelRequest, res: VercelResponse) { if (req.method !== 'POST') { return res.status(405).json({ error: 'Method not allowed' }); } const { name, email, message } = req.body; // Отправить через Resend const response = await fetch('https://api.resend.com/emails', { method: 'POST', headers: { Authorization: `Bearer ${process.env.RESEND_API_KEY}`, 'Content-Type': 'application/json', }, body: JSON.stringify({ from: '[email protected]', to: '[email protected]', subject: `Новое сообщение от ${name}`, html: `<p>${message}</p>`, }), }); return res.status(response.ok ? 201 : 500).json({ ok: response.ok }); } . שימושי לסקירת עיצוב, בדיקות QA. ניתן להוסיף Basic Auth לסביבות תצוגה מקדימה על ידי ציון השדה main ב-# .github/workflows/deploy.yml name: Deploy to Vercel on: push: branches: [main] pull_request: branches: [main] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Deploy to Vercel uses: amondnet/vercel-action@v25 with: vercel-token: ${{ secrets.VERCEL_TOKEN }} vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} vercel-args: ${{ github.event_name == 'push' && '--prod' || '' }} .

Preview Deployments פורסים אוטומטית כל PR לכתובת URL ייחודית עם מופע יישום משלה ומשתני סביבה מבודדים. זה מאפשר לבדוק שינויים בתנאים זהים לייצור לפני המיזוג. לפרטיות, ניתן להגדיר Basic Auth.

למה Vercel מנצח אירוח מסורתי?

הלקוחות שלנו בדרך כלל רואים הפחתה של 30% בעלויות האירוח, חיסכון של 150–300 דולר לחודש. שירות הגדרת Vercel שלנו מתחיל ב-500 דולר לפרויקטים בסיסיים וגדל לפי מורכבות.

מה כלול?

• ביקורת על המאגר הנוכחי ותצורת הבנייה
• הגדרת פרויקט Vercel (משתני סביבה, דומיינים, SSL)
• אופטימיזציה של Serverless Functions (פיצול, caching, טיפול בשגיאות)
• הגדרת CI/CD באמצעות GitHub Actions או GitLab CI
• תיעוד על פריסה וארכיטקטורה
• הדרכת צוות על Preview Deployments
• תמיכה למשך שבועיים לאחר המסירה

מגבלות Vercel

ל-Vercel יש מספר מגבלות: Serverless Functions לא יכולות לרוץ יותר מ-10 שניות (עד 60 שניות בתוכנית Pro), חיבורי WebSocket מתמשכים לא נתמכים, ויישומי PHP (Laravel) לא עובדים בסביבת Serverless. לתרחישים כאלה, אירוח מסורתי או Edge Runtime עדיפים.

ציר זמן ומחירים

חיבור פרויקט Next.js/React ל-Vercel: 4–8 שעות כולל משתני סביבה והגדרת דומיין. לפרויקטים מורכבים עם פונקציות מותאמות אישית ו-CI/CD — עד 12 שעות. ניתן הערכה מדויקת לאחר ניתוח המאגר שלכם. המחירים מתחילים ב-500 דולר להגדרת אפליקציית Next.js פשוטה. השלמנו יותר מ-30 הגדרות Vercel.

הזמינו את ההגדרה — ותשכחו מבעיות סביבה. צרו קשר לייעוץ: נעזור לכם להגדיר את Vercel לפרויקט שלכם.