🎯 מטרות הלמידה

• נבין מדוע npm start אינו מתאים לסביבת Production
• נלמד כיצד לבנות Production Bundle לאפליקציית React מתוך קונטיינר
• נכתוב Dockerfile רב-שלבי הכולל שלב בנייה ושלב הגשה
• נבין כיצד מעבירים קבצים סטטיים בין שלבים ב-Multi-Stage Build
• נריץ את האפליקציה כאתר סטטי מוגש על ידי NGINX

חלק 1: הכנת אפליקציית React

הסבר

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

פעולות

1. צרו אפליקציית React חדשה עם TypeScript template — חפשו כיצד ליצור פרויקט create-react-app עם תבנית זו
2. היכנסו לתיקיית הפרויקט שנוצרה והתקינו את התלויות
3. הריצו את אפליקציית הפיתוח המקומית כדי לוודא שהיא עובדת
4. ערכו שינוי קטן בקובץ App.tsx (למשל שינוי טקסט כלשהו) ושמרו — שימו לב להתנהגות הדפדפן

מה מתרחש

• אפליקציית הפיתוח רצה על שרת מקומי (לרוב פורט 3000)
• כל שינוי בקוד מתעדכן מיידית בדפדפן — תהליך זה נקרא Hot Reloading
• השרת שרץ מאחורי הקלעים הוא Webpack Dev Server

נקודות מפתח