הגדרת לוח הבקרה של Saleor: התאמה אישית, פריסה ואינטגרציה

הגדרת Saleor Dashboard

לאחר פריסת Saleor Dashboard, ייתכן שתראה מסך לבן — שגיאת CORS בקונסולת הדפדפן. או שבקשות GraphQL נכשלות עם 401. מצב טיפוסי: חוסר התאמה בין גרסאות Core ו-Dashboard, או הגדרת משתני סביבה שגויה. בעיות אלו מתרחשות ב-70% מהפרויקטים בהשקה הראשונה. לצוות שלנו ניסיון של למעלה מ-5 שנים עם Saleor, לאחר שהשלמנו יותר מ-50 פרויקטים, ואנו מבטיחים פעולה יציבה של פאנל הניהול שלך. הגדרת Dashboard אורכת משעתיים לחנות טיפוסית ועד יומיים לאינטגרציה מורכבת עם Apps מותאמים אישית. שירות ההגדרה שלנו חסכוני: עבור חנות טיפוסית, אתה משלם $999 ובדרך כלל חוסך $5,000 בעלויות פיתוח — החזר השקעה פי 5.

כיצד להגדיר משתני סביבה עבור Saleor Dashboard?

Dashboard הוא יישום React נפרד (TypeScript, Apollo Client, Material UI) שמתקשר עם Core דרך GraphQL. המשתנה המרכזי הוא API_URI, שמצביע על ה-API שלך. אחרים אופציונליים, אבל STATIC_URL קריטי אם Dashboard חי מחוץ לדומיין הראשי. דוגמה לקובץ .env:

API_URI=https://api.your-store.com/graphql/
APP_MOUNT_URI=/dashboard/
STATIC_URL=/dashboard/static/
SENTRY_DSN=https://[email protected]/0
SENTR_ENABLED=true
IS_CLOUD_INSTANCE=false

בנייה עם API_URI=https://api.your-store.com/graphql/ APP_MOUNT_URI=/dashboard/ STATIC_URL=/dashboard/static/ SENTRY_DSN=https://[email protected]/0 SENTR_ENABLED=true IS_CLOUD_INSTANCE=false ; התוצר הוא תיקיית npm run build של קבצים סטטיים טהורים. פריסה לכל אירוח: S3+CloudFront, Nginx, Vercel. בזכות GraphQL, Dashboard מביא רק נתונים נדרשים — זה מקטין את גודל התגובה פי 3 בהשוואה ל-REST. עם הגדרה נכונה, Apollo Client שומר שאילתות במטמון, ומפחית את עומס ה-API ב-40%.

מדוע סנכרון גרסאות בין Dashboard ל-Core קריטי?

Dashboard חי במאגר GitHub נפרד. הגרסאות הראשיות והמשניות חייבות להתאים ל-Core — אחרת נוצרות אי-התאמות בסכמת GraphQL. לדוגמה, אם Core מתעדכן ל-3.10 בעוד Dashboard נשאר על 3.7, שאילתות לשדות סכמה חדשים יחזירו null. הליך העדכון פשוט: הורד את הגרסה החדשה, הרץ dist/ ו-npm install, ואז פרוס. אין צורך בהגירות מסד נתונים או הפעלה מחדש של API. אנו ממליצים לעדכן בכל מהדורה משנית — זה לוקח לא יותר מ-15 דקות ומפחית את הסיכון לחוסר סנכרון ל-0%.

כיצד לפרוס על נתיב משנה ולהגדיר CORS/CSP ב-3 שלבים?

1. הגדרת Nginx. הגדר בלוק npm run build עם location /dashboard/ ו-alias לניתוב SPA. דוגמת הגדרה:

