📘 תיעוד 244

שימוש ב-R2 כאחסון נכסים סטטיים עם Cloudflare Pages

עודכן לאחרונה: 29 בינואר 2026 | העתק כ-Markdown | הצג כ-Markdown | הגדרת סוכן

מדריך זה ילמד אותך כיצד להשתמש ב-R2 כדלי (bucket) לאחסון נכסים סטטיים עבור יישום ה-Pages שלך. הדבר מועיל במיוחד אם אתה מגיע אל מגבלת הקבצים או אל מגבלת גודל הקובץ המרבי ב-Pages.

כדי להדגים כיצד הדבר מתבצע, נשתמש ב-R2 כאחסון נכסים סטטיים עבור בלוג חתולים בדיוני.

#בלוג החתולים

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

הבלוג מתארח ב-Pages וכעת יש לו את מבנה התיקיות הבא:

.
├── public
│   ├── index.html
│   ├── static
│   │   ├── favicon.ico
│   │   └── logo.png
│   └── style.css
└── wrangler.jsonc

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

#יצירת דלי R2

הצעד הראשון הוא יצירת דלי R2 לאחסון הנכסים הסטטיים. ניתן ליצור דלי חדש באמצעות לוח הבקרה (dashboard) או באמצעות Wrangler.

בשימוש בלוח הבקרה, נווט ללשונית R2, ולאחר מכן לחץ על Create bucket. אנו נקרא לדלי עבור הבלוג שלנו cat-media. זכור תמיד לתת לדליים שלך שמות תיאוריים:

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

לחלופין, ניתן ליצור דלי R2 באמצעות Wrangler משורת הפקודה על ידי הרצת:

npx wrangler r2 bucket create <bucket_name>
# i.e
# npx wrangler r2 bucket create cat-media

ניתן להעלות קבצים אל הדלי באמצעות הפקודה הבאה:

npx wrangler r2 object put <bucket_name>/<file_name> -f <path_to_file>
# i.e
# npx wrangler r2 object put cat-media/videos/video1.mp4 -f ~/Downloads/videos/video1.mp4

#קישור R2 אל Pages

כדי לקשר את דלי ה-R2 שיצרנו אל בלוג החתולים, עלינו לעדכן את תצורת Wrangler.

פתח את קובץ התצורה של Wrangler, והוסף את הקישור הבא לקובץ. הערך bucket_name צריך להיות השם המדויק של הדלי שנוצר קודם לכן, בעוד שהערך binding יכול להיות כל שם מותאם אישית המתייחס למשאב ה-R2:

תצורת jsonc:

{
	"r2_buckets": [
		{
			"binding": "MEDIA",
			"bucket_name": "cat-media"
		}
	]
}

תצורת toml:

[[r2_buckets]]
binding = "MEDIA"
bucket_name = "cat-media"

הערה

הערה: מילת המפתח ASSETS שמורה ולא ניתן להשתמש בה כקישור משאב.

שמור את קובץ התצורה של Wrangler, ואנו מוכנים לעבור לשלב האחרון.

לחלופין, תוכל להוסיף קישור לפרויקט ה-Pages שלך בלוח הבקרה על ידי ניווט אל לשונית Settings של הפרויקט > Functions > R2 bucket bindings.

#הגשת נכסי R2 מתוך Pages

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

בתיקיית הפרויקט, צור תיקיית functions. לאחר מכן, צור תת תיקייה בשם media וקובץ בשם [[all]].js בתוכה. כל בקשות ה-HTTP אל /media ינותבו לקובץ זה.

לאחר יצירת התיקיות וקובץ ה-JavaScript, מבנה התיקיות של הבלוג אמור להיראות כך:

.
├── functions
│   └── media
│       └── [[all]].js
├── public
│   ├── index.html
│   ├── static
│   │   ├── favicon.ico
│   │   └── icon.png
│   └── style.css
└── wrangler.jsonc

לבסוף, נוסיף פונקציית טיפול אל [[all]].js. פונקציה זו מקבלת את כל בקשות המדיה, ומחזירה את קובץ הנכס המתאים מ-R2:

export async function onRequestGet(ctx) {
	const path = new URL(ctx.request.url).pathname.replace("/media/", "");
	const file = await ctx.env.MEDIA.get(path);
	if (!file) return new Response(null, { status: 404 });
	return new Response(file.body, {
		headers: { "Content-Type": file.httpMetadata.contentType },
	});
}

#פריסת הבלוג

לפני פריסת השינויים שבוצעו עד כה בבלוג החתולים שלנו, בוא נוסיף כמה פוסטים חדשים אל index.html. פוסטים אלה תלויים בנכסי מדיה המוגשים מ-R2:

<!doctype html>
<html lang="en">
	<body>
		<h1>Awesome Cat Blog! 😺</h1>
		<p>Today's post:</p>
		<video width="320" controls>
			<source src="/media/videos/video1.mp4" type="video/mp4" />
		</video>
		<p>Yesterday's post:</p>
		<img src="/media/images/cat1.jpg" width="320" />
	</body>
</html>

כאשר כל הקבצים שמורים, פתח חלון מסוף חדש כדי לפרוס את היישום:

npx wrangler deploy

לאחר הפריסה, נכסי מדיה מאוחזרים ומוגשים מתוך דלי ה-R2.

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

• למד כיצד ניתוב פונקציות עובד ב-Pages.
• למד כיצד ליצור דליי R2 ציבוריים.
• למד כיצד להשתמש ב-R2 מתוך Workers.