📘 תיעוד 232

המרת Worker ל-Pages Function

עודכן לאחרונה ב-21 באפריל 2026

במדריך זה תלמדו איך להמיר Worker שנבנה לקבלת שליחות טופס ל-Pages Function שאפשר לארח באפליקציית Cloudflare Pages שלכם. Pages Functions היא פונקציה ללא שרת שחיה באותה תיקיית פרויקט כמו האפליקציה שלכם, ונפרסת עם Cloudflare Pages. היא מאפשרת להריץ קוד בצד השרת שמוסיף פונקציונליות דינמית בלי להריץ שרת ייעודי. ייתכן שתרצו להמיר Worker ל-Pages Function מאחת הסיבות האלה:

1. אם אתם מנהלים פונקציה ללא שרת שהאפליקציה שלכם ב-Pages תלויה בה, ורוצים לשלוח את הלוגיקה בלי לנהל Worker כשירות נפרד.
2. אם אתם מעבירים את ה-Worker ל-Pages Functions ורוצים להשתמש ביכולות הניתוב וה-middleware של Pages Functions.

הערה

אפשר לייבא את ה-Worker לפרויקט Pages בלי להשתמש ב-Functions, על ידי יצירת קובץ _worker.js בתיקיית הפלט של פרויקט ה-Pages. מצב מתקדם זה דורש לכתוב את ה-Worker עם תחביר Module.

עם זאת, כשמשתמשים בקובץ _worker.js ב-Pages, כל תיקיית /functions מתעלמת, כולל מאפייני הניתוב וה-middleware שלה.

#שלבי המרה כלליים

1. הסירו את ה-fetch handler והחליפו אותו במתודת OnRequest המתאימה. עיינו ב-Functions כדי לבחור את המתודה המתאימה ל-Function שלכם.
2. העבירו את אובייקט context כארגומנט למתודת OnRequest החדשה כדי לגשת למאפייני פרמטר ה-context: request, env, params ו-next.
3. השתמשו ב-middleware כדי לטפל בלוגיקה שחייבת לרוץ לפני או אחרי מטפלי הנתיב. למידע נוסף על שימוש ב-Middleware בתיעוד של Functions.

#רקע

כדי להסביר את תהליך ההמרה, המדריך הזה משתמש בדוגמה פשוטה של שליחת טופס.

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

בהנחה שאתם כבר משתמשים ב-Worker לטיפול בטופס, הייתם פורסים את ה-Worker ואז מוסיפים את ה-URL למאפיין action של הטופס בטופס ה-HTML. המשמעות היא שכשאתם משנים את האופן שבו ה-Worker מטפל בשליחות, אתם חייבים לעשות שינויים בסקריפט של ה-Worker. אם הלוגיקה ב-Worker משמשת יותר מאפליקציה אחת, Pages Functions לא יהיו מקרה שימוש טוב.

עם זאת, יכול להיות מועיל להשתמש ב-Pages Function כשאתם רוצים לארגן את לוגיקת הפונקציה באותה תיקיית פרויקט כמו האפליקציה.

בניית האפליקציה באמצעות Pages Functions יכולה לעזור לנהל את לוגיקת הלקוח ואת הלוגיקה ללא שרת מאותו מקום, ולהקל על כתיבה ועל ניפוי שגיאות של הקוד.

#טיפול ברשומות טופס עם Airtable ו-Workers

Airtable היא פלטפורמת low-code לבניית אפליקציות שיתופיות. היא עוזרת להתאים את תהליך העבודה, לשתף פעולה ולטפל בשליחות טופס. בדוגמה זו תשתמשו בתכונת שליחת הטפסים של Airtable.

Airtable יכולה לשמש לאחסון רשומות מידע בטבלאות שונות לאותו חשבון. כשיוצרים Worker לטיפול בלוגיקת השליחה, הצעד הראשון הוא להשתמש ב-Wrangler כדי לאתחל Worker חדש בתוך תיקייה מסוימת או בשורש האפליקציה.

הצעד הזה יוצר את תבנית הבסיס לכתיבת Worker השליחה ל-Airtable. אחרי כתיבת ה-Worker, אפשר לפרוס אותו לרשת הגלובלית של Cloudflare אחרי שמגדירים את הפרויקט לפריסה. עיינו בתיעוד של Workers למדריך מלא על טיפול בשליחת טופס עם Workers.

בלוק הקוד הבא מציג דוגמה ל-Worker שמטפל בשליחת טופס ל-Airtable.

