8
שלב 3 — שיגור

העלאה לאוויר — Deployment and Going Live

בנית אתר, אפליקציה, או פרויקט שלם — עכשיו הגיע הזמן שהעולם יראה אותו. הפרק הזה לוקח אותך מ"זה עובד על המחשב שלי" ל"זה חי באינטרנט עם דומיין, אבטחה, וניטור". תלמד לפרוס ב-Cloudflare Pages, Vercel, Netlify ו-GitHub Pages, לחבר דומיין, להגדיר SSL, לנטר זמינות, ולעדכן בבטחה — כל זה דרך Claude Code, בלי לגעת בשרתים. מ"Deploy my project" ועד URL חי עם CDN גלובלי — הכול בפרק אחד.

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

בפרק 7 הפכת את הפרויקט שלך לרספונסיבי וחוצה-פלטפורמות — הוא נראה מעולה בנייד, בטאבלט ובדסקטופ, ואולי אפילו הפכת אותו ל-PWA. בפרק הזה תיקח את הפרויקט ותעלה אותו לאוויר — עם דומיין אמיתי, HTTPS, ניטור זמינות, ותהליך עדכון בטוח. בפרק 9 תלמד על Voice Mode, שליטה מרחוק, ותזרימי עבודה מודרניים שישדרגו את הדרך שבה אתה מתקשר עם Claude Code.

מילון מונחים — פרק 8
מונח באנגלית הסבר בעברית
Deployment (פריסה) התהליך שלוקח את הקוד מהמחשב שלך ומעלה אותו לאינטרנט — כדי שכל אחד בעולם יוכל לגשת אליו
CDN (Content Delivery Network) רשת שרתים ברחבי העולם שמגישה את האתר שלך מהשרת הקרוב ביותר למשתמש — מהיר יותר
Static Site אתר שמורכב מ-HTML, CSS ו-JavaScript בלבד — בלי שרת, בלי בסיס נתונים. פשוט וזול לפרוס
Dynamic App אפליקציה שצריכה שרת שמריץ קוד — כמו API, בסיס נתונים, או לוגיקה צד-שרת
SSL/HTTPS הצפנת התקשורת בין המשתמש לאתר — המנעול הירוק בשורת הכתובת. כל הפלטפורמות נותנות את זה חינם
DNS (Domain Name System) ספר הטלפונים של האינטרנט — מתרגם שם דומיין (כמו example.com) לכתובת IP של שרת
Domain (דומיין) הכתובת האנושית של האתר שלך — example.com במקום מספרי IP ארוכים
Docker קופסה שמכילה את האפליקציה שלך + כל מה שהיא צריכה — מבטיחה שזה יעבוד בכל מקום באותו אופן
Environment Variable הגדרה שמשתנה בין סביבות (פיתוח, ייצור) — כמו סיסמה שונה לכל סביבה
CI/CD (Continuous Integration/Deployment) תהליך אוטומטי: דוחפים קוד → בדיקות רצות → פריסה אוטומטית. בלי מגע ידיים
Preview Deployment גרסת בדיקה של שינוי — נפרסת לכתובת זמנית כדי שתבדוק לפני שזה עולה לייצור
Rollback חזרה לגרסה קודמת של האתר — כשמשהו נשבר, חוזרים למצב עובד בלחיצה אחת
Uptime Monitoring שירות שבודק כל כמה דקות אם האתר שלך חי — ומתריע כשהוא נופל
CORS (Cross-Origin Resource Sharing) מנגנון אבטחה שקובע מאילו דומיינים מותר לגשת ל-API שלך
Zero-Downtime Deployment פריסה שלא גורמת להפסקת שירות — הגרסה החדשה עולה בזמן שהישנה עדיין פועלת
מתחיל 15 דקות מושג חינם

1. נוף ה-Deployment — מה השתנה ולמה זה קל

Deployment = להעלות את הפרויקט שלך לאינטרנט כדי שכל אחד בעולם יוכל לגשת אליו. זו המשמעות הפשוטה. לא מדובר בשרתים מסובכים, לא ב-SSH, ולא בלינוקס — מדובר בפקודה אחת או Push ל-GitHub שמעלים את מה שבנית לכתובת חיה באינטרנט.

בואו ניתן פרספקטיבה: ב-2015, פריסת אתר דרשה שרת (VPS) שעלה $20-50 בחודש, ידע ב-Linux, הגדרת SSH, התקנת Nginx, הגדרת SSL ידנית עם Let's Encrypt, ועוד שעות של קונפיגורציה. היום? 30 שניות. פקודה אחת בטרמינל, ויש לך URL חי עם CDN גלובלי, HTTPS אוטומטי, ו-Preview Deployments. חינם.

30 שניות

הזמן שלוקח לפרוס אתר חי באינטרנט ב-2026 — מפקודה אחת בטרמינל ל-URL חי עם HTTPS ו-CDN. בחינם.

טעות נפוצה: לדחות את ה-Deployment "עד שהכול מושלם"

הטעות: לעבוד חודשים על הפרויקט בלי להעלות אותו לאוויר, כי "עוד לא מוכן." למה זה מפתה: אתה רוצה שהרושם הראשון יהיה מושלם. מה לעשות במקום: פרוס עכשיו, גם אם יש חסרונות. Deploy מוקדם חושף בעיות שלא תראה ב-localhost — CORS, Mixed Content, DNS. ככל שתפרוס מוקדם יותר, תתקן בעיות מוקדם יותר. אפשר לפרוס בלי לשתף את ה-URL עם כל העולם.

המהפכה הזו קרתה בזכות ארבע פלטפורמות שמתחרות על מי ייתן לך יותר בחינם:

פלטפורמה מתמחה ב... Free Tier יתרון מפתח
Cloudflare Pages אתרים סטטיים + Workers Bandwidth ללא הגבלה, 500 Builds בחודש הכי מהיר בישראל (Datacenter בתל אביב)
Vercel Next.js ופריימוורקים מודרניים 100GB Bandwidth, 1M Function Invocations האופטימלי ל-Next.js (הם בנו אותו)
Netlify אתרים + טפסים + Functions 100GB Bandwidth, 125K Function Calls טפסים מובנים בלי Backend
GitHub Pages אתרים סטטיים חינם לחלוטין, 1GB Storage הכי פשוט — פריסה ישירות מהריפו
חשוב לדעת — הגבלות שימוש מסחרי

ה-Free Tier של Vercel (Hobby Plan) מוגבל לשימוש אישי ולא-מסחרי בלבד. אם אתה בונה אתר לעסק, חנות אונליין, או כל דבר שמייצר הכנסה — אתה חייב לשדרג ל-Pro ($20/חודש). Cloudflare Pages ו-GitHub Pages מאפשרים שימוש מסחרי גם ב-Free Tier. Netlify מאפשר שימוש מסחרי אבל החשבון יושהה אם תעבור את מגבלות ה-Free Tier. שימו לב לזה לפני שבוחרים פלטפורמה לפרויקט עסקי.

כל הפלטפורמות האלה עובדות באותו עיקרון: Git-based Deployment. אתה דוחף קוד ל-GitHub → הפלטפורמה מזהה את השינוי → בונה את הפרויקט → פורסת אותו → ותוך שניות יש URL חי. אפס קונפיגורציה ידנית. אפס שרתים לנהל.

