העלאת האתר לאוויר ב-Vercel

עד עכשיו האתר שלכם רץ רק על המחשב שלכם, ב-localhost:3000. בפרק הזה הוא יקבל כתובת אמיתית באינטרנט, שאפשר לשלוח לכל המשפחה בוואטסאפ.

נשתמש ב-Vercel, שירות אחסון שנבנה על ידי החברה שמפתחת את Next.js. החלק הכי יפה: אחרי חיבור חד-פעמי ל-GitHub, כל דחיפה ל-main מעדכנת את האתר לבד, בלי ללחוץ על שום כפתור.

איך זה עובד: הזרימה

לפני שמתחילים ללחוץ, כדאי להבין את התמונה הגדולה:

שימו לב לשורה 5: העלאה שנכשלה לא שוברת את האתר. הגולשים ממשיכים לראות את הגרסה האחרונה שעבדה.

Vercel מבחין בין שני סוגי העלאות:

זה מתחבר בדיוק לזרימת העבודה מפרק 8: ענף ← Pull Request ← תצוגה מקדימה ב-Vercel ← מיזוג ← האתר מתעדכן.

שלב 0: בדיקה לפני העלאה

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

שלב 1: מחברים את GitHub ל-Vercel

1.1 פותחים חשבון

1. היכנסו ל-vercel.com ולחצו Sign Up.
2. בחרו בתוכנית Hobby, התוכנית החינמית.
3. בחרו Continue with GitHub והתחברו עם חשבון ה-GitHub שלכם. כך Vercel יוכל לגשת למאגרים שלכם.

1.2 מייבאים את הפרויקט

1. בלוח הבקרה של Vercel, לחצו Add New... ← Project.
2. תחת Import Git Repository תופיע רשימת המאגרים שלכם מ-GitHub. מצאו את grandma-recipes ולחצו Import.
3. המאגר לא מופיע? לחצו על הקישור להגדרת הגישה ל-GitHub (בנוסח Adjust GitHub App Permissions), ובחלון של GitHub אשרו ל-Vercel גישה למאגר הזה.

1.3 מסך ההגדרות

אחרי ה-Import מופיע מסך Configure Project. ברוב הפרויקטים לא צריך לשנות בו כלום:

לחצו Deploy.

1.4 ההעלאה הראשונה

Vercel יתחיל לבנות, ותראו את יומן הבנייה (Build Logs) רץ בזמן אמת. הוא נראה בדיוק כמו מה שראיתם כשהרצתם npm run build אצלכם:

Cloning github.com/your-username/grandma-recipes (Branch: main)
Running "npm install"
added 312 packages in 14s
Running "npm run build"
   ▲ Next.js 15.5.4
 ✓ Compiled successfully
 ✓ Generating static pages (11/11)
Build Completed in /vercel/output [42s]
Deploying outputs...
Deployment completed

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

https://grandma-recipes.vercel.app

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

1.5 מבחן ההעלאה האוטומטית

עכשיו החלק המגניב. חזרו ל-Claude Code ובקשו שינוי קטן:

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

שלב 2: משתני סביבה והגדרות בנייה

מה זה משתני סביבה?

משתני סביבה (Environment Variables) הם הגדרות שהקוד צריך, אבל שלא שומרים בתוך הקוד עצמו. בעיקר מדובר בדברים סודיים, כמו מפתח API או סיסמה למסד נתונים, ובדברים ששונים בין סביבות, כמו כתובת האתר.

במחשב שלכם הם נמצאים בקובץ בשם .env.local, שלא עולה ל-GitHub, כי הוא ב-.gitignore:

SITE_NAME="המתכונים של סבתא"
CONTACT_EMAIL="family@example.com"
NEXT_PUBLIC_SITE_URL="http://localhost:3000"

כיוון שהקובץ הזה לא מגיע ל-GitHub, גם Vercel לא רואה אותו. לכן צריך להגדיר את המשתנים גם ב-Vercel.

מוסיפים משתנים ב-Vercel

1. בלוח הבקרה של הפרויקט, לחצו Settings ← Environment Variables.
2. הזינו את שם המשתנה (Key) ואת הערך שלו (Value).
3. בחרו לאילו סביבות הוא שייך:
   • Production: האתר הראשי.
   • Preview: תצוגות מקדימות של ענפים ו-PR.
   • Development: למי שמושך את המשתנים למחשב עם כלי שורת הפקודה של Vercel.
4. לחצו Save.
5. חשוב: משתנים חדשים חלים רק על העלאות חדשות. כדי שהאתר הנוכחי יכיר אותם, היכנסו ל-Deployments, לחצו על שלוש הנקודות (...) ליד ההעלאה האחרונה, ובחרו Redeploy.

Claude יכול לעזור לסדר את זה:

הגדרות בנייה

ברוב הפרויקטים Vercel מזהה הכול לבד. אם בכל זאת צריך לשנות, ההגדרות נמצאות ב-Settings ← Build and Deployment (בממשקים ישנים יותר: General):