הפונקציה האסינכרונית submitHandler נקראת אם ה-pathname של העבודה הוא /submit. הפונקציה הזו בודקת שמתודת הבקשה היא בקשת POST, ואז ממשיכה לנתח ולפרסם את רשומות הטופס ל-Airtable באמצעות האישורים שלכם, שאפשר לאחסן באמצעות Wrangler secret.

export default {
	async fetch(request, env, ctx) {
		const url = new URL(request.url);

		if (url.pathname === "/submit") {
			return submitHandler(request, env);
		}

		return fetch(request.url);
	},
};

async function submitHandler(request, env) {
	if (request.method !== "POST") {
		return new Response("Method not allowed", {
			status: 405,
		});
	}
	const body = await request.formData();

	const { first_name, last_name, email, phone, subject, message } =
		Object.fromEntries(body);

	const reqBody = {
		fields: {
			"First Name": first_name,
			"Last Name": last_name,
			Email: email,
			"Phone number": phone,
			Subject: subject,
			Message: message,
		},
	};

	return HandleAirtableData(reqBody, env);
}

const HandleAirtableData = (body, env) => {
	return fetch(
		`https://api.airtable.com/v0/${env.AIRTABLE_BASE_ID}/${encodeURIComponent(
			env.AIRTABLE_TABLE_NAME,
		)}`,
		{
			method: "POST",
			body: JSON.stringify(body),
			headers: {
				Authorization: `Bearer ${env.AIRTABLE_API_KEY}`,
				"Content-type": `application/json`,
			},
		},
	);
};

#המרת ה-Worker

כדי להמיר את ה-Worker שלמעלה, עברו לתיקיית פרויקט ה-Pages וצרו תיקיית /functions. בתוך /functions צרו קובץ form.js. הקובץ הזה יטפל בשליחות טופס.

לאחר מכן, בקובץ form.js, ייצאו onRequestPost יחיד:

export async function onRequestPost(context) {
	return await submitHandler(context);
}

לכל Worker יש addEventListener להאזנה לאירועי fetch, אבל לא תצטרכו את זה ב-Pages Function. במקום זאת, תבצעו export לפונקציית onRequest יחידה, ובהתאם לבקשת ה-HTTPS שהיא מטפלת בה, תתנו לה שם בהתאם. עיינו ב-תיעוד Function כדי לבחור את המתודה המתאימה לפונקציה שלכם.

הקוד שלמעלה מקבל request ו-env כארגומנטים שמעבירים את המאפיינים האלה לפונקציה submitHandler, שנשארת ללא שינוי מה-Worker המקורי. עם זאת, מכיוון ש-Functions מאפשרות לציין את סוג בקשת ה-HTTPS, אפשר להסיר את בדיקת request.method ב-Worker. זה מטופל עכשיו על ידי Pages Functions באמצעות מתן שם למטפל onRequest.

עכשיו תציגו את הפונקציה submitHandler ותעבירו את הפרמטר env כמאפיין. זה יאפשר לגשת ל-env בפונקציה HandleAirtableData למטה. הפונקציה הזו מבצעת בקשת POST ל-Airtable באמצעות האישורים של Airtable:

export async function onRequestPost(context) {
	return await submitHandler(context);
}

async function submitHandler(context) {
	const body = await context.request.formData();

	const { first_name, last_name, email, phone, subject, message } =
		Object.fromEntries(body);

	const reqBody = {
		fields: {
			"First Name": first_name,
			"Last Name": last_name,
			Email: email,
			"Phone number": phone,
			Subject: subject,
			Message: message,
		},
	};

	return HandleAirtableData({ body: reqBody, env: env });
}

לבסוף, צרו פונקציית HandleAirtableData. הפונקציה הזו תשלח בקשת fetch ל-Airtable עם האישורים של Airtable ועם גוף הבקשה:

// ..
const HandleAirtableData = async function onRequest({ body, env }) {
	return fetch(
		`https://api.airtable.com/v0/${env.AIRTABLE_BASE_ID}/${encodeURIComponent(
			env.AIRTABLE_TABLE_NAME,
		)}`,
		{
			method: "POST",
			body: JSON.stringify(body),
			headers: {
				Authorization: `Bearer ${env.AIRTABLE_API_KEY}`,
				"Content-type": `application/json`,
			},
		},
	);
};

אפשר לבדוק את ה-Function מקומית באמצעות Wrangler. עם השלמת המדריך הזה, המרתם בהצלחה את Worker שליחת הטופס ל-Pages Function של שליחת טופס.

#משאבים קשורים

• טפסי HTML
• תיעוד Plugins
• תיעוד Functions