פרסום React SPA

פרסמו את
אפליקציית React

העלו build לפרסום מ-Vite, Create React App או React SPA אחרת, ופרסמו אותו עם נתיבים שלא נשברים ברענון, HTTPS, מסירה מהירה ודומיינים מותאמים אישית כשצריך.

ראו את התהליך
package.json
"name": "my-react-app",
"scripts": {
"build": "vite build"
},
"dependencies": {
"react": "^18.2.0"
"react-dom": "^18.2.0"
}
פרויקט React זוהה

העלו את פלט ה-build, לא את פרויקט המקור

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

Vite React

npm run build
output: dist/

ברירת המחדל של הפלט הסטטי של Vite היא dist. אם vite.config.js משנה build.outDir או base, פרסמו את תיקיית הפלט ובדקו כתובות נכסים אחרי ההעלאה.

Create React App

npm run build
output: build/

CRA כותב קובצי פרסום ל-build. אם האפליקציה מוגשת מנתיב משנה, הגדרת homepage יכולה להשפיע על כתובות הנכסים שנוצרו.

אפליקציות React SPA אחרות

פקודת ה-build שלכם
output: תיקיית פלט סטטי

כל הגדרת React יכולה לעבוד כאשר היא מייצרת index.html, חבילות JavaScript, CSS, תמונות, פונטים ונכסים שניתן להגיש כקבצים סטטיים.

מדוע אפליקציות React נשברות אחרי פרסום

React SPA עדיין מתחיל במסמך אחד

רוב אפליקציות React מסוג single-page מספקות נקודת כניסה אחת של HTML, ואז נותנות ל-router בצד הלקוח להחליט מה לרנדר לאחר טעינת JavaScript.

זה עובד באופן מקומי כי שרת הפיתוח יודע איך לחזור ל-index.html. שרת סטטי בסיסי עשוי שלא, וזו הסיבה ש-/dashboard יכול לעבוד במהלך הניווט אבל להחזיר 404 לאחר רענון.

מה נשבר ברענון

שרת קבצים סטטי מקבל GET /settings ומחפש קובץ או תיקייה אמיתיים בשם settings.

ה-build של React בדרך כלל כולל index.html ונכסים עם hash בשם הקובץ, כך שהשרת מחזיר 404 לפני שלנתב React יש הזדמנות לקרוא את כתובת האתר.

GET /settings 404 (Not Found)התנהגות אופיינית של הגשה סטטית בסיסית

כיצד DeployPages מתקן את זה

DeployPages מחיל SPA fallback עבור נתיבי מסמכים חסרים ומגיש index.html במקום 404 קשיח.

ברגע שהמסמך נטען, React עולה, הנתב קורא את ה-URL הנוכחי והמסך הנכון מוצג בלי שתצטרכו לנהל קובצי redirect.

למה צוותים משתמשים בזה

העלו את תיקיית dist או build. ניתוב fallback, HTTPS, דחיסה ומסירה מהירה הם חלק מהפרסום במקום צ׳קליסט שבונים מחדש לכל אפליקציית React קטנה.

בדיקות פרסום לאפליקציות React

האפליקציה יכולה להיבנות ועדיין להיכשל באינטרנט. בדקו את אלה לפני שליחת הקישור.

נתיב בסיס לנכסים

אם JavaScript או CSS נטענים מה-URL הלא נכון, הדף עלול להפוך לריק. הגדרות base של Vite ו-homepage של CRA הן המקומות הרגילים לבדיקה.

Client-side routes

בדקו ביקורים ישירים ורענון עבור מסלולים חשובים כמו /login, /pricing, /dashboard וכל קישור עומק משותף.

נקודות קצה של API

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

משתני סביבה

רוב כלי הבנייה של React מכניסים ערכי סביבה ציבוריים ל-bundle בזמן ה-build. שינוי משתנה לאחר העלאה מצריך בדרך כלל build מחדש.

תהליך פרסום React

1

בונים את האפליקציה

הריצו build מקומית, כך ש-React, CSS והנכסים ייארזו בתיקייה סטטית שניתן לפרסם.

npm run build
Produces a static output folder you can deploy directly.
2

מאמתים את הפלט

בדקו שתיקיית הפלט מכילה index.html ונכסים שנוצרו. ב-Vite זו בדרך כלל dist; ב-Create React App זו בדרך כלל build.

Expected output:
dist/
├── index.html
└── assets/
3

מעלים את כל התיקייה

שחררו את כל תיקיית dist אל DeployPages. אל תעלו רק index.html, אחרת יחסרו סגנונות וסקריפטים.

4

בודקים route פנימי

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

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

בעיות פרסום נפוצות של React

Debug 01

מסך לבן לאחר פרסום

פתחו את DevTools ובדקו קודם קובצי JS או CSS חסרים. נתיבי בסיס שגויים, נכסים חסרים או העלאת תיקייה שגויה גורמים להרבה מסכים לבנים.

Debug 02

רענון מחזיר 404 במסלולים מקוננים

ההגשה הסטטית מנסה למצוא קובץ אמיתי עבור המסלול. השתמשו ב-SPA fallback כך שנתיבי מסמכים חסרים יחזירו index.html.

Debug 03

נכסים עובדים מקומית אך לא באתר שפורסם

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

Debug 04

שינויים במשתנה הסביבה אינם מופיעים

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

שאלות נפוצות על פרסום React

Q:מדוע אפליקציית React שלי מציגה מסך לבן לאחר הפרסום?

רוב בעיות המסך הלבן נובעות מנתיבי נכסים שגויים או מחבילות חסרות. עבור Vite, ודאו שה-base נכון ליעד הפרסום. עבור CRA, בדקו את homepage וודאו שהתיקייה שהועלתה מכילה את הנכסים שנוצרו.

Q:האם אני צריך להגדיר nginx או הפניות מחדש באופן ידני?

לא. DeployPages מטפל ב-SPA fallback למסלולים חסרים בשכבת ההגשה, כך שאין צורך לנהל שכתובים של שרת בעצמכם.

Q:האם עלי להעלות את תיקיית הפרויקט או את תיקיית dist?

העלו את תיקיית פלט ה-build, לא את פרויקט המקור. עבור Vite זו בדרך כלל dist. עבור Create React App זו בדרך כלל build.

Q:האם אני יכול להשתמש במשתני סביבה?

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

Q:האם אפליקציית React יכולה לקרוא ל-API לאחר הפרסום?

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

Q:האם אני יכול לפרסם את Next.js גם כאן?

כן, אם מייצאים אותו כאתר סטטי. השתמשו ב-`output: export` והעלו את הספרייה שנוצרה. נתיבי Next.js שמרונדרים בשרת צריכים runtime מעבר לפרסום סטטי.

Q:האם אוכל לצרף דומיין מותאם אישית מאוחר יותר?

כן. לאחר שהאתר פעיל, הוסיפו את הדומיין בלוח הבקרה ופעלו לפי הוראות ה-DNS. DeployPages מפעיל HTTPS באופן אוטומטי לאחר שהרשומה נפתרת.