ו-Claude Code הופך את זה לפשוט עוד יותר. אתה אומר: "Deploy my project" — ו-Claude מזהה את סוג הפרויקט (סטטי? Next.js? React?), בוחר את הפלטפורמה המתאימה, ומריץ את הפקודות הנכונות. אתה לא צריך לדעת מה זה npx wrangler או npx vercel — Claude יודע. ואם יש בעיה? Claude קורא את ה-Error, מבין מה לא עובד, ומתקן — בלי שאתה צריך לגגל שום דבר.

מסגרת החלטה: איזו פלטפורמה לבחור?

השתמש בעץ ההחלטות הבא:

  1. אתר סטטי (HTML/CSS/JS בלבד)? → GitHub Pages (הכי פשוט) או Cloudflare Pages (הכי מהיר)
  2. פרויקט Next.js? → Vercel (הם בנו את Next.js, הם פורסים אותו הכי טוב)
  3. צריך טפסים בלי Backend? → Netlify (Netlify Forms מובנה)
  4. Full-stack עם Workers/Functions? → Cloudflare Pages + Workers (ה-Free Tier הנדיב ביותר)
  5. פרויקט מסחרי בחינם? → Cloudflare Pages (מאפשר שימוש מסחרי ב-Free Tier)
  6. לא יודע מה לבחור? → Cloudflare Pages לפרויקטים מסחריים, Vercel לפרויקטים אישיים

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

עשה עכשיו 5 דקות

החלט איזו פלטפורמה מתאימה לפרויקט שלך. אם אין לך העדפה — צור חשבון חינם ב-Cloudflare (dash.cloudflare.com) אם אתה רוצה את הגמישות המקסימלית (כולל שימוש מסחרי), או ב-Vercel (vercel.com) אם הפרויקט שלך אישי-לימודי. חבר את חשבון ה-GitHub שלך. זה הכול — אתה מוכן לפרוס.

טיפ

בחר פלטפורמה אחת ולמד אותה היטב. הקפצה בין Vercel, Cloudflare, ו-Netlify מבזבזת זמן. כל הפלטפורמות נותנות תוצאות מצוינות — ההבדלים הם בניואנסים שלרוב לא משנים לפרויקטים קטנים-בינוניים.

מתחיל 30 דקות מעשי חינם

2. Cloudflare Pages — כוח חינמי

Cloudflare Pages היא פלטפורמת ה-Deployment החינמית הנדיבה ביותר בשוק. Bandwidth ללא הגבלה, CDN גלובלי עם יותר מ-330 נקודות נוכחות ב-120+ מדינות (כולל Datacenter בתל אביב), דומיינים מותאמים אישית, SSL אוטומטי — והכול בחינם. אין כרטיס אשראי. אין Tier מוגבל. חינם. ובניגוד ל-Vercel — מותר שימוש מסחרי גם ב-Free Tier.

למה Cloudflare מיוחד עבור Vibe Coders ישראלים? כי יש להם Datacenter בתל אביב. המשמעות: כשגולש ישראלי נכנס לאתר שלך, הוא מגיע ל-Datacenter שיושב 20 קילומטר ממנו — לא לשרת בוירג'יניה. מהירות טעינה מטורפת, ללא עלות. לעסקים ישראלים שרוצים לפרוס אתר שנטען מהר בשוק המקומי — אין פתרון טוב יותר.

330+

ערים ברחבי העולם עם Datacenter של Cloudflare — כולל תל אביב. המשמעות: האתר שלך נמצא פיזית קרוב למשתמשים, בכל מקום.

שתי דרכים לפרוס ב-Cloudflare Pages

דרך 1 — חיבור ל-GitHub (מומלץ): נכנסים ל-Cloudflare Dashboard → Pages → Create a project → Connect to GitHub → בוחרים את ה-Repo → מגדירים Build Settings → ולוחצים Deploy. מעכשיו, כל Push ל-main פורס אוטומטית. כל Pull Request מקבל Preview URL נפרד.

דרך 2 — Direct Upload עם Wrangler: אם אתה רוצה לפרוס בלי GitHub — פקודה אחת:

פריסה ישירה עם Wrangler

npx wrangler pages deploy ./dist

זה הכול. Wrangler לוקח את התיקייה שלך (dist, build, out, או כל תיקיית Output) ומעלה אותה ישירות ל-Cloudflare Pages. תוך 10 שניות יש לך URL חי. בלי GitHub, בלי Git, בלי כלום — רק הקבצים שלך.

Claude Code + Cloudflare Pages — סשן שלם

הנה איך זה נראה בפועל כשמבקשים מ-Claude Code לפרוס:

שיחה עם Claude Code

אתה: "Deploy my project to Cloudflare Pages"

Claude Code:
1. מזהה שהפרויקט הוא React (Vite) — קורא את package.json
2. מריץ npm run build — בונה את הפרויקט
3. מריץ npx wrangler pages deploy ./dist — פורס
4. מחזיר URL חי: https://my-project-abc.pages.dev

סך הכול: שאלה אחת, 4 פעולות, 30 שניות. האתר שלך חי.

Build Settings לפריימוורקים נפוצים

Cloudflare צריך לדעת איך לבנות את הפרויקט שלך. הנה ההגדרות הנכונות:

Framework Build Command Build Output
HTML סטטי (בלי Framework) (ריק — אין צורך ב-Build) / (תיקיית השורש)
React (Vite) npm run build dist
Next.js (Static Export) npx next build out
Hugo hugo public
Astro npm run build dist

לא צריך לזכור את זה — Claude Code יודע את ההגדרות הנכונות לכל Framework. בקש: "Deploy my project to Cloudflare Pages" — והוא יגדיר הכול.

Cloudflare Workers — צד שרת חינם

Cloudflare Workers הם Serverless Functions שרצות לצד האתר שלך ב-Cloudflare. צריך API Route? צריך לוגיקה צד-שרת? Workers מטפלים בזה. ה-Free Tier נותן 100,000 בקשות ביום — מספיק לרוב הפרויקטים.

השילוב של Pages + Workers הופך את Cloudflare לפלטפורמת Full-Stack מלאה בחינם. Frontend נפרס ב-Pages, Backend ב-Workers, ו-Storage ב-KV או R2 — הכול של Cloudflare, הכול חינם עד לסקיילים משמעותיים. אפשר גם להוסיף Queues (תורי הודעות) ו-Durable Objects (מצב מתמיד) — כולם חינם ברמה בסיסית.

עשה עכשיו 15 דקות

פרוס אתר סטטי ל-Cloudflare Pages. אם יש לך תיקייה עם קבצי HTML — מעולה. אם לא, צור אחת: פתח Claude Code ובקש: "Create a simple beautiful one-page portfolio site in a folder called my-site, then deploy it to Cloudflare Pages using wrangler." — Claude ייצור את האתר ויפרוס אותו. תקבל URL חי תוך פחות מדקה.

טיפ

Cloudflare Pages + Workers = פלטפורמת Full-Stack עם ה-Free Tier הנדיב ביותר בתעשייה. אם אתה בונה פרויקט צד (Side Project) או עסק קטן — Cloudflare הוא הבחירה הכלכלית הטובה ביותר. אפס עלות, ביצועים מעולים, ושימוש מסחרי מותר.

מתחיל 30 דקות מעשי חינם

3. Vercel — הבית של Next.js

