📘 תיעוד 192

ממשק שורת פקודה (CLI)

הגדירו ופרסו את ה-Worker הראשון עם Wrangler, ממשק שורת הפקודה של פלטפורמת המפתחים של Cloudflare.

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

#דרישות מוקדמות

1. הירשמו לחשבון Cloudflare ↗︎.
2. התקינו את Node.js ↗︎.

#מנהל גרסאות של Node.js

השתמשו ב-Vite+ (vp env) ↗︎ כדי להתקין ולנהל גרסאות של Node.js.

לגרסאות Node.js הנתמכות, עיינו בדרישות המערכת של Wrangler.

#1. יצירת פרויקט Worker חדש

פתחו חלון מסוף והריצו את C3 כדי ליצור את פרויקט ה-Worker. C3 (create-cloudflare-cli) ↗︎ הוא כלי שורת פקודה שנועד לעזור לכם להגדיר ולפרוס יישומים חדשים ל-Cloudflare.

npm:

npm create cloudflare@latest -- my-first-worker

yarn:

yarn create cloudflare my-first-worker

pnpm:

pnpm create cloudflare@latest my-first-worker

להגדרה, בחרו באפשרויות הבאות:

• עבור What would you like to start with?, בחרו Hello World example.
• עבור Which template would you like to use?, בחרו Worker only.
• עבור Which language do you want to use?, בחרו JavaScript.
• עבור Do you want to use git for version control?, בחרו Yes.
• עבור Do you want to add an AGENTS.md file to help AI coding tools understand Cloudflare APIs?, בחרו Yes.
• עבור Do you want to deploy your application?, בחרו No (נבצע כמה שינויים לפני הפריסה).

עכשיו יש לכם פרויקט חדש מוגדר. עברו לתיקיית הפרויקט.

cd my-first-worker

#אילו קבצים יצר C3?

בתיקיית הפרויקט, C3 ייצר את הקבצים הבאים:

• wrangler.jsonc: קובץ התצורה של Wrangler. C3 מפעיל העלאות source map לפרויקטי JavaScript ו-TypeScript, כדי שמחסניות חריגים שנתפסו יצביעו על הקוד המקורי שלכם.
• index.js (ב-/src): Worker מינימלי של 'Hello World!' שנכתב בתחביר ES module.
• package.json: קובץ תצורה מינימלי של תלויות Node.
• package-lock.json: עיינו בתיעוד npm על package-lock.json ↗︎.
• node_modules: עיינו בתיעוד npm על node_modules ↗︎.

#מה אם כבר יש לי פרויקט במאגר git?

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

npm create cloudflare@latest -- --template <SOURCE>

<SOURCE> יכול להיות אחד מהבאים:

• user/repo (GitHub)
• [email protected]:user/repo
• https://github.com/user/repo
• user/repo/some-template (תת-תיקיות)
• user/repo#canary (ענפים)
• user/repo#1234abcd (hash של commit)
• bitbucket:user/repo (Bitbucket)
• gitlab:user/repo (GitLab)

תיקיית התבנית הקיימת חייבת להכיל את הקבצים הבאים, לכל הפחות, כדי לעמוד בדרישות של Cloudflare Workers:

• package.json
• wrangler.jsonc ראו תצורת Wrangler לדוגמה
• src/ שמכיל סקריפט worker שמופנה מ-wrangler.jsonc

#2. פיתוח עם Wrangler CLI

C3 מתקין את Wrangler, ממשק שורת הפקודה של Workers, בפרויקטי Workers כברירת מחדל. Wrangler מאפשר לכם ליצור, לבדוק ולפרוס את פרויקטי ה-Workers שלכם.

אחרי שיצרתם את ה-Worker הראשון, הריצו את הפקודה wrangler dev בתיקיית הפרויקט כדי להפעיל שרת מקומי לפיתוח ה-Worker. זה יאפשר לכם לצפות בתצוגה מקדימה של ה-Worker באופן מקומי במהלך הפיתוח.

npx wrangler dev

