9 שלב בניית מיומנויות

פריסה ו-Hosting — מהמחשב לאינטרנט

בניתם אתר מדהים. הוא רץ על המחשב שלכם, על localhost:3000. אבל איך מישהו מחיפה נכנס אליו? איך שולחים לינק לחבר? ואיך שמים על זה דומיין משלכם? בפרק הזה נבין בדיוק איך עוברים מהמחשב לאינטרנט — עם Vercel, Netlify, Cloudflare Pages ו-GitHub Pages. עד סוף הפרק תדעו לפרוס כל אתר, לחבר דומיין מותאם אישית, ולהנחות AI לעשות את זה במקומכם.

מה יהיה לך בסוף הפרק הזה
מה תדעו לעשות אחרי הפרק הזה
לפני שמתחילים

פרקים קודמים: פרק 03 (Frameworks — חובה להבנה של SSR/SSG), פרק 08 (מבנה פרויקט — הפריסה עובדת על מבנה הזה).

מה צריך: חשבון GitHub (חינם, ב-github.com). רצוי פרויקט אחד קיים ב-GitHub — אפילו קטן. לא חייבים לקנות דומיין — נעבור על התהליך בלי שתוציאו שקל.

זמן משוער: 55-70 דקות קריאה + תרגולים. תרגיל הפריסה הראשי דורש 25 דקות נוספות עם חשבון GitHub פעיל.

הפרויקט שלך

מאיפה באנו: בפרק 08 פירקנו את מבנה פרויקט Next.js — הבנו איפה כל תיקייה (app/, components/, lib/, public/) ואיך file-based routing עובד. הפרויקט חי אצלכם במחשב, רץ על localhost:3000, ורק אתם רואים אותו.

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

לאן ממשיכים: בפרק 10 נקבל decision framework מלא לבחירת stack — framework + UI library + hosting. מה שלמדנו פה על hosting ישתלב שם — כבר תדעו איזו פלטפורמה מתאימה לאיזה סוג פרויקט.

מונחים חדשים בפרק הזה
מונח (English)תרגוםהסבר בשורה אחת
deploymentפריסהתהליך העלאת הקוד מהמחשב שלכם לשרת שהציבור יכול לגשת אליו
hostingאירוחהשירות שמחזיק את האתר פעיל באינטרנט — שרתים, רשת, תחזוקה
Vercelוורסלפלטפורמת hosting שפיתחה את Next.js — אופטימלית ל-React/Next.js
Netlifyנטליפייפלטפורמת hosting ותיקה עם יכולות forms, identity ו-functions מובנות
Cloudflare Pagesקלאודפלייר פייג'ספלטפורמת hosting של Cloudflare עם CDN גלובלי ו-bandwidth ללא הגבלה
GitHub Pagesגיטהאב פייג'ספלטפורמת hosting חינמית של GitHub — פשוטה, רק לאתרים סטטיים
CI/CDאינטגרציה ופריסה רציפותContinuous Integration / Continuous Deployment — push לגיט = עדכון אוטומטי באתר
continuous deploymentפריסה רציפהכל commit ל-branch הראשי גורם לפריסה חדשה אוטומטית
preview deploymentפריסת תצוגה מקדימהURL זמני שנוצר לכל Pull Request — לבדיקה לפני מיזוג
custom domainדומיין מותאםשם דומיין משלכם (כמו myname.com) במקום תת-דומיין של הפלטפורמה
DNSמערכת שמות דומייניםDomain Name System — מתרגם דומיין (myname.com) לכתובת IP של השרת
A recordרשומת Aרשומת DNS שמצביעה דומיין לכתובת IP ספציפית (IPv4)
CNAMEרשומת כינוירשומת DNS שמצביעה דומיין לדומיין אחר (למשל לשרת של Vercel)
SSL/TLSהצפנהSecure Sockets Layer — ההצפנה שמאפשרת https ומנעול ירוק בדפדפן
CDNרשת הפצת תוכןContent Delivery Network — מפזר את האתר ב-100+ שרתים בעולם לטעינה מהירה
edge functionפונקציית קצהקוד שרץ בשרת הקרוב גיאוגרפית למשתמש — מהיר מאוד, מגבלות קלות
serverless functionפונקציית ללא שרתקוד שרץ לפי דרישה על שרת שמנוהל אוטומטית — גמיש, עם cold start
environment variableמשתנה סביבהמשתנה שלא נמצא בקוד אלא מוגדר בפלטפורמה — לסודות כמו API keys
build commandפקודת בנייההפקודה שהפלטפורמה מריצה כדי להכין את האתר (לרוב npm run build)
free tierשכבה חינמיתמה שמקבלים בחינם — עם מגבלות של bandwidth, builds, או שעות
מתחיל 6 דקות מושג חינם

מה זה Deployment — מהלוקאל לאינטרנט

בפרקים הקודמים בניתם אתר. הקוד נמצא אצלכם במחשב, בתיקייה כמו my-portfolio/. כשאתם מריצים npm run dev, נפתח שרת קטן ב-localhost:3000 והאתר רץ. אבל רק אתם רואים אותו. אם תסגרו את המחשב — האתר נעלם. אם החבר שלכם בברלין ינסה להיכנס ל-localhost:3000 — הוא יראה את האתר שלו, לא שלכם.

זה הבדל מהותי — localhost זה "המחשב הזה". לא שרת בענן, לא באוויר — פשוט מחשב מקומי שלכם. כדי שהאתר יהיה נגיש לכל העולם, צריך לשים אותו על שרת שמחובר לאינטרנט 24/7, שכתובת IP שלו מקושרת לשם דומיין, ושיש לו אישור SSL לחיבור מאובטח.

פעם — לפני 15 שנה — כל זה היה סיוט. היית צריך לשכור שרת במרכז נתונים, להתקין Linux, להגדיר nginx או Apache, לקנות אישור SSL, להגדיר DNS ידנית, ולעשות הכל מחדש בכל שינוי. זה לקח ימים. היום? בפלטפורמות מודרניות זה לוקח 3 דקות. הסיבה: הפלטפורמות (Vercel, Netlify, Cloudflare) מסדרות הכל אוטומטית.