Vercel היא החברה שבנתה את Next.js — ה-Framework הפופולרי ביותר בעולם ה-React. מי שבנה את הכלי, יודע הכי טוב איך לפרוס אותו. אם הפרויקט שלך מבוסס Next.js (וסיכוי טוב שהוא כן, אם עבדת לפי פרק 4), Vercel היא הבחירה הטבעית.

ה-Free Tier (Hobby Plan) של Vercel נותן: 100GB Bandwidth, 1 מיליון Function Invocations בחודש, Edge Functions, ו-Preview Deployments. מספיק בשביל כל פרויקט אישי.

חשוב מאוד — הגבלת שימוש מסחרי

ה-Hobby Plan של Vercel מוגבל לשימוש אישי ולא-מסחרי בלבד. אם הפרויקט שלך מייצר הכנסה, מקדם עסק, או משמש לקוחות — אתה חייב לשדרג ל-Pro Plan ($20/משתמש/חודש). Vercel אוכפים את זה, וחשבונות שמפרים את התנאים עלולים להיחסם. לפרויקטים מסחריים בחינם — השתמש ב-Cloudflare Pages.

פריסה ב-30 שניות

הנה כמה זה פשוט:

פריסה ל-Vercel מהטרמינל

npx vercel

זהו. פקודה אחת. Vercel שואל כמה שאלות (איזה פרויקט? איזה Framework?) — ותוך 30 שניות יש לך URL חי. הפקודה גם מחברת את הפרויקט ל-Vercel Dashboard, כך שמעכשיו כל Push ל-GitHub פורס אוטומטית.

חיבור GitHub — Auto-Deploy

הדרך המומלצת: חבר את ה-GitHub Repo שלך ל-Vercel דרך ה-Dashboard. מרגע החיבור:

אתה לא צריך לעשות כלום. משנה קוד? דוחף? Vercel פורס. אם משהו נשבר? Rollback בלחיצה אחת מה-Dashboard.

Environment Variables ב-Vercel

הפרויקט שלך צריך מפתח API? כתובת של בסיס נתונים? טוקן סודי? לעולם אל תשים את זה בקוד. ב-Vercel: Settings → Environment Variables → הוסף את השם והערך → Vercel מצפין ומאבטח. הקוד שלך פשוט משתמש ב-process.env.VAR_NAME.

Vercel גם מאפשר להפריד בין סביבות: ערך אחד ל-Production, ערך אחר ל-Preview, ערך שלישי ל-Development. ככה הפרויקט שלך משתמש בבסיס נתונים שונה בכל סביבה — בלי לשנות שום קוד.

בקש מ-Claude: "Set up my Vercel deployment with environment variables for Supabase URL and key" — והוא ידריך אותך צעד אחרי צעד.

Vercel Analytics ו-Speed Insights

Vercel מציע שני כלי מדידה מובנים:

עשה עכשיו 15 דקות

פרוס את פרויקט ה-Next.js שלך (או כל פרויקט אחר) ל-Vercel. פתח Claude Code בתיקיית הפרויקט ובקש: "Deploy this project to Vercel and set up environment variables for production." — Claude ירוץ npx vercel, יענה על השאלות, ויחזיר לך URL חי. לחץ על ה-URL ותראה את הפרויקט שלך חי באינטרנט.

