דיפלוימנט לאתר ריאקט - מדריך בסיס

בניתם פרויקט ריאקט, הוא עובד מצוין על המחשב שלכם עם npm run dev, ועכשיו השאלה הבאה - איך שמים אותו באינטרנט כדי שאנשים אחרים יוכלו לגשת אליו? זה נקרא דיפלוימנט (deployment), וזה פשוט הרבה יותר ממה שרוב המתחילים חושבים.

מה קורה בתהליך build

כשמריצים npm run dev, מקבלים שרת פיתוח שרץ על המחשב שלכם בלבד, עם כלים נוחים לפיתוח כמו הודעות שגיאה מפורטות וטעינה חמה (hot reload). זה לא מה שמעלים לאינטרנט. לפני דיפלוימנט, מריצים פקודת build:

npm run build

הפקודה הזאת לוקחת את כל קוד ה-JSX והטייפסקריפט שלכם, ומייצרת תיקייה (בדרך כלל בשם dist או build) עם קבצי HTML, CSS ו-JavaScript "רגילים" שכל דפדפן יכול להריץ, בלי צורך בריאקט או Node בכלל בזמן ריצה. תהליך הבנייה גם ממזער (minify) את הקוד - מקצר שמות משתנים ומסיר רווחים מיותרים - כדי שהקבצים יהיו קטנים יותר וייטענו מהר יותר אצל המשתמשים.

אתר ריאקט "רגיל" הוא בעצם אתר סטטי

זו הנקודה שהכי מפתיעה מתחילים - אחרי ה-build, אפליקציית ריאקט טיפוסית (בלי Next.js או פריימוורק עם רינדור בצד שרת) היא בעצם רק קבצים סטטיים - HTML, CSS, JavaScript. היא לא צריכה שרת שמריץ קוד; היא רק צריכה מקום שיודע להגיש קבצים סטטיים לדפדפן. זה משנה לגמרי איך חושבים על אחסון - לא צריך שרת מלא עם Node.js מותקן, מספיק אחסון סטטי.

אפשרויות אחסון פופולריות

• Vercel - הפלטפורמה שנוצרה על ידי החברה שמפתחת את Next.js, נוחה במיוחד ומחוברת ישירות ל-GitHub - כל push לענף הראשי מפרסם גרסה חדשה אוטומטית.
• Netlify - דומה מאוד ל-Vercel בתפיסה, גם היא מתחברת ל-GitHub ובונה ומפרסמת אוטומטית.
• GitHub Pages - אפשרות חינמית מובנית בגיטהאב, פשוטה יותר אבל עם פחות תכונות מתקדמות.

שלושתן עובדות בערך באותה שיטה - מחברים את הריפוזיטורי מ-GitHub, הפלטפורמה מריצה npm run build בעצמה בכל פעם שיש שינוי, ומפרסמת את התוצאה.

דיפלוימנט בסיסי עם Vercel - השלבים

1. דוחפים (push) את הקוד לריפוזיטורי ב-GitHub.
2. נכנסים ל-Vercel ומחברים את חשבון ה-GitHub.
3. בוחרים את הריפוזיטורי, ו-Vercel מזהה אוטומטית שזה פרויקט ריאקט ומגדיר את פקודת ה-build המתאימה.
4. לוחצים דיפלוי, וממתינים דקה-שתיים.
5. מקבלים כתובת URL ציבורית שהאתר זמין בה.

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

משתני סביבה - לא לחשוף מפתחות סודיים

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

# .env
VITE_API_URL=https://api.example.com

בפלטפורמות כמו Vercel, מוסיפים את משתני הסביבה דרך ממשק הניהול, לא בקובץ שמועלה ל-Git.

בעיית הראוטינג באחסון סטטי

טעות נפוצה שגורמת לתקלה מבלבלת - אתר ריאקט עם react-router עובד מצוין כשמנווטים דרך קישורים בתוך האפליקציה, אבל אם מישהו מרענן ישירות בכתובת כמו /products/5, מקבלים שגיאת 404. זה קורה כי אחסון סטטי "רגיל" מחפש קובץ פיזי בשם products/5, שלא קיים - כל הניתוב קורה בג'אווהסקריפט בצד הלקוח, לא בקבצים אמיתיים. הפתרון הוא להגדיר בפלטפורמת האחסון שכל כתובת שלא נמצאה כקובץ אמיתי תוגש עם index.html, וריאקט ראוטר יטפל בניתוב בעצמו מהצד של הדפדפן. Vercel ו-Netlify עושים את זה אוטומטית לפרויקטי ריאקט, אבל שווה לדעת שזו הסיבה מאחורי הקלעים.

למה זה שווה להבין, לא רק "ללחוץ דיפלוי"

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

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

לסיכום

npm run build הופך פרויקט ריאקט לקבצים סטטיים שכל אחסון יכול להגיש, בלי צורך בשרת Node מלא. Vercel ו-Netlify הן האפשרויות הפופולריות ביותר, עם דיפלוי אוטומטי בכל push לגיטהאב. חשוב לזכור שמשתני סביבה בצד לקוח הם ציבוריים, ולטפל בבעיית הראוטינג באחסון סטטי כדי שרענון עמוד לא ישבור את האתר.

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

הצטרפו לקהילה בדיסקורד