הנה מה שקורה מאחורי הקלעים כשאתם "פורסים אתר":

  1. Source: הקוד שלכם ב-GitHub repo
  2. Build: הפלטפורמה מורידה את הקוד ומריצה npm install + npm run build
  3. Output: נוצרים קבצים סטטיים (HTML, CSS, JS) מוכנים להפצה
  4. Distribution: הקבצים נשלחים ל-CDN — רשת של שרתים בכל העולם
  5. DNS: הדומיין שלכם מופנה לשרתים של הפלטפורמה
  6. SSL: אישור HTTPS מונפק אוטומטית (בחינם, דרך Let's Encrypt)
  7. Live: האתר זמין בכתובת שלו

כל זה — באוטומטי. אתם רק מחברים GitHub, בוחרים branch, ולוחצים Deploy. את שאר 99% מהעבודה הפלטפורמה עושה במקומכם.

עשו עכשיו 2 דקות

פתחו את הפרויקט הכי פשוט שיש לכם (אפילו אתר נחיתה בודד). חשבו: איך מישהו מחיפה ייכנס אליו כשהמחשב שלכם סגור? אם התשובה היא "הוא לא יכול" — זה בדיוק מה שנפתור היום. רשמו את שם הפרויקט — הוא יהיה הנסיינו שלנו.

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

סוג אתרמה זהדוגמאותמה דרוש מה-hosting
סטטי (Static) HTML/CSS/JS מוכנים מראש. כל המבקרים רואים את אותם דפים. פורטפוליו, לנדינג, בלוג, תיעוד רק הפצה מהירה. כל פלטפורמה עובדת.
דינמי (Dynamic) תוכן שמשתנה לפי משתמש, זמן, או מידע שמגיע משרת. SaaS dashboard, חנות עם עגלה, אתר עם משתמשים תמיכה ב-SSR, serverless functions, database

למה זה חשוב? אם האתר שלכם סטטי לחלוטין (אין צד-שרת, אין אימות, אין טפסים שנשלחים לשרת) — GitHub Pages מספיק בחינם. אם האתר משתמש ב-Next.js עם Server Components, קוראים API keys, או מגיעים אליו טפסים — Vercel או Netlify הם הבחירה הטבעית. אם התעבורה גבוהה או שאתם חוששים מחשבון ענק בסוף החודש — Cloudflare Pages נותן הכי הרבה בחינם.

עשו עכשיו 2 דקות

החליטו עכשיו — הפרויקט שלכם סטטי או דינמי? אם הוא פורטפוליו/לנדינג/בלוג — סטטי. אם יש טפסים לשרת/database/אימות — דינמי. אם אתם לא בטוחים, זה כנראה סטטי (רוב הפרויקטים הראשונים הם).

מתחיל 8 דקות פלטפורמה חינם

Vercel — הבית של Next.js

Vercel היא החברה שפיתחה את Next.js. זה אומר שכל יכולת חדשה ב-Next.js — Server Components, App Router, Streaming, Edge Runtime — נבדקת ומאופטמת על Vercel לפני שהיא משתחררת. לפרויקט Next.js, Vercel היא לא עוד פלטפורמה — היא הבית הטבעי שלו.

מה Vercel נותנת בחינם (Hobby plan):

מה לא נכלל בחינם:

מחיר Pro: 20$ לחודש למשתמש. כולל 1 TB bandwidth, builds מקבילים, analytics מלא, ו-support. לעסק ישראלי שרוצה לפרוס 3-5 פרויקטים — זה יעלה 200-300 ש"ח בחודש. שווה לזכור שזה מחיר לשימוש עסקי, לא לפורטפוליו אישי.

דוגמה מייצגת: סטארט-אפ ישראלי על Vercel

סטארט-אפ ישראלי בתחום ה-HR-Tech הרים MVP ב-Next.js ופרס על Vercel בחינם. ב-3 החודשים הראשונים — תחת 50 GB bandwidth, הכל רץ ב-Hobby plan. אחרי שקיבלו תקציב ראשון, עברו ל-Pro (20$ לחודש) — עיקר השיפור: preview deployments מהירים, analytics מתקדם, ו-support אנושי כשהיו שאלות דחופות.

הלקח: התחילו בחינם. עברו ל-Pro רק כשיש סיבה עסקית ברורה — טרפיק, צוות, או צורך ב-support.

איך מתחילים עם Vercel — 3 צעדים:

  1. נרשמים: נכנסים ל-vercel.com, לוחצים "Sign Up with GitHub". Vercel מקבלת הרשאה לקרוא את ה-repos שלכם (קריאה בלבד כברירת מחדל).
  2. Import Project: בלשונית הראשית — "Add New Project". בוחרים repo מתוך הרשימה של GitHub. Vercel מזהה אוטומטית שזה Next.js ומגדירה build command ו-output directory.
  3. Deploy: לוחצים "Deploy". 60-120 שניות של build, ומקבלים URL חי — משהו כמו my-portfolio-xxx.vercel.app.
עשו עכשיו 3 דקות

היכנסו ל-vercel.com, לחצו Sign Up עם GitHub. אל תפרסו פרויקט עדיין — רק תסתכלו על ה-dashboard הריק. שימו לב לכפתור הכחול "Add New Project" בראש הדף — זה הכל מה שאתם צריכים לדעת בשלב הזה.

היתרון שיעשה לכם שינוי: אחרי שהפרויקט מחובר, כל git push ל-main גורם לפריסה חדשה. שיניתם טקסט בכפתור? git commit + git push = תוך 90 שניות האתר מעודכן. אין תסריטי FTP, אין העלאות ידניות. זה מרגיש קסום בפעם הראשונה, וזה הופך לשגרה תוך יום.

טעות נפוצה: חריגה מ-bandwidth בגלל תמונות

תמונות בגודל 4K (5-10 MB כל אחת) יכולות לגמור את ה-100 GB bandwidth של Vercel תוך חודש אחד אם יש לכם 10,000 מבקרים. הפתרון: השתמשו ב-next/image שמייצר אוטומטית גרסאות WebP מוקטנות, או העלו תמונות ל-Cloudinary/Unsplash ולא ישר לפרויקט.

חישוב מהיר: 10,000 מבקרים × 10 MB לדף = 100 GB. זה הגבול המדויק של החינם. תמונה אחת שגדולה פי 2 — וחרגתם.

Preview Deployments: זו הפיצ'ר שהופכת את Vercel למצטיינת. כל פעם שאתם יוצרים Pull Request ב-GitHub, Vercel בונה גרסה זמנית של האתר עם כתובת כמו my-project-git-feature-branch.vercel.app. זה מאפשר לבדוק שינוי לפני שהוא עולה לאוויר, לשלוח לינק למנהל המוצר לאישור, או להראות ללקוח מהסלולר בזמן ישיבה.

Vercel Analytics: בתשלום נוסף (בחינם יש גרסה מצומצמת). מודד Core Web Vitals (LCP, FID, CLS) — המדדים שגוגל משתמש בהם לדירוג SEO. לא נעבור לעומק כאן, אבל דעו שזה כלי שימושי כשהאתר מתחיל לצבור טרפיק.

עשו עכשיו 3 דקות

בקשו מ-AI: "תן לי 3 סיבות למה Vercel מתאים לפרויקט Next.js יותר מפלטפורמות אחרות." קראו את התשובה ושימו לב אם Vercel מופיעה גם בחסרונות — ה-AI אמור להזכיר גם שמחיר ה-Pro לפרויקטים גדולים עולה מהר.

מתחיל 6 דקות פלטפורמה חינם

Netlify — האלטרנטיבה הוותיקה

Netlify קדמה ל-Vercel בכמה שנים. היא הגיעה לשוק ב-2014, הרבה לפני שהפך לנורמלי לפרוס אתר בלחיצת כפתור. הרבה מהכלים שאנחנו לוקחים כמובן מאליו היום (git-based deployment, CDN אוטומטי, SSL חינם) — Netlify הייתה שם הראשונה.

מה Netlify נותנת בחינם (Free tier):

איפה Netlify בולטת מעל Vercel:

  1. Netlify Forms — הפיצ'ר הכי שימושי למי שבונה אתרי תדמית. מוסיפים data-netlify="true" לטופס, ו-Netlify קולטת submissions אוטומטית, מציגה אותם ב-dashboard, ושולחת email התראה. בלי backend, בלי database.
  2. Netlify Identity — מערכת login מלאה (email+password, Google, GitHub) שמתלבשת על האתר שלכם בלי קוד. שימושי ל-member portals או אתרים שצריכים user accounts פשוטים.
  3. Split Testing — A/B testing ברמת ה-deployment. אפשר להציג branch אחד ל-50% מהמבקרים ו-branch אחר לשאר, בלי שינוי קוד.

איפה Vercel מנצחת:

מחיר Pro של Netlify: 19$ לחודש למשתמש. דומה ל-Vercel, עם 1 TB bandwidth, יותר form submissions ו-functions invocations.

עשו עכשיו 2 דקות

פתחו את netlify.com/pricing בטאב נפרד. חפשו את המחיר של Pro — תכתבו ב-notepad כמה זה לחודש, וכמה זה ביחס ל-Vercel. שמרו את המספרים האלה — הם עוזרים בבחירה.

מתי לבחור Netlify על פני Vercel:

מצבלמה Netlify
אתר תדמית עם טופס יצירת קשרNetlify Forms — אין צורך ב-backend או API מיוחד
אתר לקהילה או חברים/member portalNetlify Identity — login מובנה בלי קוד
רוצים לעשות A/B testing פשוטSplit Testing מובנה — בלי כלים חיצוניים
הפרויקט לא Next.js (Astro, Vite, SvelteKit)Netlify מצוינת לכל SSG, לא תלויה ב-Next.js
דוגמה מייצגת: אתר עמותה ישראלית על Netlify

עמותה ישראלית שבונה אתר התנדבות — 5 דפים + טופס הרשמה להתנדבות. ב-Vercel היו צריכים לכתוב API endpoint לקלוט את הטופס. ב-Netlify — מוסיפים attribute אחד לטופס, וכל submission מגיע במייל למתאם ההתנדבות. אפס backend, אפס עלות, הכל פעיל ב-30 דקות.

חסרונות של Netlify שכדאי לדעת:

מתחיל 6 דקות פלטפורמה חינם

Cloudflare Pages — המתמודד הנדיב

Cloudflare היא אחת מחברות ה-CDN הגדולות בעולם. הם מנהלים בערך 20% מהתעבורה של כל האינטרנט. ב-2020 הם השיקו Cloudflare Pages — פלטפורמת hosting שרוכבת על ה-CDN העצום שלהם.

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

מה Cloudflare Pages נותנת בחינם:

עשו עכשיו 2 דקות

בקשו מ-AI: "למה Cloudflare Pages יכול להרשות לעצמו bandwidth unlimited בחינם?" התשובה קשורה לכך ש-Cloudflare כבר בעלים של רשת CDN עצומה — הם לא משלמים bandwidth כי זה כבר שלהם.

איפה Cloudflare Pages בולטת:

  1. Bandwidth אין-סופי — אם האתר שלכם צפוי לפרוץ (ויראלי ברשת, פרסום בפריים-טיים), Cloudflare הוא הפתרון היחיד שלא יעקוץ אתכם ב-overage fees.
  2. Cloudflare Workers — edge functions עם ביצועים מהמהירים בעולם. רץ ב-300+ מיקומים גלובלי, אפילו בתל אביב (יש Point of Presence של Cloudflare בישראל).
  3. Stack מלא בחינם — Pages + Workers + D1 (database) + R2 (storage) + KV (key-value) = יכולים לבנות SaaS מלא בחינם (עד 100k req/day).
  4. Security מובנה — Cloudflare היא חברת security במקור. DDoS protection, bot mitigation, WAF — הכל כבר פעיל.

חסרונות:

מחיר Pro: Cloudflare Pages לבד נשאר חינמי לשימוש עסקי. תשלומים מתחילים רק אם חוצים את המגבלות של Workers (125k invocations ביום = 5$ לחודש) או מעמיסים עוד שירותים.

דוגמה מייצגת: בלוג ישראלי ויראלי על Cloudflare Pages

בלוג ישראלי בתחום הטכנולוגיה פרס על Cloudflare Pages. פוסט אחד התפרץ ברדיט וב-Hacker News — 250,000 כניסות ב-48 שעות. Bandwidth שחרג משמעותית מ-100 GB. על Vercel חינמי — האתר היה "חרג" וסגור. על Cloudflare Pages — הכל עבד בחינם, בלי שיחה מאחד הנציגים, בלי overage.

הלקח: אם יש סיכוי של פרסום ויראלי או עליות-פתאום בטרפיק — Cloudflare Pages קונה שקט נפשי.

טעות נפוצה: לבחור Cloudflare Pages לפרויקט Next.js מורכב

Next.js עם App Router, Server Components, streaming, ו-middleware — לא תמיד מתנהג כמו שצריך על Cloudflare Pages. יש adapter רשמי (@cloudflare/next-on-pages) אבל הוא דורש הגדרות נוספות ולפעמים יש התנהגויות מוזרות. אם זה Next.js 15 מלא — קחו Vercel. אם זה Astro/SvelteKit/Vite static — Cloudflare Pages בטוח.

מתחיל 4 דקות פלטפורמה חינם

GitHub Pages — הפשוט והחינמי

GitHub Pages היא השירות הוותיק ביותר ברשימה — קיים מ-2008. הוא גם הכי פשוט. אם הפרויקט שלכם כבר ב-GitHub, הפעלת Pages היא כפתור אחד.

מה GitHub Pages נותנת בחינם:

מה אין ב-GitHub Pages:

למה בכל זאת לבחור GitHub Pages?

עשו עכשיו 2 דקות

פתחו repo קיים ב-GitHub שלכם. היכנסו ל-Settings → Pages. שימו לב לאופציות — "Source" נותן לבחור branch, "Custom domain" מאפשר לחבר דומיין. אל תפעילו עדיין — רק תאתרו איפה כל אופציה.

הגבלה הכי חשובה שצריך לדעת: GitHub Pages לא ידע להריץ npm run build לפרויקט Next.js ולפרוס את התוצאה — לפחות לא בלי GitHub Actions. לפרויקטים מתקדמים, זה אומר שצריך להגדיר GitHub Actions workflow שמבצע את ה-build. זה אפשרי, אבל זה הופך את "הפשטות" של GitHub Pages לפחות פשוטה.

פתרון מעשי לפרויקט Next.js על GitHub Pages: צריך להוסיף ל-next.config.js את output: 'export', להגדיר GitHub Action שבונה ומעלה, ולהשלים עם העובדה שאין SSR. זה עובד — אבל לרוב Vercel או Cloudflare Pages שוות את הטרחה החסכתם.

למי מתאים GitHub Pages באמת

אם הפרויקט שלכם בנוי ב-Astro (פרק 03) או Vite + React כאתר סטטי — GitHub Pages מושלם. אם הוא Next.js עם App Router — זה יעבוד, אבל תעבדו קשה יותר מאשר אם הייתם בוחרים Vercel. הכלל הכללי: GitHub Pages לאתרים פשוטים, Vercel/Netlify לפרויקטים מתקדמים.

בינוני 7 דקות Framework חינם

טבלת השוואה מלאה — 4 הפלטפורמות זו מול זו

זו אחת משתי הדליברבלס של הפרק. שמרו את הטבלה הזו כ-reference — היא תעזור לכם להחליט כל פעם מחדש, ולא תצטרכו לזכור מספרים.

פיצ'ר Vercel (Hobby) Netlify (Free) Cloudflare Pages GitHub Pages
Bandwidth 100 GB/חודש 100 GB/חודש Unlimited 100 GB/חודש
Build minutes 6,000/חודש 300/חודש 500 builds 10/שעה
Serverless Functions 100 GB-hours 125k calls 100k req/day אין
Edge Functions 500k/חודש 3M calls 100k req/day אין
Preview deployments ✓ לכל PR ✓ לכל PR ✓ לכל PR
Custom domain ✓ חינם ✓ חינם ✓ חינם ✓ חינם
SSL אוטומטי
Forms מובנים ✓ (100/חודש)
Identity / Auth ✓ (1,000 msg)
Database integrated ✗ (בתשלום) ✓ D1 (5 GB)
Object storage ✓ R2 (10 GB)
Next.js support מצוין טוב סביר (adapter) רק static export
Pro plan (לחודש) $20 $19 $20 (Workers) $4 (GitHub Pro)
שימוש מסחרי בחינם

ההמלצה המסכמת:

Decision Framework: איזו פלטפורמה לבחור לפי סוג פרויקט
סוג הפרויקטפלטפורמה מומלצתלמה
פורטפוליו / אתר אישי סטטיGitHub Pages או Cloudflare Pagesחינם לחלוטין, פשוט, מספיק
אתר תדמית עם טופס יצירת קשרNetlifyForms מובנים — חוסך backend
Next.js עם SSR / App RouterVercelהאינטגרציה הכי חלקה
בלוג בתנועה גבוהה / ויראליCloudflare PagesUnlimited bandwidth — ישן טוב
אתר תיעוד (docs)GitHub Pages או Cloudflare Pagesפשוט, סטנדרט בקהילה
SaaS MVP עם databaseVercel + Supabase / Cloudflare Pages + D1תלוי בכלי פיתוח
חנות אונליין פשוטהVercelSSR חלק, קל לחבר Stripe
אתר חברי קהילה עם loginNetlifyNetlify Identity — חוסך auth setup
עשו עכשיו 3 דקות

סמנו בטבלה 3 שורות שהכי חשובות לפרויקט שלכם. לדוגמה: אם אתם בונים SaaS, חשוב bandwidth + serverless functions + database. אם פורטפוליו — חשוב רק בסיסי. על סמך ה-3 שסימנתם, איזו פלטפורמה נראית לכם הכי מתאימה?

בינוני 6 דקות מושג חינם

CI/CD ו-Continuous Deployment — push = deploy

CI/CD הוא הקיצור המשמעותי ביותר בפרק הזה. זה קורה בכל פעם שאתם דוחפים קוד ל-GitHub, וזה מה שהופך "הרגישים בפלטפורמות חדשות" ל-"שגרה פרודוקטיבית".

פירוק הקיצור:

מה קורה טכנית בכל push:

  1. אתם: git push origin main
  2. GitHub מקבל את השינוי
  3. Webhook מודיע לפלטפורמה (Vercel/Netlify/Cloudflare) שיש שינוי
  4. הפלטפורמה מורידה את הקוד העדכני
  5. מריצה npm install להתקנת dependencies
  6. מריצה npm run build לבניית האתר
  7. אם build הצליח — מעלה את הקבצים החדשים ל-CDN
  8. מעדכנת את כל 300+ שרתי ה-CDN בעולם (לוקח 10-30 שניות)
  9. השינוי חי באתר

סה"כ: 60-120 שניות. ללא שום התערבות ידנית אחרי ה-push.

עשו עכשיו 2 דקות

חשבו על הפעם האחרונה ששיניתם משהו בפרויקט (צבע כפתור, טקסט, תמונה). כמה זמן לקח עד שזה היה חי? בלי CI/CD — זה דורש העלאה ידנית ב-FTP ושרת. עם CI/CD — 90 שניות מהרגע שלחצתם commit.

Preview Deployments — הפיצ'ר שעושה את זה קסום: בכל פעם שאתם פותחים Pull Request ב-GitHub (לא מיזוג — רק PR), הפלטפורמה בונה גרסה נפרדת של האתר לאותה תכונה חדשה. אותה תכונה חיה ב-URL זמני. כמה יתרונות:

Build Commands — מה צריך לדעת: בכל פרויקט, הפלטפורמה צריכה לדעת איך לבנות את האתר. היא מזהה אוטומטית רוב המצבים, אבל לפעמים צריך להגדיר ידנית:

FrameworkBuild commandOutput directory
Next.jsnext build.next (אוטומטי ב-Vercel)
Astronpm run builddist
Vite + Reactnpm run builddist
SvelteKitnpm run build.svelte-kit
Next.js static exportnext build && next exportout

שורה תחתונה: בפעם הראשונה שאתם פורסים, הפלטפורמה תנסה לזהות אוטומטית. אם זה לא עובד — שואלים את ה-AI: "מה ה-build command לפרויקט [framework] על [platform]?"

עשו עכשיו 3 דקות

אם יש לכם פרויקט שפרוס — היכנסו ל-dashboard של הפלטפורמה וחפשו את הלשונית "Deployments". תראו רשימה של כל ה-builds האחרונים — הצלחות וכישלונות. הבינו: כל שורה ברשימה היא commit שדחפתם ל-GitHub.

בינוני 10 דקות מושג בתשלום

דומיין מותאם אישית — DNS ו-SSL

הפרויקט שלכם פרוס על my-project-xyz.vercel.app. זה עובד. אבל כמו עסק רציני — אתם רוצים my-name.com. זה קוסמטי וגם מקצועי. וזה דורש שני מרכיבים: קניית דומיין ו-הגדרת DNS.

איפה קונים דומיין בישראל:

ספקמחיר .com שנתימחיר .co.il שנתייתרונות
Domain The Net (ישראלי) כ-60 ש"ח כ-60-80 ש"ח תמיכה בעברית, תשלום בשקלים
Cloudflare Registrar 9-10 דולר לא מוכר מחיר עלות, בלי markup. תמיד הכי זול.
Namecheap 9-15 דולר (שנה ראשונה) לא מוכר ממשק נוח, תמיכה סבירה
GoDaddy 12-60 דולר (משתנה) לא מוכר גדולים, אבל עם upsells אגרסיביים
ISOC-IL (.il בלבד) לא כ-70 ש"ח הרשם הרשמי של .il, דרך ספקים מורשים

ההמלצה: לרוב הפרויקטים — Cloudflare Registrar. הם מוכרים דומיינים במחיר עלות (בלי markup), מה שאומר 10$ לשנה ל-.com ללא הפתעות. אם אתם רוצים .co.il — Domain The Net או ספק ישראלי אחר.

עשו עכשיו 3 דקות

פתחו whois.com או לחלופין whois בתוך cloudflare.com/registrar. חפשו את הדומיין שאתם רוצים (לדוגמה: my-name.com). האם הוא פנוי? אל תקנו עדיין — רק תכתבו בצד את המחיר המוצע.

מה זה DNS באמת: דמיינו שהאינטרנט הוא עיר ענקית. כל שרת הוא בית עם כתובת (IP address, כמו 76.76.21.93). אבל אנשים לא זוכרים מספרים — הם זוכרים שמות. DNS הוא ספר הטלפונים של האינטרנט — הוא מתרגם google.com לכתובת IP, ו-my-name.com לשרת שהפרויקט שלכם רץ עליו.

סוגי רשומות DNS שצריך להכיר:

סוגמה זהמתי משתמשים
A מפנה שם לכתובת IPv4 (כמו 76.76.21.93) חיבור דומיין ראשי (my-name.com) לשרת
AAAA כמו A אבל ל-IPv6 שרתים מודרניים שתומכים ב-IPv6
CNAME מפנה שם לשם אחר (לא IP) חיבור subdomain (www.my-name.com) ל-vercel.app
MX רשומת דואר — איפה מקבלים email חיבור לשירותי email (Google Workspace, Zoho)
TXT טקסט חופשי — לאימותים אימות בעלות (Google verification, SPF)

חיבור דומיין ל-Vercel — 5 צעדים:

  1. ב-Vercel dashboard: Settings → Domains → Add. מקלידים my-name.com.
  2. Vercel מציגה 2 רשומות DNS להוסיף: רשומת A (לדומיין הראשי) ורשומת CNAME (ל-www).
  3. נכנסים ל-dashboard של ה-registrar (Cloudflare/Namecheap/Domain The Net) בלשונית DNS.
  4. מוסיפים את שתי הרשומות:
    • Type: A | Name: @ | Value: 76.76.21.93
    • Type: CNAME | Name: www | Value: cname.vercel-dns.com
  5. ממתינים 5-60 דקות (propagation). Vercel תציג "Valid Configuration" כשהדומיין פעיל. SSL ינופק אוטומטית דרך Let's Encrypt.
טעות נפוצה: לשכוח את ה-www

הוספתם רק את הדומיין הראשי (my-name.com) ולא את ה-www (www.my-name.com). חצי מהמבקרים שמקלידים "www.my-name.com" מקבלים דף שגיאה או לא מגיעים. תמיד מוסיפים את שני הרישומים — גם A לדומיין הראשי וגם CNAME ל-www. בנוסף, ב-Vercel אפשר להגדיר redirect אוטומטי מ-www למה-name.com (או להיפך).

SSL — ההצפנה שלא צריך לעבוד עליה: פעם היה צריך לקנות אישור SSL (100-500 ש"ח לשנה). היום — Let's Encrypt מנפיק SSL חינם, וכל הפלטפורמות (Vercel, Netlify, Cloudflare, GitHub Pages) עושות את זה אוטומטית ברגע שהדומיין פעיל. המנעול הירוק בדפדפן — מופיע תוך כמה דקות, ואז מתחדש אוטומטית כל 3 חודשים. אפס התערבות.

Decision Framework: מאיפה לקנות דומיין
מצבאיפה לקנותלמה
קהל ישראלי, רוצים .co.ilDomain The Net או ספק מורשה ב-ISOC-IL.co.il זמין בעיקר דרך ספקים ישראליים
פרויקט גנרי, רוצים .com זולCloudflare Registrarמחיר עלות (9-10$), בלי upsells
פיצ'ר מתקדם — תוספות / pre-pay / transferNamecheapממשק נוח, עוזר בהעברת דומיין קיים
פרויקט של מפתחים.dev, .io — ב-Cloudflare / Porkbuntld מגניבים, נתמכים ברוב הפלטפורמות
פרויקט סטארט-אפ בעברית.co.il + .com ביחד.com לבינלאומי, .co.il לישראלי
בינוני 7 דקות מושג חינם

Environment Variables — סודות שלא שמים בקוד

כמעט כל פרויקט אמיתי צריך סודות: API key של OpenAI, Stripe secret key, connection string ל-database, סיסמה ל-SMTP. הבעיה — אם תשימו אותם בקוד, והקוד ב-GitHub הציבורי, כל העולם רואה. האקרים יגלו תוך דקות ויעשו שימוש לרעה.

הפתרון: Environment Variables (משתני סביבה). במקום לשים סודות בקוד, שמים אותם בהגדרות הפלטפורמה או בקובץ .env.local שלא עולה ל-Git.

איך זה עובד בקוד:

// במקום זה (רע):
const apiKey = "sk-proj-abc123-xyz789"
fetch('https://api.openai.com/v1/chat', {
  headers: { 'Authorization': `Bearer ${apiKey}` }
})

// עושים את זה (טוב):
const apiKey = process.env.OPENAI_API_KEY
fetch('https://api.openai.com/v1/chat', {
  headers: { 'Authorization': `Bearer ${apiKey}` }
})

המשתנה process.env.OPENAI_API_KEY מוגדר במקום אחד — לא בקוד. בפיתוח מקומי, הוא מגיע מקובץ .env.local. ב-production, הוא מגיע מהגדרות הפלטפורמה.

עשו עכשיו 2 דקות

חשבו על 3 סודות שיש (או יהיו) בפרויקט שלכם: API key של OpenAI, Stripe secret, חיבור ל-database. רשמו אותם. אף אחד מהם לא אמור להיות בקוד — הם כולם צריכים להיות ב-env vars.

Frontend vs Backend — ההבדל הקריטי: משתני סביבה ב-Next.js מתחלקים לשני סוגים, לפי אם הם נחשפים ב-browser או לא.

סוגפורמטאיפה זמיןדוגמה
Server-side (סודי) שם רגיל רק בקוד שרת (API routes, Server Components) OPENAI_API_KEY
Public (נחשף בדפדפן) NEXT_PUBLIC_ prefix זמין גם ב-client components NEXT_PUBLIC_GA_ID
טעות נפוצה: NEXT_PUBLIC_ ל-API keys סודיים

מפתחים טירוניים מוסיפים NEXT_PUBLIC_ ל-OPENAI_API_KEY כי ככה זה "עובד" גם בדפדפן. זו חשיפה קריטית — ה-API key מופיע בקוד ה-JavaScript הציבורי של האתר, וכל אחד שפותח DevTools רואה אותו. אז משתמש במפתח שלכם לשאילתות OpenAI — על החשבון שלכם. API keys סודיים לעולם לא עם NEXT_PUBLIC_. הם צריכים להיות בשרת בלבד (API routes).

קבצי .env שחייבים להכיר:

דוגמה ל-.env.example:

# .env.example — דוגמה. העתיקו ל-.env.local ומלאו בערכים אמיתיים.

OPENAI_API_KEY=
STRIPE_SECRET_KEY=
DATABASE_URL=

NEXT_PUBLIC_GA_ID=
NEXT_PUBLIC_SITE_URL=http://localhost:3000

הגדרה ב-Vercel dashboard:

  1. Project → Settings → Environment Variables
  2. לכל משתנה: מקלידים name ו-value
  3. בוחרים סביבה: Production / Preview / Development (בדרך כלל כל השלוש)
  4. Save. מהפריסה הבאה המשתנה זמין ב-process.env.XXX
עשו עכשיו 3 דקות

אם יש לכם פרויקט עם API keys — פתחו את הקוד וחפשו "sk-" או "key=" או "secret". יש כאלה בקוד ב-Git? אם כן — שימו אותם ב-env var עכשיו, ו-rotate (החליפו) את המפתח מיד. סודות שהיו ב-Git פעם — נחשבים לפרוצים.

Decision Framework: איפה לשים כל env variable
סוג המשתנהprefixהיכן מוגדרדוגמה
API key סודי (OpenAI, Stripe)בלי prefixVercel dashboard + .env.localOPENAI_API_KEY
Database URLבלי prefixVercel dashboard + .env.localDATABASE_URL
Google Analytics ID (ציבורי)NEXT_PUBLIC_Vercel dashboard + .env.localNEXT_PUBLIC_GA_ID
Site URL (ציבורי)NEXT_PUBLIC_Vercel dashboard + .env.localNEXT_PUBLIC_SITE_URL
Feature flagתלוי — סודי או לאVercel dashboardENABLE_NEW_CHECKOUT
מתקדם 6 דקות מושג חינם

Edge Functions ו-Serverless Functions

אחד הפיצ'רים שמבדילים פלטפורמות מודרניות מ-hosting קלאסי הוא היכולת להריץ קוד על השרת — בלי לנהל שרת. זה קורה דרך שני סוגים של פונקציות: Serverless Functions ו-Edge Functions.

Serverless Function — קוד שרץ לפי דרישה:

Edge Function — קוד שרץ קרוב למשתמש:

עשו עכשיו 3 דקות

בקשו מ-AI: "תן לי דוגמה קצרה של edge function ב-Next.js, ושל serverless function ב-Next.js. מה ההבדל בקוד?" האם ה-AI מסביר את ה-runtime? (הדגשת export const runtime = 'edge').

דוגמה ב-Next.js App Router:

// app/api/hello/route.ts

// Serverless (ברירת מחדל):
export async function GET() {
  return Response.json({ message: "Hello" })
}

// Edge (דורש שורה נוספת):
export const runtime = 'edge'
export async function GET() {
  return Response.json({ message: "Hello from edge" })
}

מתי להשתמש בכל אחד:

תרחישEdge או Serverless?למה
אימות משתמש מהירEdgeמהיר, קרוב למשתמש, אין צורך ב-Node APIs
חיבור לפי מיקום גיאוגרפיEdgeב-Edge יודעים את המיקום מיד
שליחת מייל (עם Nodemailer)ServerlessEdge לא תומך בספריות Node מלאות
עיבוד תמונה (sharp)ServerlessEdge אין גישה לקבצים
קריאה ל-OpenAI APIתלוי. רגיל — serverless. אם צריך streaming — EdgeEdge תומך ב-streaming responses
חיבור ל-Postgres databaseServerless (בד"כ)Edge צריך driver מיוחד (Neon, Supabase)
דוגמה מייצגת: צ'אט-בוט ישראלי — מתי Edge ומתי Serverless

סטארט-אפ ישראלי בונה צ'אט-בוט שמבוסס על GPT-4. יש להם שתי פונקציות:

החלטה מושכלת לפי סוג העבודה — לא בלק-אנד-וייט.

שלושה דגלים אדומים שכדאי לשים לב אליהם לפני שבוחרים Edge: (1) אם הקוד שלכם קורא fs.readFile, path, או child_process — לא יעבוד ב-Edge, תצטרכו Serverless. (2) אם אתם מתחברים ל-Postgres או MySQL עם driver רגיל (pg, mysql2) — אין תמיכה ב-Edge; תצטרכו HTTP-based driver כמו @neondatabase/serverless או @vercel/postgres. (3) אם הספרייה שאתם משתמשים בה (כמו sharp לעיבוד תמונה או puppeteer ל-scraping) מסתמכת על קבצים בינאריים של Node.js — Edge לא יכול להריץ אותה.

כלל אצבע פרקטי: התחילו הכל כ-Serverless (ברירת המחדל של Next.js). אחרי שהאתר חי ועובד, הסתכלו באיזה endpoints יש לטנסי תגובה גבוה או תנועה גבוהה, ורק אותם העבירו ל-Edge על ידי הוספת השורה export const runtime = 'edge'. אל תנסו לאפטם מראש — זה בזבוז זמן אם הפלטפורמה בכלל עונה מהר מספיק.

בינוני 8 דקות תרגול חינם

צ'קליסט פריסה — 12 צעדים מ-localhost לאתר חי

זו הדליברבל השנייה של הפרק. שמרו את 12 הצעדים האלה — הם ה-cheat sheet שלכם לכל פריסה חדשה. אם מדלגים על צעד, משהו יישבר. אם עוברים את כולם — האתר יהיה חי ועובד.

12 הצעדים — מ-localhost לאתר חי
  1. וודאו שהפרויקט רץ מקומית. npm run dev עובד? אין שגיאות ב-console? אם כן — זה הבסיס. הפריסה רק מעתיקה את מה שעובד אצלכם.
  2. הריצו build מקומי. npm run build — אם זה נכשל אצלכם, זה ייכשל על כל פלטפורמה. תיקנו כאן לפני שתעלו.
  3. צרו repo ב-GitHub. אם הפרויקט עדיין לא ב-GitHub — git init, יצירת repo באתר, git remote add origin, git push.
  4. וודאו ש-.gitignore תקין. node_modules/, .next/, .env.local — כולם אמורים להיות מחוץ ל-Git. בקשו מ-AI: "בדוק את ה-.gitignore שלי לפרויקט Next.js — מה חסר?"
  5. בחרו פלטפורמה. Vercel ל-Next.js. GitHub Pages לפורטפוליו סטטי. Cloudflare Pages לטרפיק גבוה. Netlify לאתר עם forms. (ראו הטבלה למעלה.)
  6. רשמו את הפרויקט בפלטפורמה. Import מ-GitHub. הפלטפורמה מזהה אוטומטית את ה-framework ואת ה-build command.
  7. הגדירו environment variables. פתחו את הקוד וחפשו process.env. כל משתנה שמופיע שם — הוסיפו אותו ב-dashboard של הפלטפורמה לפני הפריסה הראשונה.
  8. Deploy ראשון. לחצו על כפתור ה-Deploy. ממתינים 60-180 שניות. אם build הצליח — תקבלו URL זמני (xxx.vercel.app).
  9. בדקו את האתר ב-URL הזמני. גלשו בכל הדפים, בדקו טפסים, בדקו נייד. אם משהו לא עובד — זה כנראה חסר env var.
  10. קנו דומיין (אופציונלי). Cloudflare Registrar ל-.com (10$ לשנה). Domain The Net ל-.co.il (כ-70 ש"ח). רשמו את פרטי הגישה.
  11. חברו את הדומיין לפלטפורמה. ב-dashboard של הפלטפורמה: Add Domain. העתיקו את רשומות ה-DNS (A + CNAME) להגדרות של ה-registrar. המתינו עד 60 דקות.
  12. וודאו SSL פעיל. אחרי ש-DNS תקין, SSL יונפק אוטומטית. בדקו שהאתר עובד ב-https:// ושאין שגיאת certificate. בדקו גם שה-www מפנה נכון.

בפעם הראשונה זה לוקח 30-60 דקות. מהפעם השנייה — 10 דקות. התהליך הופך ל-מוזר-הטבעי אחרי פעם-פעמיים, וזו אחת מהסיבות שהפלטפורמות האלה שינו את הדרך שבה בונים אתרים.

עשו עכשיו 2 דקות

הדפיסו את 12 הצעדים, או שמרו אותם כקובץ טקסט/הערה בסמארטפון. זה ה-cheat sheet שלכם לכל פריסה עתידית. אל תנסו לשנן — תחזרו לצ'קליסט כל פעם. זה בדיוק למה הוא קיים.

טעות נפוצה: דילוג על צעד 7 — env vars

הפיתוי הגדול: לפרוס מהר בלי להגדיר env vars, בציפייה ש"אוסיף אותם אחרי". התוצאה: האתר עולה, אבל דפים עם API calls מחזירים 500 error. לא קריסה דרמטית — שקט. המשתמש רואה "משהו השתבש". תמיד לפני פריסה ראשונה: env vars מוגדרים.

מתחיל 6 דקות תרגול חינם

איך לבקש מ-AI prompts פריסה מוכנים

הפלטפורמות קלות — אבל הפעם הראשונה דורשת הרבה החלטות קטנות. הדבר הכי יעיל: לבקש מ-AI (Claude, ChatGPT, V0) להנחות אתכם שלב-שלב. להלן 10 prompts שעובדים:

מה אתם רוציםPrompt ל-AI
פריסה ראשונה של Next.js ל-Vercel "תדריך אותי שלב-שלב איך לפרוס פרויקט Next.js מ-GitHub ל-Vercel. הנח שאני מתחיל. תן לי את כל הצעדים, כולל איזה כפתורים ללחוץ."
חיבור דומיין לפלטפורמה "יש לי דומיין [my-name.com] שקניתי ב-Cloudflare. האתר פרוס ב-Vercel. תן לי בדיוק אילו רשומות DNS להוסיף כדי לחבר את הדומיין."
הגדרת environment variables "יש לי Next.js app עם OpenAI API. תסביר איך להגדיר את ה-API key כ-env var ב-Vercel, ואיך להשתמש בו בקוד בלי לחשוף אותו בדפדפן."
בחירת פלטפורמה "יש לי פרויקט [Astro + Tailwind / Next.js + Supabase / Vite + React]. כ-500 מבקרים בחודש צפויים. מה הפלטפורמה הכי מתאימה — ולמה?"
תיקון build שנכשל "הפריסה שלי ב-Vercel נכשלה עם השגיאה: [שגיאה מהלוג]. מה הסיבה? תיקון?"
העברה בין פלטפורמות "יש לי פרויקט ב-Netlify ואני רוצה להעביר ל-Vercel. מה הצעדים? מה אני צריך להעביר ידנית (env vars, DNS)?"
הוספת Preview deployments "איך אני מפעיל preview deployments ב-[Vercel/Netlify/Cloudflare Pages]? מה עושה PR ב-GitHub כשזה פעיל?"
Edge function ראשונה "תן לי דוגמה של edge function ב-Next.js App Router, עם route בשם /api/geo שמחזיר את המיקום של המשתמש. הסבר גם מה ההבדל מ-serverless function."
Rollback אחרי פריסה גרועה "פרסתי לפני 10 דקות ומשהו נשבר באתר. איך עושים rollback מהיר ב-Vercel לפריסה הקודמת?"
Custom 404 ו-500 ב-production "פריסה של Next.js ב-Vercel — איפה שמים not-found.tsx ו-error.tsx כך שהם יופיעו רק ב-production, לא ב-dev?"
עשו עכשיו 4 דקות

בחרו prompt אחד מהטבלה ונסו אותו עם ה-AI שלכם. שימו לב: האם ה-AI מבקש מכם מידע נוסף לפני שהוא עונה (איזו פלטפורמה? איזה framework?)? אם כן — זה סימן טוב. AI שמשלים פרטים שלא נתתם ומניח — יכול לתת תשובה שגויה.

דוגמה מייצגת: פרילנסר שפורס 5 פרויקטים בשבוע

פרילנסר ישראלי שבונה אתרי נחיתה ללקוחות. מפעיל תהליך אוטומטי: Lovable מייצר את האתר → Push ל-GitHub → Cloudflare Pages מחבר אוטומטית → חיבור דומיין של הלקוח → שליחת URL. סה"כ 15 דקות לפריסה חדשה. בלי ה-CI/CD הזה — אותו פרויקט היה לוקח שעתיים של עבודה ידנית.

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

תרגיל 1: פריסת אתר Next.js מ-GitHub ל-Vercel — סוף לסוף

זמן: 25 דקות | רמה: מתחיל | תוצר: URL חי של אתר פרוס

  1. הכינו פרויקט Next.js ב-GitHub:
    • אם אין לכם — בקשו מ-V0/Bolt: "Create a simple Next.js landing page with hero section and contact info"
    • הורידו את הקוד והעלו ל-repo חדש ב-GitHub (ציבורי, בשביל free tier)
  2. היכנסו ל-vercel.com ולחצו "Sign Up with GitHub"
  3. Import Project: לחצו "Add New Project", בחרו את ה-repo שלכם, לחצו Import
  4. הגדרות Build: Vercel תזהה אוטומטית Next.js. ודאו ש:
    • Framework: Next.js
    • Build Command: next build (כבר כתוב)
    • Output Directory: .next (כבר כתוב)
  5. לחצו Deploy. המתינו 60-120 שניות. אם תראו מסך חגיגי עם confetti — עבדתם.
  6. בדקו את האתר: לחצו על ה-URL שמופיע. גלשו בדפים, בדקו responsiveness במובייל (F12 → Device mode).
  7. בונוס — שינוי + push: שנו טקסט בדף הבית מקומית, git commit -m "update", git push. חזרו ל-Vercel dashboard — תראו deployment חדש פועל. אחרי 90 שניות — השינוי חי. זה הקסם של CI/CD.

תוצאה צפויה: URL חי (xxx.vercel.app) שאתם יכולים לשלוח לחבר או לעצמכם מהסלולר. ה-URL עובד 24/7, גם כשהמחשב סגור. ה-push האחרון שלכם עלה לאוויר תוך 90 שניות. זו הפעם הראשונה שהפרויקט שלכם באמת באינטרנט.

תרגיל 2: השוואת 4 פלטפורמות — מילוי טבלה מלאה

זמן: 20 דקות | רמה: בינוני | תוצר: טבלת השוואה מותאמת לפרויקט שלכם

  1. הגדירו את הפרויקט שלכם: סוג (SaaS / פורטפוליו / חנות / בלוג), צפי מבקרים בחודש, האם יש צורך ב-forms/auth/database
  2. פתחו את דפי התמחור של כל 4 הפלטפורמות:
    • vercel.com/pricing
    • netlify.com/pricing
    • pages.cloudflare.com
    • docs.github.com/pages
  3. מלאו טבלה של 10 שורות — הפיצ'רים החשובים לפרויקט שלכם:
    | פיצ'ר | Vercel | Netlify | Cloudflare | GitHub Pages |
    |-------|--------|---------|------------|--------------|
    | Bandwidth | ? | ? | ? | ? |
    | Build minutes | ? | ? | ? | ? |
    | ... (10 שורות) |
  4. לכל שורה, סמנו איזו פלטפורמה מנצחת (✓ או ★)
  5. סיכום: כתבו 2-3 משפטים — איזו פלטפורמה מנצחת עבור הפרויקט שלכם, ולמה

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

תרגיל 3: חיבור דומיין מותאם + SSL + redirect מ-www

זמן: 30 דקות | רמה: בינוני | תוצר: אתר חי בדומיין שלכם עם HTTPS

  1. בחרו דומיין: חפשו ב-Cloudflare Registrar או Domain The Net. דומיין בודד (10-70 ש"ח לשנה). אופציה חסכונית: אפשר לתרגל עם subdomain חינמי (כמו freenom או קישור ממקום אחר).
  2. קנו את הדומיין. או דלגו על זה ותעשו תרגיל "יבש" עם דומיין קיים שיש לכם.
  3. ב-Vercel dashboard: פרויקט → Settings → Domains → Add. הוסיפו my-name.com.
  4. Vercel תציג שתי רשומות DNS להוסיף. העתיקו אותן (A record + CNAME).
  5. היכנסו ל-dashboard של ה-registrar בלשונית DNS. הוסיפו את שתי הרשומות בדיוק כפי ש-Vercel ביקשה.
  6. המתינו 5-60 דקות. תחזרו ל-Vercel ותרעננו. סטטוס "Invalid Configuration" אמור להפוך ל-"Valid Configuration".
  7. בדקו HTTPS: היכנסו ל-https://my-name.com. אמור להיראות המנעול הירוק. בדקו גם https://www.my-name.com — צריך להפנות אוטומטית ל-my-name.com.
  8. בונוס — Redirect: ב-Vercel Settings → Domains — הגדירו את www.my-name.com כ-redirect ל-my-name.com (או הפוך — לפי מה שאתם מעדיפים).

תוצאה צפויה: האתר שלכם נגיש מ-https://my-name.com וגם מ-https://www.my-name.com. מנעול ירוק בכל המקרים. Redirect עובד. אתם מרגישים כמו בעלי עסק אמיתי — כי זה בדיוק מה שיש לכם.

תרגיל 4: Environment variables בפרויקט אמיתי עם API key

זמן: 15 דקות | רמה: בינוני | תוצר: פרויקט שקורא API key מ-env ועובד ב-production

  1. קבלו API key חינמי. אופציות: OpenWeatherMap (חינם, 1000 קריאות ליום), Unsplash API, או NASA API. כל אחד בלי תשלום.
  2. בקשו מ-AI ליצור API route פשוט ב-Next.js ש משתמש ב-API key. לדוגמה:
    // app/api/weather/route.ts
    export async function GET() {
      const key = process.env.OPENWEATHER_API_KEY
      const res = await fetch(
        `https://api.openweathermap.org/data/2.5/weather?q=Tel-Aviv&appid=${key}`
      )
      const data = await res.json()
      return Response.json(data)
    }
  3. צרו .env.local מקומית:
    OPENWEATHER_API_KEY=your_actual_key_here
    ודאו שזה ב-.gitignore (אמור להיות כברירת מחדל).
  4. בדקו מקומית: npm run dev, גלשו ל-localhost:3000/api/weather. אתם אמורים לראות JSON עם מזג אוויר של תל אביב.
  5. הוסיפו ל-Vercel: Project → Settings → Environment Variables. מוסיפים OPENWEATHER_API_KEY עם הערך. בוחרים Production + Preview + Development.
  6. Deploy מחדש. מחיצה push או Redeploy מה-dashboard.
  7. בדקו ב-production: my-name.vercel.app/api/weather — אמור להחזיר את אותו JSON.
  8. בדיקת אבטחה: פתחו DevTools → Network. האם ה-API key נחשף בבקשה? לא אמור — הקריאה יוצאת מהשרת, לא מהדפדפן. זה תפקיד ה-env var הסודי.

תוצאה צפויה: API route שעובד מקומית וב-production, עם API key שמוסתר — לא נמצא בקוד, לא ב-Git, לא נחשף בדפדפן. זו הדרך הנכונה להשתמש בסודות — בכל פרויקט, לכל החיים.

שגרת עבודה — הרגלים מהפרק הזה
תדירותמה לעשות
יומיאחרי כל שינוי משמעותי — git push. תנו ל-CI/CD לעבוד. אל תצברו שינויים במחשב.
יומילפני push גדול — הריצו npm run build מקומית. אם נשבר אצלכם, יישבר גם על הפלטפורמה.
שבועיבדקו את ה-bandwidth שלכם ב-dashboard. האם אתם קרובים ל-80% מהחינם? אם כן — תכננו מה הצעד הבא (Pro או מעבר ל-Cloudflare Pages).
שבועיסקרו את ה-deployments האחרונים. היו build failures? מה הסיבה? האם הן חוזרות?
שבועיבדקו שה-env vars מסונכרנים בין Local ל-Production. משתנה חדש מקומי שלא הועבר — נשכח בקלות.
חודשיבדקו את ה-Analytics (אם פעיל). מאיפה המבקרים? איזה דפים הכי פופולריים?
חודשיודאו שהדומיין שלכם לא בתהליך חידוש קרוב. דומיין שפג — האתר נופל מיידית.
חודשיבדקו שה-SSL פעיל ומתחדש. בכל הפלטפורמות זה אוטומטי, אבל כדאי לוודא.
אם אתם עושים רק דבר אחד מהפרק הזה

פרסו פרויקט אחד — כל פרויקט — ל-Vercel תוך 10 דקות. זהו. הפעם הראשונה היא הגדולה. ברגע שראיתם פרויקט שלכם חי ב-URL ציבורי, מבינים את ה-CI/CD, ראיתם את הקסם של push = deploy — כל השאר הוא שינוי מדורג. אם אתם עדיין רק קוראים על פריסה ולא פרסתם בפועל — החמצתם את עיקר הערך של הפרק. פרסו עכשיו, אפילו פרויקט פשוט, אפילו בלי דומיין מותאם.

בדקו את עצמכם — 5 שאלות
  1. אם יש לכם פורטפוליו סטטי טהור — איזו פלטפורמה תבחרו ולמה? (רמז: GitHub Pages או Cloudflare Pages — חינם, פשוט, אין צורך ב-SSR)
  2. מה ההבדל בין A record ל-CNAME, ומתי משתמשים בכל אחד? (רמז: A מפנה ל-IP, CNAME מפנה לדומיין אחר)
  3. למה לא שמים API keys ב-NEXT_PUBLIC_? (רמז: הם נחשפים בדפדפן, וכל אחד יכול לקרוא אותם ב-DevTools)
  4. איך preview deployment עוזר לכם לעבוד עם לקוח? (רמז: URL זמני לכל PR — לקוח רואה שינויים לפני שהם באתר הראשי)
  5. אתם בונים צ'אט-בוט עם streaming תגובות. Edge function או Serverless function? (רמז: Edge — בגלל ה-streaming המהיר והקרבה למשתמש)

אם עניתם נכון על 4 מתוך 5 — אתם מוכנים לפרק הבא, שבו נרכיב את ה-stack המלא.

סיכום הפרק

הפרק הזה לקח את הפרויקט שלכם מהמחשב הביתי לאוויר. זו אחת ממזרקות הערך הגדולות במסע של vibe coder — כי ברגע שאתם יודעים לפרוס, אתם לא רק בונים אתרים, אתם מפרסמים אותם. ההבדל בין "אני לומד לקודד" ל-"יש לי אתר חי" הוא הבדל מהותי בקריירה ובתחושה האישית.

למדנו את 4 הפלטפורמות המרכזיות: Vercel (הבית של Next.js, האינטגרציה הכי חלקה), Netlify (הוותיקה עם forms ו-identity מובנים), Cloudflare Pages (bandwidth אין-סופי, הכי נדיב), ו-GitHub Pages (הפשוט והחינמי לאתרים סטטיים). לכל אחד יש שורה שהיא מובילה בה — Vercel ל-SSR, Netlify ל-forms, Cloudflare לטרפיק גבוה, GitHub לפשטות.

ראינו מה זה CI/CD ואיך git push הופך לפריסה תוך 90 שניות. למדנו על preview deployments — כל PR מקבל URL משלו, ומאפשר לבדוק ולשתף לפני שהשינוי חי באתר הראשי. הבנו DNS ואיך לחבר דומיין מותאם — A records, CNAME, SSL אוטומטי דרך Let's Encrypt. ראינו איפה קונים דומיין בישראל (Cloudflare Registrar ל-.com, Domain The Net ל-.co.il) ובאיזה מחירים.

חיזקנו את ה-environment variables — למה לעולם לא שמים API keys בקוד, איך מגדירים אותם ב-dashboard של הפלטפורמה, ומה ההבדל בין משתנים סודיים (server-side) לציבוריים (NEXT_PUBLIC_). והבנו את ההבדל בין edge functions (מהירות, קרבה למשתמש, מגבלות) ל-serverless functions (גמישות, תמיכה מלאה ב-Node, עם cold start).

קיבלתם שני deliverables: טבלת השוואה מלאה של 4 הפלטפורמות וצ'קליסט 12 צעדים מ-localhost לאתר חי עם דומיין. שמרו אותם — תשתמשו בהם בכל פרויקט מכאן והלאה.

בפרק הבא (פרק 10 — בחירת Stack) נקח את כל מה שלמדנו עד עכשיו — frameworks, UI libraries, icons, project structure, ופריסה — ונרכיב אותם ל-decision framework של 5 שאלות. תדעו בדיוק איזה stack לבחור לכל סוג פרויקט: landing page, פורטפוליו, SaaS, בלוג, חנות. זה סיכום הקורס — והפרק הבא הופך את הידע שלכם לצ'קליסט פרקטי שתשתמשו בו בכל פרויקט חדש.

רשימת בדיקה — מה השלמתם?