מסגרת החלטה: Checklist לפריסה ב-Vercel
  1. npx vercel — פרוס את הפרויקט וקבל URL ראשוני
  2. Environment Variables — הגדר את כל ה-env vars ב-Dashboard (Supabase URL, API Keys וכו')
  3. Preview URL — בדוק שה-Preview Deployment עובד נכון
  4. Custom Domain — חבר דומיין מותאם אישית (נלמד בסעיף 6)
  5. Analytics — הפעל Vercel Web Analytics ו-Speed Insights
  6. Git Integration — וודא שכל Push ל-main פורס אוטומטית

כלל: אל תשתף את ה-URL הסופי עד שעברת על כל 6 הצעדים. קישור עם שגיאות = רושם ראשוני רע.

טיפ

ה-Free Tier של Vercel מגביל את ה-Serverless Functions ל-4 שעות CPU בחודש. לרוב הפרויקטים האישיים זה מספיק בהרבה — אבל אם יש לך API Routes כבדים שמבצעים עיבוד ארוך, כדאי לנטר את השימוש ב-Dashboard. חריגה מהמגבלות ב-Hobby Plan לא עולה כסף — הפונקציות פשוט מפסיקות לעבוד עד תחילת החודש הבא.

מתחיל 20 דקות מעשי חינם

4. Netlify ו-GitHub Pages

Netlify — מעולה לטפסים ולפונקציות

Netlify מצטיינת בשלושה דברים: טפסים מובנים (Netlify Forms), ניהול משתמשים (Netlify Identity), ו-Serverless Functions. אם אתה בונה אתר שצריך טופס יצירת קשר בלי Backend — Netlify עושה את זה בשורת HTML אחת.

איך Netlify Forms עובד? מוסיפים netlify attribute לטופס HTML רגיל:

Netlify Forms — טופס בלי Backend

<form name="contact" netlify>
  <input type="text" name="name" placeholder="שם">
  <input type="email" name="email" placeholder="אימייל">
  <textarea name="message" placeholder="הודעה"></textarea>
  <button type="submit">שלח</button>
</form>

זה הכול. Netlify מזהה את ה-Attribute, אוסף את הנתונים, ושולח אותם ל-Dashboard שלך. אפשר להגדיר התראות במייל, Slack, או Webhook. אפס קוד Backend.

פריסה ב-Netlify: שתי אופציות — חיבור GitHub Repo (מומלץ) או Drag & Drop: פשוט גרור את תיקיית הפרויקט לתוך netlify.com → האתר עולה לאוויר. כן, ברצינות. גרור ושחרר.

הגבלה חשובה: Netlify מציע 100GB Bandwidth ו-300 Build Minutes בחודש ב-Free Tier. אם תעבור את המגבלות — האתר שלך יושהה עד סוף החודש. שימו לב לזה אם האתר שלכם צובר תעבורה.

GitHub Pages — פשטות מקסימלית

GitHub Pages היא הדרך הכי פשוטה להעלות אתר סטטי. אין צורך בחשבון נפרד — אם יש לך GitHub, יש לך GitHub Pages. הפעלה: Repo Settings → Pages → בחר Branch → האתר שלך נמצא ב-username.github.io/repo-name.

GitHub Pages מושלם בשביל:

מגבלות: GitHub Pages תומך באתרים סטטיים בלבד — אין Serverless Functions, אין Backend, אין טפסים מובנים. מגבלת אחסון של 1GB לריפו ו-100GB Bandwidth בחודש (Soft Limit — GitHub מתריע אבל לא חוסם מיידית). אם צריך לוגיקה צד-שרת, זה לא הכלי.

עשה עכשיו 10 דקות

הפעל GitHub Pages על אחד הריפוזיטוריז שלך. לך ל-Settings → Pages → בחר את ה-Branch (בדרך כלל main) → לחץ Save. תוך דקה האתר שלך חי ב-username.github.io/repo-name. אם אין לך ריפו עם HTML — בקש מ-Claude: "Create a beautiful personal portfolio page, push it to a new GitHub repo, and enable GitHub Pages."

מסגרת החלטה: השוואת Hosting חינמי — טבלה מסכמת
קריטריון Cloudflare Pages Vercel Netlify GitHub Pages
Bandwidth ללא הגבלה 100GB 100GB 100GB (soft)
Builds 500/חודש ללא הגבלה 300 דקות ללא הגבלה
Functions 100K/יום 1M/חודש 125K/חודש אין
שימוש מסחרי מותר אסור מותר* מותר
Datacenter בישראל כן (תל אביב) לא לא לא

* Netlify מאפשר שימוש מסחרי, אבל האתר יושהה אם תעבור את מגבלות ה-Free Tier.

שורה תחתונה: אין תשובה "לא נכונה". כל הפלטפורמות מעולות. הטעות היחידה היא לא לפרוס בכלל.

טיפ

GitHub Pages מושלם לפרויקטים פשוטים — אל תזלזל בו כי הוא "בסיסי מדי". פורטפוליו, CV אונליין, דפי תיעוד — הכול עובד מצוין בלי לשלם שקל אחד.

בינוני 25 דקות מעשי חינם

5. Docker — מה Vibe Coders צריכים לדעת

נתחיל עם האמת החשובה: אתה לא חייב Docker ברוב הפרויקטים. אם אתה פורס ב-Vercel, Cloudflare, Netlify, או GitHub Pages — אתה לא צריך Docker. הפלטפורמות האלה מטפלות בכל ההגדרות בשבילך.

אז מתי בכל זאת צריך Docker? כשאתה:

Docker = קופסה שמכילה את האפליקציה שלך + כל מה שהיא צריכה כדי לרוץ. חשוב על זה ככה: אתה יכול לקחת את הקופסה הזו ולשים אותה על כל מחשב בעולם — והיא תעבוד בדיוק אותו דבר. לא משנה אם זה Mac, Windows, או שרת Linux. Docker מבודד את האפליקציה מהסביבה שלה.

Dockerfile — המתכון של האפליקציה

Dockerfile הוא קובץ טקסט שמתאר איך לבנות את הקופסה (Container) של האפליקציה. Claude Code מייצר Dockerfile מותאם אישית לפרויקט שלך:

בקשה ל-Claude Code

"Create a Dockerfile for my Next.js app with multi-stage build"

Claude מייצר Dockerfile אופטימלי עם Multi-Stage Build: שלב 1 מתקין Dependencies, שלב 2 בונה את האפליקציה, שלב 3 מריץ רק את מה שצריך. התוצאה: Image קטן ומאובטח שמתחיל מ-node:20-alpine ושוקל פחות מ-200MB.

docker-compose — להריץ כמה שירותים ביחד

צריך אפליקציה + בסיס נתונים + Redis? docker-compose מנהל הכול בפקודה אחת:

בקשה ל-Claude Code

"Set up a Docker environment with my Node.js app, PostgreSQL database, and Redis cache"

Claude יוצר docker-compose.yml שמגדיר 3 Services: app, database, cache. פקודה אחת — docker compose up — מפעילה הכול. פקודה אחת — docker compose down — סוגרת הכול. (שימו לב: בגרסאות Docker חדשות, docker compose עם רווח מחליף את docker-compose עם מקף.)

עשה עכשיו 15 דקות

אם Docker מותקן אצלך (בדוק עם docker --version), בקש מ-Claude: "Create a Dockerfile and docker-compose.yml for my app so it runs identically on any computer." — Claude ייצור את הקבצים, ואתה תריץ docker compose up. אם Docker לא מותקן — אל תטרח להתקין עכשיו. חזור לסעיף הזה כשתצטרך פריסה ל-VPS.

אזהרה

Docker הוא כלי חזק אבל מוסיף מורכבות. אל תשתמש ב-Docker רק כי "כולם משתמשים". אם Vercel או Cloudflare Pages מספיקים לך — הם מספיקים. Docker נכנס לתמונה כשאין פלטפורמה שמנהלת את הפריסה בשבילך ואתה חייב שרת משלך.

מתחיל 30 דקות מעשי $10-15/שנה

6. דומיין ו-DNS — הכתובת שלך באינטרנט

יש לך אתר חי ב-my-project-abc123.vercel.app. זה עובד. אבל אם אתה רוצה שאנשים יקחו את הפרויקט שלך ברצינות — אתה צריך דומיין אמיתי. myproject.com נראה מקצועי. random-slug-42.vercel.app נראה כמו פרויקט לימודי.

איפה לקנות דומיין?

ספק (Registrar) מחיר .com יתרון הערה
Cloudflare Registrar ~$10-11/שנה מחיר עלות בלבד (ללא מרווח רווח), DNS מהיר מומלץ מאוד
Porkbun ~$10/שנה פשוט, WHOIS Privacy חינם אלטרנטיבה מצוינת
Namecheap ~$10-13/שנה ותיק ואמין מחיר חידוש גבוה יותר
GoDaddy ~$15-22/שנה — יקר, Upsells אגרסיביים. הימנע.

למה Cloudflare Registrar מומלץ? כי Cloudflare מוכר דומיינים במחיר העלות בלבד — הם לא מרוויחים שקל על רכישת דומיינים. מחיר הרכישה = מחיר החידוש. אין הפתעות, אין Upsells, אין מבצעי "שנה ראשונה זולה ואז כפול." בנוסף, אם ה-DNS שלך כבר ב-Cloudflare (וצריך להיות) — הכול באותו Dashboard.

איזו סיומת לבחור?

DNS — מה זה ואיך מגדירים

DNS (Domain Name System) הוא ספר הטלפונים של האינטרנט. כשמישהו מקליד myproject.com בדפדפן, DNS מתרגם את זה לכתובת IP של השרת שמארח את האתר. אתה צריך להגדיר רשומות DNS כדי שהדומיין שלך יצביע על הפלטפורמה שלך.

ארבע רשומות DNS שצריך לדעת:

סוג רשומה מה עושה דוגמה
A Record מצביע על כתובת IP של שרת mysite.com → 76.76.21.21
CNAME Record מצביע על דומיין אחר (של פלטפורמת ההאסטינג) www.mysite.com → cname.vercel-dns.com
MX Record ניתוב אימיילים mysite.com → mail.google.com
TXT Record אימות ואבטחה (SPF, DKIM) הוכחת בעלות על הדומיין

בפועל, אתה צריך בדרך כלל רשומה אחת או שתיים. כשמחברים דומיין ל-Vercel, לדוגמה — Vercel אומר לך בדיוק מה להוסיף. Claude Code יכול לדריך אותך: "Set up my domain example.com to point to my Vercel deployment" — והוא מסביר את הרשומות המדויקות שצריך להוסיף.

טעות נפוצה: לקנות דומיין ב-GoDaddy בגלל פרסומת

הטעות: לקנות דומיין בספק עם מחיר שנה ראשונה זול (למשל GoDaddy, $1 לשנה ראשונה) ואז לגלות שהחידוש עולה $20-40 לשנה, עם Upsells אגרסיביים. למה זה מפתה: המחיר ההתחלתי נראה מצוין. מה לעשות במקום: קנה ב-Cloudflare Registrar (מחיר עלות, ללא רווח) או ב-Porkbun. מחיר הרכישה = מחיר החידוש. ב-Cloudflare, .com עולה כ-40 ש"ח לשנה — תמיד.

DNS Propagation — למה לוקח זמן

אחרי שמגדירים רשומת DNS, צריך לחכות שDNS Propagation יסתיים — התהליך שבו שרתי DNS ברחבי העולם מתעדכנים עם הרשומה החדשה. בדרך כלל לוקח בין 5 דקות ל-48 שעות. אם אתה משתמש ב-Cloudflare DNS — זה כמעט מיידי. עם ספקים אחרים — תתאזר בסבלנות. בדוק סטטוס ב-whatsmydns.net.

עשה עכשיו 20 דקות

אם אתה מוכן להשקיע — קנה דומיין ב-Cloudflare Registrar או Porkbun. בחר שם קצר וזכיר. אז חבר אותו לפלטפורמת ה-Hosting שלך: בקש מ-Claude "Set up my domain myproject.com to point to my Vercel deployment" — ובצע את ההוראות. אם אתה עדיין לא מוכן לקנות דומיין — זה בסדר. ה-.vercel.app או .pages.dev URLs עובדים מצוין בינתיים.

טיפ

השתמש ב-Cloudflare כספק DNS גם אם ה-Hosting שלך ב-Vercel. אתה מקבל CDN חינם, הגנת DDoS, ו-DNS Propagation מהיר. פשוט הפנה את ה-Nameservers של הדומיין ל-Cloudflare, ושם הגדר את הרשומות שמצביעות ל-Vercel.

מתחיל 20 דקות תיאוריה + מעשי חינם

7. SSL, HTTPS ואבטחה בסיסית

SSL (Secure Sockets Layer, ומאז עודכן ל-TLS — Transport Layer Security) הוא הפרוטוקול שמצפין את התקשורת בין הדפדפן של המשתמש לאתר שלך. כשאתר משתמש ב-SSL, הכתובת מתחילה ב-https:// (ה-S = Secure) ויש אייקון מנעול בשורת הכתובת. בלי SSL, הכתובת מתחילה ב-http:// והדפדפן מציג "Not Secure" — שנראה מפחיד למשתמשים.

החדשות הטובות: כל פלטפורמות ה-Deployment נותנות SSL חינם ואוטומטי. Cloudflare, Vercel, Netlify, GitHub Pages — כולן. אתה לא צריך לקנות Certificate, לא צריך להגדיר כלום. זה עובד. נקודה.

למה HTTPS חשוב?

  1. Google מדרג אתרי HTTPS גבוה יותר — זה אינדיקציה ל-SEO. HTTP = עונש.
  2. דפדפנים מסמנים HTTP כ-"Not Secure" — Chrome ו-Firefox מציגים אזהרה. משתמשים בורחים.
  3. טפסים ב-HTTP חשופים — סיסמאות, כרטיסי אשראי, פרטים אישיים עוברים בטקסט גלוי.
  4. APIs מודרניים דורשים HTTPS — Service Workers, Geolocation, Camera — כולם דורשים HTTPS כדי לעבוד.

Mixed Content — בעיה נפוצה

האתר שלך ב-HTTPS אבל טוען תמונה מ-HTTP? הדפדפן חוסם את התמונה. זה נקרא Mixed Content — תוכן מעורב שמשלב HTTPS עם HTTP. הפתרון: ודא שכל המשאבים (תמונות, סקריפטים, CSS, פונטים) נטענים מ-HTTPS. בקש מ-Claude: "Check my site for mixed content issues and fix them."

Security Headers — שכבת הגנה נוספת

מעבר ל-SSL, יש Security Headers — כותרות HTTP שהשרת שולח לדפדפן ואומרות לו מה מותר ומה אסור. Claude Code מגדיר את אלה בפקודה אחת:

בקשה ל-Claude Code

"Add security headers to my site: Content-Security-Policy, X-Frame-Options, X-Content-Type-Options, and Strict-Transport-Security."

Claude מוסיף את כל ה-Headers המומלצים — בין אם דרך vercel.json, _headers ב-Cloudflare/Netlify, או קונפיגורציה אחרת. בדרך כלל הוא גם מסביר מה כל Header עושה כדי שתבין מה הגדרת.

ה-Headers החשובים ביותר

Header מה עושה דוגמה
Strict-Transport-Security מכריח HTTPS — גם אם המשתמש הקליד http:// max-age=31536000; includeSubDomains
X-Content-Type-Options מונע מהדפדפן "לנחש" סוגי קבצים nosniff
X-Frame-Options מונע טעינת האתר ב-iframe (הגנה מ-Clickjacking) DENY או SAMEORIGIN
Content-Security-Policy קובע מאיפה מותר לטעון משאבים (הגנה מ-XSS) default-src 'self'

CORS — כשה-Frontend מדבר עם API

CORS (Cross-Origin Resource Sharing) הוא מנגנון שקובע מאילו דומיינים מותר לגשת ל-API שלך. אם ה-Frontend שלך נמצא ב-mysite.com וה-API ב-api.mysite.com — הדפדפן חוסם את הגישה בברירת מחדל. צריך להגדיר CORS Headers ב-API. בקש מ-Claude: "Configure CORS for my API to allow requests from my frontend domain" — והוא מטפל בזה.

עשה עכשיו 10 דקות

בדוק את האבטחה של האתר שפרסת: גלוש ל-securityheaders.com, הכנס את ה-URL של האתר שלך, ובדוק את הציון. סביר שתקבל ציון נמוך (D או F). אז בקש מ-Claude: "Check my site at [URL] for security header issues and add the missing headers." — הריצו שוב את הבדיקה ותראה שיפור דרמטי.

טיפ

אל תתעלם מאבטחה. גם אתר קטן יכול להיפרץ אם הוא לא מוגן כראוי. Security Headers לוקחים 5 דקות להגדיר עם Claude — ומגנים על המשתמשים שלך. הכלל: אם יש טופס באתר — אתה חייב Security Headers.

בינוני 20 דקות מעשי חינם

8. Environment Variables וסודות

Environment Variables (משתני סביבה) = הגדרות שמשתנות בין סביבות. סיסמה בפיתוח שונה מסיסמה בייצור. כתובת בסיס נתונים מקומי שונה מכתובת בענן. מפתח API לבדיקות שונה ממפתח API לייצור. במקום להחליף ערכים בקוד כל פעם — משתמשים ב-Environment Variables.

דוגמאות נפוצות של Environment Variables:

הכלל: שלושה מקומות, שלוש סביבות

סביבה איפה שומרים דוגמה
פיתוח (Development) קובץ .env או .env.local על המחשב שלך, ב-.gitignore
ייצור (Production) הגדרות הפלטפורמה (Dashboard) Vercel Settings, Cloudflare Dashboard
בקוד לעולם לא! שום ערך סודי בקוד, אף פעם.
אזהרה קריטית

לעולם אל תכניס מפתחות API, סיסמאות, או טוקנים לתוך הקוד. לעולם אל תעשה Push לקובץ .env ל-GitHub. ברגע שסוד עולה ל-GitHub — גם אם מחקת אותו אחר כך — הוא נשאר בהיסטוריית ה-Git ובוטים סורקים את GitHub כל הזמן לחיפוש מפתחות חשופים. השתמש תמיד ב-.gitignore כדי לחסום קבצי .env. אם כבר עשית Push של סוד — תחליף אותו מיד. מחיקה מהקוד לא מספיקה — הערך הישן עדיין בהיסטוריית Git.

קובץ .env.example — תיעוד בלי סודות

טיפ חשוב: צור קובץ .env.example שמכיל את שמות כל המשתנים בלי הערכים. הקובץ הזה כן עולה ל-Git — הוא מתעד מה צריך להגדיר, בלי לחשוף סודות:

קובץ .env.example

# Supabase
SUPABASE_URL=
SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

# API Keys
OPENAI_API_KEY=
RESEND_API_KEY=

# App Config
NEXT_PUBLIC_SITE_URL=

כשמישהו (או אתה בעוד חצי שנה) צריך להגדיר את הפרויקט — הוא מעתיק את הקובץ ל-.env וממלא את הערכים. בלי .env.example, אף אחד לא יודע מה צריך להגדיר.

טעות נפוצה: לשים API Keys בקוד ולדחוף ל-GitHub

הטעות: לכתוב const API_KEY = "sk-abc123..." ישירות בקוד, או לשכוח להוסיף .env ל-.gitignore לפני ה-Commit הראשון. למה זה מפתה: "רק בודק משהו מהר, אחר כך אתקן." מה לעשות במקום: לפני ה-Commit הראשון — וודא ש-.env* נמצא ב-.gitignore. השתמש תמיד ב-Environment Variables. אם כבר עשית Push של סוד — החלף את המפתח מיד. מחיקה מהקוד לא מספיקה כי הערך נשאר בהיסטוריית Git. בוטים סורקים GitHub בזמן אמת לחיפוש מפתחות חשופים.

NEXT_PUBLIC_ — משתנים שחשופים ללקוח

ב-Next.js, משתנים שמתחילים ב-NEXT_PUBLIC_ זמינים גם בצד הלקוח (הדפדפן). כל משתנה בלי הקידומת הזו זמין רק בצד השרת. לעולם אל תשים מפתח סודי במשתנה NEXT_PUBLIC_ — הוא יהיה חשוף לכל מי שפותח את ה-DevTools. ב-Vite, הקידומת המקבילה היא VITE_.

עשה עכשיו 10 דקות

בדוק את הפרויקט שלך: (1) האם קובץ .env נמצא ב-.gitignore? אם לא — הוסף אותו עכשיו. (2) צור קובץ .env.example עם שמות כל המשתנים (בלי ערכים). (3) הגדר את ה-Environment Variables בפלטפורמת ה-Hosting שלך (Vercel Settings או Cloudflare Dashboard). בקש מ-Claude: "Create a .env.example file for my project and make sure .env is in .gitignore."

טיפ

Claude Code יודע לא לדלוף סודות. כשאתה מבקש ממנו ליצור .env.example, הוא קורא את .env שלך (אם יש), שולף את שמות המשתנים, ויוצר קובץ עם שמות בלבד — בלי ערכים. אתה יכול לסמוך עליו בזה.

בינוני 25 דקות מעשי חינם

9. ניטור וזמינות — האתר שלך חי?

מזל טוב, האתר שלך באוויר. אבל השאלה החשובה: האם הוא נשאר באוויר? אתרים נופלים. DNS מפסיק לעבוד. SSL Certificate פג. שרת קורס. API חיצוני חוזר שגיאה. בלי ניטור — אתה מגלה שהאתר נפל רק כשמישהו שולח לך הודעה: "האתר שלך לא עובד." ולפעמים זה קורה אחרי שעות.

5 דקות

הזמן המקסימלי שצריך לקחת עד שתדע שהאתר שלך נפל. UptimeRobot בודק כל 5 דקות ב-Free Tier ושולח התראה מיידית.

UptimeRobot — ניטור חינם

UptimeRobot (uptimerobot.com) הוא שירות חינמי שבודק אם האתר שלך חי. כל 5 דקות, UptimeRobot שולח בקשה לכתובת שלך. אם הוא לא מקבל תשובה — הוא מתריע. Free Tier: 50 Monitors, בדיקה כל 5 דקות, התראות במייל. יותר ממספיק.

ההגדרה לוקחת 2 דקות: הרשם → Add New Monitor → הכנס URL → בחר Contact (email) → Create Monitor. זה הכול. מהרגע הזה, אם האתר נופל — אתה מקבל מייל תוך 5 דקות.

הגבלה חשובה: UptimeRobot Free Tier מוגבל לשימוש אישי ולא-מסחרי. לעסקים, שדרגו ל-Solo Plan ($7/חודש) שמציע גם בדיקות כל 60 שניות.

Error Tracking — Sentry

UptimeRobot בודק אם האתר חי. אבל מה עם שגיאות שמשתמשים חווים? JavaScript Error שמפיל כפתור? API שחוזר 500? בשביל זה יש Sentry (sentry.io) — שירות שתופס שגיאות מהדפדפנים של המשתמשים שלך ומראה לך את ה-Stack Trace המלא: איזו שגיאה, באיזה דפדפן, באיזו עמוד, ובאיזו שורת קוד.

Free Tier של Sentry: 5,000 Error Events בחודש + 10,000 Performance Units. Claude מגדיר את Sentry בפקודה אחת: "Add Sentry error tracking to my Next.js app" — ו-Claude מתקין, מגדיר, ומחבר.

Analytics — מי מבקר באתר?

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

כלי יתרון מחיר
Vercel Web Analytics מובנה אם אתה ב-Vercel, Privacy-friendly, בלי Cookies חינם (10,000 Data Points)
Plausible פשוט, Privacy-friendly, עומד ב-GDPR $9/חודש (או Self-host חינם)
Google Analytics הכי מפורט, חינם לגמרי חינם (אבל Google אוסף נתונים)
עשה עכשיו 15 דקות

הגדר ניטור בסיסי לאתר שפרסת: (1) הרשם ל-UptimeRobot (uptimerobot.com, חינם) והוסף Monitor עם ה-URL של האתר שלך. (2) אם אתה ב-Vercel — הפעל Vercel Web Analytics מה-Dashboard. (3) אופציונלי: בקש מ-Claude "Add Sentry error tracking to my project" לתפוס שגיאות JavaScript ממשתמשים אמיתיים.

טיפ

הגדר ניטור לפני שאתה משתף את האתר עם העולם. לגלות שהאתר שלך נפל מהודעת WhatsApp של לקוח — זה מביך. לגלות מ-UptimeRobot 5 דקות אחרי שנפל — זה מקצועי.

בינוני 25 דקות מעשי חינם

10. עדכון אתרים חיים בבטחה

האתר שלך חי ואנשים משתמשים בו. מעולה. עכשיו אתה צריך לעדכן אותו — לתקן באג, להוסיף פיצ'ר, לשנות עיצוב. והשאלה הכי מפחידה ב-Deployment: "מה אם העדכון שלי שובר משהו?"

התשובה: Preview Deployments. במקום לדחוף ישירות ל-Production ולהתפלל — אתה בודק קודם בסביבה נפרדת.

The Safe Update Flow — תהליך עדכון בטוח

  1. צור Branch: git checkout -b feature/new-contact-page — עובד על Branch נפרד, לא על main
  2. בצע שינויים: שנה, תקן, הוסף — הכול על ה-Branch
  3. Push: git push origin feature/new-contact-page — הפלטפורמה יוצרת Preview Deployment אוטומטי
  4. בדוק את ה-Preview URL: גלוש לכתובת ה-Preview, בדוק שהכול עובד, נראה טוב, ואין שגיאות
  5. Merge ל-main: כשאתה מרוצה — Merge. ה-Production מתעדכן אוטומטית
  6. אמת בייצור: גלוש ל-URL של ה-Production ובדוק שהכול תקין
  7. נטר: בדוק שגיאות ב-Sentry וזמינות ב-UptimeRobot
Claude Code עוזר בכל הסייקל

"Create a new branch called feature/dark-mode, implement dark mode, commit, and push."

Claude Code יוצר Branch, כותב את הקוד, עושה Commit עם הודעה ברורה, ועושה Push. אתה בודק את ה-Preview URL, ואז:

"This looks good. Merge feature/dark-mode into main."

Claude עושה Merge ומוחק את ה-Branch. ה-Production מתעדכן אוטומטית. כל הסייקל — בשתי הוראות.

Preview Deployments — בדיקה לפני שזה חי

כל הפלטפורמות (Vercel, Cloudflare Pages, Netlify) תומכות ב-Preview Deployments. כל Push ל-Branch שהוא לא main מקבל URL ייחודי — כתובת זמנית שרק אתה יודע עליה. אתה בודק שם. אם משהו שבור — מתקן ב-Branch. אם הכול טוב — Merge ל-main.

Rollback — חזרה אחורה

עדכנת והכול נשבר? Rollback. כל פלטפורמה שומרת את כל ה-Deployments הקודמים. בלחיצה אחת ב-Dashboard — חוזרים לגרסה הקודמת. לא צריך למחוק קוד, לא צריך Revert ב-Git, לא צריך כלום — לחיצה אחת והאתר חוזר למצב העובד הקודם.

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

עשה עכשיו 15 דקות

תרגל את תהליך העדכון הבטוח: (1) צור Branch חדש בפרויקט שפרסת: git checkout -b test/preview-demo. (2) שנה משהו קטן — צבע, טקסט, כותרת. (3) Commit ו-Push. (4) בדוק ב-Dashboard של הפלטפורמה שלך שנוצר Preview Deployment. (5) גלוש ל-Preview URL ובדוק. (6) אם הכול טוב — Merge ל-main ובדוק שה-Production עודכן. עשה את זה פעם אחת ותרגיש בנוח לעדכן לנצח.

טיפ

לעולם אל תדחוף ישירות ל-main branch בפרויקטים חשובים. תמיד השתמש ב-Branches ו-Preview Deployments. הרגל טוב שחוסך כאב ראש עתידי. גם אם אתה עובד לבד — הנהלות טובות שומרות עליך מעצמך.

בינוני 30 דקות מעשי חינם

11. Continuous Deployment עם GitHub Actions

עד עכשיו, הפלטפורמות (Vercel, Cloudflare, Netlify) טיפלו בפריסה אוטומטית בשבילך. אבל מה אם אתה רוצה יותר שליטה? מה אם אתה רוצה להריץ בדיקות לפני הפריסה? לבדוק שהקוד עומד בסטנדרטים? לשלוח הודעה ל-Slack כשה-Deploy הצליח? בשביל זה יש GitHub Actions.

GitHub Actions הוא מנוע אוטומציה שמובנה בתוך GitHub. אתה מגדיר Workflow — רצף פעולות שרצות אוטומטית כל פעם שקורה אירוע מסוים (Push, Pull Request, תזמון). הכול מתואר בקובץ YAML בתיקייה .github/workflows/.

2,000

דקות GitHub Actions בחודש ב-Free Tier. מספיק ל-30+ Deploys ביום עם בדיקות. לרוב הפרויקטים — הרבה יותר ממספיק.

Workflow בסיסי — Deploy on Push

בקש מ-Claude: "Create a GitHub Actions workflow that runs tests and deploys to Cloudflare Pages on every push to main" — ו-Claude יוצר קובץ .github/workflows/deploy.yml שלם.

ה-Pipeline הטיפוסי

Trigger (Push ל-main)
→ Install Dependencies (npm ci)
→ Run Linter (npm run lint)
→ Run Tests (npm test)
→ Build (npm run build)
→ Deploy (Wrangler/Vercel CLI)
→ Notify (Slack/Email)

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

Claude Code + GitHub Actions — שילוב כוח

יש גם GitHub Action רשמי של Anthropic — anthropics/claude-code-action@v1. אתה מגדיר אותו בפרויקט, ומרגע ש-Claude Code מזהה Pull Request חדש, הוא מריץ Code Review אוטומטי: בודק איכות קוד, מזהה בעיות אבטחה, ומציע שיפורים — ישירות כתגובה ל-PR ב-GitHub. בנוסף, אפשר לתייג @claude ב-Issue ו-Claude Code יפתח PR עם הפתרון.

GitHub Secrets — מפתחות מוצפנים

ה-Workflow צריך גישה ל-API Keys (Cloudflare Token, Vercel Token וכו'). אתה לא שם אותם בקובץ ה-YAML — אתה מוסיף אותם כ-GitHub Secrets: Repository Settings → Secrets and Variables → Actions → New Repository Secret. GitHub מצפין אותם, וה-Workflow משתמש בהם בצורה מאובטחת.

Status Badge — תג סטטוס

אפשר להוסיף Badge (תג ויזואלי) ל-README שמראה אם ה-Build האחרון הצליח או נכשל. זה נראה מקצועי ומראה שיש לך CI/CD Pipeline.

עשה עכשיו 20 דקות

הוסף GitHub Actions Pipeline לפרויקט שלך. פתח Claude Code ובקש: "Create a GitHub Actions workflow that installs dependencies, builds the project, and deploys to [Cloudflare Pages / Vercel] on every push to main. Add the API token as a GitHub secret." — Claude ייצור את קובץ ה-Workflow, יסביר מה כל שלב עושה, וידריך אותך להוסיף את ה-Secret. Push, ותבדוק בלשונית Actions ב-GitHub שהכול רץ.

טיפ

תתחיל פשוט: Deploy בלבד. אל תבנה Pipeline מורכב עם Linting, Tests, ו-Coverage מהיום הראשון. הוסף שלבים בהדרגה — כשיש לך בדיקות, הוסף npm test. כשיש לך Linter, הוסף npm run lint. אל תעשה Over-engineering ל-Pipeline.

מתחיל 15 דקות תיאוריה

12. שבע טעויות Deployment נפוצות — ואיך להימנע

אחרי שהדרכנו מאות Vibe Coders דרך הפריסה הראשונה שלהם, הנה השבע טעויות שחוזרות שוב ושוב. הכר אותן מראש — ותחסוך שעות של תסכול.

# הטעות למה זה קורה הפתרון
1 Push של .env ל-GitHub שכחת .gitignore הוסף .env* ל-.gitignore לפני ה-Commit הראשון. אם כבר עשית Push — החלף את כל המפתחות מיד.
2 Build נכשל בפלטפורמה אבל עובד מקומית Dependencies חסרים ב-package.json, או שמשתמשים ב-env var שלא הוגדר בפלטפורמה ודא ש-npm ci && npm run build עובר מקומית. הגדר כל env var גם ב-Dashboard.
3 דף 404 לכל Route חוץ מ-Homepage SPA Routing — הפלטפורמה לא יודעת שזו אפליקציית Client-Side Vercel: הוסף rewrites ב-vercel.json. Cloudflare/Netlify: הוסף _redirects עם /* /index.html 200.
4 שימוש מסחרי ב-Vercel Hobby Plan לא קראת את Terms of Service עבור ל-Cloudflare Pages (חינם, מסחרי מותר) או שדרג ל-Vercel Pro.
5 דומיין לא עובד אחרי הגדרת DNS DNS Propagation לוקח זמן (עד 48 שעות) חכה. בדוק ב-whatsmydns.net. אם זה יותר מ-48 שעות — בדוק שהרשומות נכונות.
6 Mixed Content — תמונות/סקריפטים לא נטענים משאבי HTTP באתר HTTPS בדוק DevTools Console לשגיאות Mixed Content. החלף כל http:// ל-https:// או //.
7 Push ישירות ל-main ושבירת Production דילגת על Branch + Preview הגדר Branch Protection ב-GitHub: Settings → Branches → Require PR before merge.
טיפ

בקש מ-Claude Code: "Check my project for common deployment issues before I deploy." — הוא יבדוק .gitignore, env vars, build process, ועוד — ויתריע לפני שאתה פורס.

תרגיל 1: מאפס לאוויר — פריסה מלאה

בנה ופרוס פרויקט שלם מאפס. עקוב אחרי הצעדים:

  1. פתח Claude Code ובקש: "Create a beautiful personal portfolio site with a contact form, about section, and projects gallery."
  2. צור GitHub Repo חדש ודחוף את הקוד אליו
  3. חבר את ה-Repo לפלטפורמה שבחרת (Vercel, Cloudflare, או Netlify)
  4. וודא שה-Auto-Deploy עובד — Push שינוי קטן ובדוק שהוא מופיע ב-Production
  5. בדוק את האתר ב-securityheaders.com ותקן בעיות
  6. הוסף UptimeRobot Monitor
  7. Bonus: קנה דומיין וחבר אותו

תוצאה צפויה: אתר פורטפוליו חי באינטרנט, עם Auto-Deploy, Security Headers, וניטור. הפרויקט הראשון שלך שבאמת "חי".

תרגיל 2: תהליך עדכון בטוח מא' עד ת'

תרגל את כל מחזור החיים של עדכון:

  1. צור Branch חדש: git checkout -b feature/dark-mode
  2. בקש מ-Claude: "Add a dark mode toggle to my site"
  3. Commit ו-Push ל-Branch
  4. בדוק ב-Dashboard שנוצר Preview Deployment
  5. גלוש ל-Preview URL ובדוק ש-Dark Mode עובד
  6. צור Pull Request ב-GitHub
  7. Merge ל-main
  8. בדוק ב-Production שה-Dark Mode חי
  9. תרגל Rollback: לך ל-Dashboard → Deployments → בחר את ה-Deploy הקודם → Rollback
  10. ודא שה-Rollback עבד — Dark Mode נעלם מ-Production

תוצאה צפויה: שליטה מלאה בתהליך: Branch → Preview → Merge → Production → Rollback. אתה יודע לעדכן ולחזור אחורה.

תרגיל 3: CI/CD Pipeline מלא

בנה Pipeline אוטומטי שמריץ בדיקות לפני פריסה:

  1. בקש מ-Claude: "Add a simple test suite to my project — test that the homepage loads, the contact form renders, and the navigation works."
  2. בקש מ-Claude: "Create a GitHub Actions workflow that runs these tests on every push, and deploys only if all tests pass."
  3. הוסף את ה-API Token כ-GitHub Secret
  4. Push שינוי ובדוק שה-Pipeline רץ בלשונית Actions
  5. שבור בכוונה טסט אחד (שנה טקסט שהטסט מחפש) ובדוק שה-Pipeline נכשל ולא פורס
  6. תקן את הטסט ובדוק שהפריסה מתבצעת

תוצאה צפויה: Pipeline שמגן עליך — קוד שבור לא מגיע לייצור. מקצועי. בטוח. אוטומטי.

שגרת Deployment — מה לעשות ומתי

בנוסף לשגרת העבודה מפרקים קודמים (Git commits, בדיקות מובייל, ניהול APIs), הוסיפו את המשימות הבאות:

מתי מה לעשות זמן
כל יום (בוקר) בדוק UptimeRobot — הכול ירוק? מצוין. בדוק Sentry — יש שגיאות חדשות? תקן. 3 דקות
כל עדכון Branch → Preview → בדוק → Merge. לעולם לא ישירות ל-main. 10-30 דקות
פעם בשבוע בדוק Analytics — מי מבקר? מאיפה? מה פופולרי? בדוק ביצועים ב-Lighthouse. 15 דקות
פעם בחודש בדוק Security Headers (securityheaders.com). עדכן Dependencies (npm update). בדוק שה-SSL Certificate תקף. 30 דקות
כל רבעון סקור את תשתית ה-Deployment: האם הפלטפורמה עדיין מתאימה? האם ה-Free Tier מספיק? נקה Preview Deployments ישנים. רענן API Keys. 60 דקות
אם אתם עושים רק דבר אחד מהפרק הזה 15 דקות

פרוס את הפרויקט שלך. עכשיו. לא מחר, לא "כשזה יהיה מושלם", לא "כשאסיים את הפיצ'ר הבא." עכשיו. פתח Claude Code, הקלד "Deploy my project to Vercel" (או Cloudflare Pages, או Netlify), ותן לו לרוץ. תוך דקה יש לך URL חי שאתה יכול לשלוח לכל אחד. הפרויקט שלך לא מושלם? לא משנה. אף פרויקט לא מושלם. אבל פרויקט שחי באינטרנט שווה אלף פרויקטים שנמצאים רק על המחשב שלך. Ship it.

בדוק את עצמך — 5 שאלות

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

  1. מה ההבדל בין Static Site ל-Dynamic App מבחינת Deployment? (רמז: סטטי = HTML/CSS/JS בלבד, דינמי = צריך שרת/functions)
  2. באיזו פלטפורמה הכי כדאי לפרוס פרויקט Next.js, ולמה? (רמז: Vercel — הם בנו את Next.js)
  3. למה אסור לשים API Keys בתוך הקוד, ומה עושים אם בטעות כבר עשיתם Push של סוד? (רמז: בוטים סורקים GitHub. מחליפים את המפתח מיד.)
  4. מהם שלושת הצעדים של The Safe Update Flow? (רמז: Branch → Preview → Merge)
  5. מה ההבדל בין Cloudflare Pages ל-Vercel מבחינת שימוש מסחרי? (רמז: Cloudflare מאפשר, Vercel Free Tier — לא)

צ'קליסט — סיכום פרק 8

סיכום פרק 8

הפרק הזה לקח אותך מ"זה עובד על המחשב שלי" ל"זה חי באינטרנט עם דומיין, HTTPS, וניטור." גילית שפריסה ב-2026 היא פעולה של 30 שניות, לא שעות של קונפיגורציית שרתים — ושהבחירה בין Cloudflare Pages, Vercel, ו-Netlify תלויה בעיקר בסוג הפרויקט ובשימוש מסחרי. למדת שהדבר הכי מסוכן ב-Deployment הוא לא הטכנולוגיה אלא ההרגלים — Push של סודות ל-GitHub, דילוג על Preview Deployments, או שכחת ניטור. התובנה המרכזית: Deployment הוא לא אירוע חד-פעמי אלא תהליך מתמשך — Branch, Preview, Merge, Monitor, Repeat. בפרק הבא נעבור ל-Voice Mode, שליטה מרחוק, ותזרימי עבודה מודרניים.