תיעוד 196

התחלה

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

לחלופין, ייתכן שתעדיפו לבנות את האתר שלכם מאפס אם:

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

מדריך זה ינחה אתכם בהגדרה ובפריסה של אתר סטטי או יישום full-stack ללא מסגרת על Workers.

#פריסת אתר סטטי

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

#1. יצירת פרויקט Worker חדש באמצעות ה-CLI

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

npm

npm create cloudflare@latest -- my-static-site

yarn

yarn create cloudflare my-static-site

pnpm

pnpm create cloudflare@latest my-static-site

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

עבור What would you like to start with?, בחרו Hello World example.
עבור Which template would you like to use?, בחרו Static site.
עבור Which language do you want to use?, בחרו TypeScript.
עבור 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-static-site

#2. פיתוח מקומי

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

npx wrangler dev

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

אפשר לפרוס את הפרויקט לתת דומיין *.workers.dev או לדומיין מותאם אישית, מהמחשב שלכם או מכל מערכת CI/CD, כולל זו של Cloudflare עצמה.

wrangler deploy יבנה ויפרוס את הפרויקט. אם אתם משתמשים ב-CI, ודאו שאתם מעדכנים את הגדרת "deploy command" בהתאם.

npx wrangler deploy

הערה

למדו כיצד נכסים מוגדרים וכיצד ניתוב עובד מתוך הגדרת ניתוב.

#פריסת יישום full-stack

מדריך זה ינחה אתכם בהגדרה ובפריסה של יישומים דינמיים ואינטראקטיביים המרונדרים בצד השרת (SSR) על Cloudflare Workers.

כאשר בונים יישום full-stack, אפשר להשתמש בכל Workers bindings, כולל זה של הנכסים עצמם, כדי לקיים אינטראקציה עם משאבים בפלטפורמת המפתחים של Cloudflare.

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

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

פתחו חלון מסוף והריצו את C3 כדי ליצור את פרויקט ה-Worker שלכם:

npm

npm create cloudflare@latest -- my-dynamic-site

yarn

yarn create cloudflare my-dynamic-site

pnpm

pnpm create cloudflare@latest my-dynamic-site

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

עבור What would you like to start with?, בחרו Hello World example.
עבור Which template would you like to use?, בחרו SSR / full-stack app.
עבור Which language do you want to use?, בחרו TypeScript.
עבור 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-dynamic-site

#2. פיתוח מקומי

npx wrangler dev

#3. שינוי הפרויקט

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

הקובץ src/index.ts מאוכלס בקוד לדוגמה. שנו את התוכן שלו כדי לשנות את ההתנהגות בצד השרת של ה-Worker.
הקובץ public/index.html מאוכלס בקוד לדוגמה. שנו את התוכן שלו, או כל דבר אחר ב-public/, כדי לשנות את הנכסים הסטטיים של ה-Worker.

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

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

wrangler deploy יבנה ויפרוס את הפרויקט. אם אתם משתמשים ב-CI, ודאו שאתם מעדכנים את הגדרת "deploy command" בהתאם.

npx wrangler deploy

הערה

למדו כיצד נכסים מוגדרים וכיצד ניתוב עובד מתוך הגדרת ניתוב.