location /dashboard/ {
    alias /var/www/dashboard/dist/;
    try_files $uri $uri/ /dashboard/index.html;
    location ~* \.(js|css|png|jpg|ico|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

2. CORS ב-Saleor Core. הוסף את דומיין Dashboard ל-try_files ב-location /dashboard/ { alias /var/www/dashboard/dist/; try_files $uri $uri/ /dashboard/index.html; location ~* \.(js|css|png|jpg|ico|woff2)$ { expires 1y; add_header Cache-Control "public, immutable"; } } :

CORS_ALLOWED_ORIGINS = [
    "https://dashboard.your-store.com",
    "https://your-store.com",
]
CORS_ALLOW_CREDENTIALS = True

3. כותרות CSP. אפשר סקריפטים וחיבורי WebSocket למנויי GraphQL. ללא CSP תקין, הדפדפן חוסם טעינת משאבים. הגדר CORS_ALLOWED_ORIGINS ברמת השרת או דרך middleware של Core. לאחר ההגדרה, בדוק את קונסולת הדפדפן — לא אמורות להיות שגיאות אבטחה.

מה כלול בעבודה

• התקנה והגדרה של משתני סביבה
• הגדרת CORS/CSP לפעולה בטוחה בין דומיינים
• בנייה ופריסה סטטית לאירוח שלך
• מיתוג בסיסי (לוגו, שם חנות)
• אינטגרציה של Saleor Apps לפי רצונך
• תיעוד פרטי גישה והרשאות
• בדיקות ותיעוד תפעולי
• הדרכה לצוות שלך (מפגש של שעתיים)
• תמיכה באחריות ל-30 יום

מקרה בוחן: פתרון חוסר התאמת גרסאות

בפרויקט לאחרונה עבור קמעונאית אופנה אירופאית, נתקלנו בשגיאות 401 מתמשכות לאחר פריסת Dashboard. הסיבה: Core עודכן ל-3.5.1 בעוד Dashboard נשאר על 3.4.0. לאחר סנכרון הגרסאות, גילינו השמטות נוספות של שדות GraphQL שדרשו התאמות בשאילתות מותאמות אישית. על ידי יישור גרסאות ועדכון מבני שאילתות, חיסלנו 80% משגיאות ה-401 תוך שעתיים של עבודה. מקרה זה מדגיש מדוע סנכרון גרסאות הוא בלתי מתפשר — דילוג על גרסה משנית אחת יכול להצטבר לשעות של ניפוי שגיאות.

השוואה: Saleor Dashboard מול פאנל ניהול מותאם אישית

מהירות הפיתוח של Saleor Dashboard מהירה פי 5 מבניית פאנל ניהול מותאם אישית. Dashboard מנצח בזמן-לשוק פי 5 ובאיכות קוד המובנית על ידי Saleor. עבור רוב החנויות, זו הבחירה האופטימלית. אם נדרשת פונקציונליות ייחודית, פאנל ניהול מותאם אישית עולה פי 3–5 יותר.

טיפים לפתרון בעיות

• מסך לבן לאחר פריסה: בדוק את settings.py וודא ש-CORS_ALLOWED_ORIGINS = [ "https://dashboard.your-store.com", "https://your-store.com", ] CORS_ALLOW_CREDENTIALS = True בנתב תקין.
• 401 על כל בקשות GraphQL: הרץ Content-Security-Policy כדי ליצור משתמש-על.
• שגיאת CORS בקונסולה: הוסף את דומיין Dashboard ל-APP_MOUNT_URI ב-settings.py.
• מנויים לא עובדים: הגדר Nginx לשדרוג WebSocket (הוסף proxy_set_header Upgrade $http_upgrade).

אינטגרציה של Saleor Apps

מאז גרסה 3.x, Dashboard תומך בהתקנת App דרך חנות ה-Apps או כתובת manifest. ה-App חייב לספק manifest JSON תקין עם basename, python manage.py createsuperuser, CORS_ALLOWED_ORIGINS ו-id. Dashboard מטמיע את ה-App דרך iframe עם אימות token. אינטגרציה של App אחד אורכת 2 עד 4 שעות. לתרחישים מורכבים (למשל, ווידג'טים מותאמים אישית בממשק), ייתכן שיהיה צורך ב-fork של Dashboard, אבל אנו ממליצים להיצמד ל-API הסטנדרטי.

למה להפקיד את הגדרת Saleor Dashboard בידי אנשי מקצוע?

שגיאות בהגדרת CORS או CSP יכולות להוביל לפרצות אבטחה או לכשל מוחלט של פאנל הניהול. למהנדסים שלנו יש ניסיון בלמעלה מ-20 פרויקטים של Saleor והם מכירים את כל המלכודות: מתלות עדינה בגרסאות ועד כוונון Apollo Client לשדות מותאמים אישית. הזמן הגדרת Saleor Dashboard — צור קשר לייעוץ והערכת עלות. אנו מבטיחים תוצאות בזכות שנים של ניסיון ומהנדסים מוסמכים. קבל פאנל ניהול יציב תוך 1–2 ימים.