📄 פרק 11

Cloudflare Pages ואירוח אפליקציות

פלטפורמת Cloudflare Pages מיועדת לאירוח ופריסה של אתרי אינטרנט סטטיים ואפליקציות Full-Stack מודרניות (כגון React, Next.js, Astro, Vue, Svelte, Nuxt, ו-Hugo) על גבי רשת הקצה העולמית.

במקום לנהל שרתי אחסון, שרתי Nginx ותהליכי CI/CD מורכבים, Pages מחברת ישירות בין מאגר הקוד (Repository) להפצה הגלובלית.

תהליך הפריסה ב-Cloudflare Pages:
[מפתח: git push] ──> [GitHub / GitLab] ──> [Pages Build Runner] ──> [הפצה לשרתי הקצה (Edge)]
                                                                               │
                                                                               ├── קבצים סטטיים במטמון קצה
                                                                               └── Pages Functions (צד שרת)

#שלושה אופני פריסה

1. חיבור Git מלא (GitHub / GitLab):
   • בכל פעם שמבצעים git push לענף הראשי (main), קלאודפלייר מריצה את פקודת הבנייה (לדוגמה npm run build) ומפרסמת את האתר אוטומטית.
   • בכל פתיחת Pull Request (PR), נוצרת סביבת תצוגה מקדימה ייחודית (Preview Deployment) עם כתובת URL נפרדת לבדיקות לפני מיזוג לקוד הייצור.
2. העלאה ישירה משורת הפקודה (Direct Upload / Wrangler):
   • מתאים למערכות CI/CD מותאמות אישית או למי שאינו מעוניין לחבר את חשבון ה-Git ישירות:

   העתק

   npx wrangler pages deploy ./dist --project-name=my-awesome-site

3. אשף היצירה C3:
   • יצירת פרויקט חדש מאפס עם מסגרת עבודה מודרנית:

   העתק

   npm create cloudflare@latest --pages

#הוספת לוגיקת צד-שרת עם Pages Functions

פלטפורמת Pages מאפשרת להוסיף קוד צד-שרת (Serverless) לפרויקט ללא צורך בהקמת שרת Backend נפרד. כל קובץ הנמצא בתוך תיקיית /functions בפרויקט הופך אוטומטית לנקודת קצה (API Endpoint) הרצה ב-Workers:

מבנה תיקיות לדוגמה:
my-project/
├── dist/                  # הקבצים הסטטיים של האתר (HTML, CSS, JS)
└── functions/
    └── api/
        └── submit.ts      # מטפל בבקשות אל https://site.pages.dev/api/submit

#דוגמת קוד לפונקציית צד-שרת (functions/api/submit.ts):

interface Env {
  FEEDBACK_DB: D1Database;
}

export const onRequestPost: PagesFunction<Env> = async (context) => {
  const data = await context.request.json<{ name: string; message: string }>();

  // שמירה ישירה במסד הנתונים D1 באמצעות Binding
  await context.env.FEEDBACK_DB.prepare(
    "INSERT INTO messages (name, message, created_at) VALUES (?, ?, ?)"
  ).bind(data.name, data.message, Date.now()).run();

  return Response.json({ success: true, message: "ההודעה נשמרה בהצלחה בשרת הקצה" });
};

#קובצי תצורה ייעודיים

Pages תומכת במספר קבצי הגדרה מיוחדים המוצבים בתיקיית הפלט הסטטית (dist / build):

#1. קובץ הפניות (_redirects)

מאפשר הגדרת הפניות 301, 302 או ניתוב SPA (Single Page Application):

# ניתוב SPA עבור React / Vue Router
/*    /index.html   200

# הפניות כתובת קבועות
/old-blog/*   /posts/:splat   301

#2. קובץ כותרות אבטחה (_headers)

מאפשר הזרקת כותרות HTTP לכלל הדפים או לנתיבים ספציפיים:

/*
  X-Frame-Options: SAMEORIGIN
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin

/assets/*
  Cache-Control: public, max-age=31536000, immutable

#ניהול גרסאות ושחזור מיידי (Rollbacks)

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

1. נכנסים ללוח הבקרה ב-Workers & Pages → הפרויקט שלכם → Deployments.
2. מאתרים את הגרסה היציבה הקודמת.
3. לוחצים על Rollback to this deployment.
4. האתר חוזר לגרסה הקודמת תוך פחות משנייה אחת, ללא צורך בהרצת בנייה מחדש או שינויים בקוד ה-Git.

#השוואה: Pages מול Workers מול Tunnel

בפרק הבא נכיר את שירות Cloudflare R2 לאחסון אובייקטים וקבצים תואם S3 ללא עלויות תעבורה יוצאת.