שלב 3: דומיין משלכם

grandma-recipes.vercel.app עובד מצוין, אבל grandma-recipes.co.il נראה הרבה יותר טוב. הנה איך מחברים.

3.1 קונים דומיין

דומיין קונים אצל רשם דומיינים (Registrar). יש הרבה: חברות ישראליות שמוכרות סיומות .co.il, רשמים בינלאומיים לסיומות כמו .com, וגם Vercel עצמו מוכר דומיינים. מחיר שנתי של דומיין נע בדרך כלל בין עשרות למאות שקלים, תלוי בסיומת.

3.2 מוסיפים את הדומיין ב-Vercel

1. בפרויקט, היכנסו ל-Settings ← Domains.
2. לחצו Add Domain, הקלידו את הדומיין (למשל grandma-recipes.co.il) ולחצו Add.
3. Vercel ישאל איך לטפל בגרסה עם www. ההמלצה: להוסיף את שתיהן, ולהפנות אחת לשנייה, כך ששתי הכתובות יעבדו.
4. Vercel יציג רשומות DNS שצריך להגדיר אצל הרשם, עם סימן אזהרה עד שהן יוגדרו.

3.3 מגדירים DNS אצל הרשם

DNS הוא ה"ספר טלפונים" של האינטרנט: הוא אומר לדפדפנים לאן ללכת כשמישהו מקליד את הדומיין שלכם. צריך להוסיף אצל הרשם שתי רשומות, לפי מה ש-Vercel מציג:

3.4 מחכים, ובודקים

• שינויי DNS לוקחים בדרך כלל כמה דקות עד כמה שעות, ובמקרים נדירים עד 48 שעות.
• כשהכול מוגדר נכון, הסימן ליד הדומיין ב-Vercel יהפוך ל-V ירוק (Valid Configuration).
• Vercel מנפיק תעודת אבטחה (HTTPS) לבד ובחינם. המנעול בשורת הכתובת יופיע בלי שתעשו כלום.

שלב 4: בודקים את האתר באוויר

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

הבדיקה הידנית

יומנים ב-Vercel

אם משהו לא עובד באוויר, Vercel מספק שני סוגי יומנים:

Claude כבודק של האתר החי

שלב 5: כשההעלאה נכשלת

זה יקרה מתישהו, ואין סיבה ללחוץ: האתר שבאוויר לא נפגע. Vercel פשוט לא מחליף אותו בגרסה השבורה.

מוצאים את השגיאה

1. בלשונית Deployments, ההעלאה שנכשלה מסומנת באדום, עם המילה Error.
2. לחצו עליה ופתחו את Build Logs.
3. גללו לשורות האדומות, בדרך כלל לקראת הסוף, והעתיקו את כל השגיאה.
4. הדביקו ל-Claude, בדיוק כמו בפרק 7:

"אבל אצלי זה עובד!": החשודים הקבועים

האתר שבור באוויר? חוזרים אחורה בשנייה

לפעמים ההעלאה מצליחה, אבל משהו באתר לא עובד כמו שצריך. במקרה כזה לא צריך לחכות לתיקון:

1. היכנסו ל-Deployments.
2. מצאו את ההעלאה האחרונה שעבדה טוב.
3. לחצו על שלוש הנקודות (...) ובחרו Instant Rollback (או Promote to Production, תלוי בממשק ובתוכנית).

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

למתקדמים: Vercel מהטרמינל

ל-Vercel יש גם כלי שורת פקודה, שמאפשר ל-Claude לעבוד מול Vercel ישירות. הוא לא חובה, כי זרימת ה-Git שבנינו מספיקה, אבל הוא נוח למשתני סביבה ולבדיקת העלאות:

npm install -g vercel
vercel login

vercel link          # מקשר את התיקייה לפרויקט ב-Vercel
vercel env pull      # מוריד את משתני הסביבה לקובץ .env.local
vercel ls            # מציג את ההעלאות האחרונות

סיכום

• חיבור חד-פעמי: Vercel ← Import ← מאגר מ-GitHub ← Deploy. מאז, כל דחיפה ל-main מעדכנת את האתר, וכל ענף או PR מקבל כתובת Preview.
• משתני סביבה מגדירים ב-Settings ← Environment Variables, לסביבות הנכונות, ואחר כך עושים Redeploy. סודות אף פעם לא ב-NEXT_PUBLIC_.
• דומיין: Settings ← Domains, ואז רשומות DNS אצל הרשם בדיוק כמו ש-Vercel מציג. HTTPS מגיע לבד.
• בדיקה באוויר: רשימת בדיקה ידנית, Build Logs ו-Runtime Logs.
• כשנכשל: האתר הקודם נשאר באוויר. מעתיקים את השגיאה מ-Build Logs ל-Claude, ובודקים את החשודים הקבועים. כשהאתר באוויר שבור: Instant Rollback, ואז תיקון ב-Git.

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

בדקו את עצמכם