אם מעולם לא השתמשתם ב-Wrangler, הוא יפתח את דפדפן האינטרנט כדי שתוכלו להתחבר לחשבון Cloudflare שלכם.

עברו אל http://localhost:8787 ↗︎ כדי לצפות ב-Worker.

#בעיות בדפדפן?

אם יש לכם בעיות בשלב הזה, או שאין לכם גישה לממשק דפדפן, עיינו בתיעוד של wrangler login.

#3. כתיבת קוד

כשהפרויקט החדש נוצר ורץ, אפשר להתחיל לכתוב ולערוך את הקוד.

מצאו את הקובץ src/index.js. index.js ימולא בקוד שלהלן:

Original index.jsjs

export default {
	async fetch(request, env, ctx) {
		return new Response("Hello World!");
	},
};

#הסבר הקוד

בלוק הקוד הזה מורכב מכמה חלקים שונים.

Updated index.jsjs

export default {
	async fetch(request, env, ctx) {
		return new Response("Hello World!");
	},
};

export default הוא תחביר JavaScript שנדרש להגדרת מודולי JavaScript ↗︎. ל-Worker חייב להיות ייצוא ברירת מחדל של אובייקט, עם מאפיינים שתואמים לאירועים שה-Worker צריך לטפל בהם.

index.jsjs

export default {
	async fetch(request, env, ctx) {
		return new Response("Hello World!");
	},
};

מטפל fetch() הזה ייקרא כשה-Worker מקבל בקשת HTTP. אפשר להגדיר מטפלי אירועים נוספים באובייקט המיוצא כדי להגיב לסוגים שונים של אירועים. לדוגמה, הוסיפו מטפל scheduled() כדי להגיב להפעלות Worker דרך Cron Trigger.

בנוסף, למטפל fetch תמיד יועברו שלושה פרמטרים: request, env ו-context.

index.jsjs

export default {
	async fetch(request, env, ctx) {
		return new Response("Hello World!");
	},
};

סביבת הריצה של Workers מצפה שמטפלי fetch יחזירו אובייקט Response או Promise שמתפרק עם אובייקט Response. בדוגמה הזו תחזירו Response חדש עם המחרוזת "Hello World!".

החליפו את התוכן בקובץ index.js הנוכחי בתוכן שלהלן, שמשנה את פלט הטקסט.

index.jsjs

export default {
	async fetch(request, env, ctx) {
		return new Response("Hello Worker!");
	},
};

אחר כך שמרו את הקובץ וטענו מחדש את הדף. הפלט של ה-Worker ישתנה לטקסט החדש.

#אין שינוי נראה לעין?

אם הפלט של ה-Worker לא משתנה, ודאו ש:

1. שמרתם את השינויים ב-index.js.
2. wrangler dev רץ.
3. טענתם מחדש את הדפדפן.

#4. פריסת הפרויקט

פרסו את ה-Worker באמצעות Wrangler לתת-דומיין *.workers.dev או ל-Custom Domain.

npx wrangler deploy

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

צפו בתצוגה מקדימה של ה-Worker בכתובת <YOUR_WORKER>.<YOUR_SUBDOMAIN>.workers.dev.

#רואים שגיאות 523?

אם אתם רואים שגיאות 523 כשדוחפים את תת-הדומיין *.workers.dev בפעם הראשונה, המתינו כדקה בערך והשגיאות ייפתרו מעצמן.

#השלבים הבאים

כדי לעשות יותר:

• דחפו את הפרויקט למאגר Artifacts, GitHub או GitLab, ואז התחברו ל-builds כדי לאפשר בניות ופריסות אוטומטיות.
• בקרו בלוח הבקרה של Cloudflare ↗︎ לעריכה פשוטה יותר.
• עיינו בדוגמאות ובמדריכים להשראה.
• הגדירו bindings כדי לאפשר ל-Worker לקיים אינטראקציה עם משאבים אחרים ולפתוח פונקציונליות חדשה.
• למדו איך לבדוק ולנפות באגים ב-Workers שלכם.
• קראו על מגבלות ותמחור של Workers.