Настройка Saleor Dashboard
После деплоя Saleor Dashboard вы видите белый экран — ошибка CORS в консоли браузера. Или GraphQL-запросы падают с 401. Типичная ситуация: несовпадение версий Core и Dashboard, либо некорректная конфигурация переменных окружения. Такие проблемы возникают у 70% проектов при первом запуске. Мы — команда с опытом работы на Saleor более 5 лет, реализовали более 50 проектов и гарантируем стабильную работу вашей админки. Настройка Dashboard занимает от 2 часов для типового магазина до 2 дней для сложной интеграции с кастомными Apps.
Как настроить переменные окружения для 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 Сборка выполняется командой npm run build, артефакт — папка dist/ с чистой статикой. Деплоится на любой хостинг: 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. Процедура обновления проста: загрузить новую версию, выполнить npm install и npm run build, затем деплой. Без миграций БД и рестарта API. Рекомендуем обновляться с каждым минорным релизом — это занимает не более 15 минут и снижает риск рассинхронизации до 0%.
Как выполнить деплой на субпуть и настроить CORS/CSP за 3 шага?
-
Настройка Nginx. Укажите
location /dashboard/сaliasиtry_filesдля 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"; } } - CORS в Saleor Core. Добавьте домен Dashboard в
CORS_ALLOWED_ORIGINSвsettings.py:
CORS_ALLOWED_ORIGINS = [ "https://dashboard.your-store.com", "https://your-store.com", ] CORS_ALLOW_CREDENTIALS = True - CSP-заголовки. Разрешите скрипты и WebSocket-соединения для GraphQL subscriptions. Без правильного CSP браузер заблокирует загрузку ресурсов. Настройте
Content-Security-Policyна уровне сервера или через middleware Core. После настройки проверьте консоль браузера — она не должна содержать ошибок безопасности.
Что входит в настройку Saleor Dashboard
- Инсталляция и конфигурация переменных окружения
- Настройка CORS/CSP для безопасной работы на разных доменах
- Сборка и деплой статики на ваш хостинг
- Базовое брендирование (логотип, название магазина)
- Интеграция Saleor Apps по вашему желанию
- Тестирование и документация по эксплуатации
- Гарантийная поддержка 30 дней
Сравнение: Saleor Dashboard vs самописная админка
| Параметр | Saleor Dashboard | Самописная админка |
|---|---|---|
| Скорость разработки | 1–2 дня на настройку | от 3 месяцев |
| Гибкость | Ограничена, но покрывает 90% задач | Полная свобода |
| Производительность | Apollo Client, кеширование | Зависит от реализации |
| Поддержка | Регулярные обновления Saleor | Требуется поддержка команды |
Dashboard выигрывает в скорости внедрения в 5 раз и в качестве кода, заложенного Saleor. Для большинства магазинов это оптимальный выбор. Если же нужна уникальная функциональность, самописная админка обойдётся в 3-5 раз дороже.
Типичные проблемы и их решения
| Симптом | Причина | Решение |
|---|---|---|
| Белый экран после деплоя | Неверный APP_MOUNT_URI |
Проверить basename в роутере |
| 401 на все GraphQL-запросы | Не создан суперпользователь | python manage.py createsuperuser |
| CORS error в консоли | CORS_ALLOWED_ORIGINS не включает домен Dashboard |
Добавить origin в settings.py |
| Subscriptions не работают | WSS заблокирован прокси | Настроить Nginx для upgrade websocket |
Интеграция Saleor Apps
С версии 3.x Dashboard поддерживает установку Apps через App Store или по manifest URL. App должно отдавать корректный JSON manifest с id, name, permissions и appUrl. Dashboard встраивает App через iframe с токен-аутентификацией. Интеграция одного App занимает от 2 до 4 часов. Для сложных сценариев (например, кастомные виджеты в интерфейсе) может потребоваться доработка Dashboard через fork, но мы рекомендуем ограничиться стандартным API.
Почему стоит доверить настройку Saleor Dashboard профессионалам?
Ошибки в конфигурации CORS или CSP могут привести к уязвимостям или полной неработоспособности админки. Наши инженеры прошли более 20 проектов на Saleor и знают все подводные камни: от неочевидных зависимостей версий до тонкостей настройки Apollo Client для работы с кастомными полями. Закажите настройку Saleor Dashboard — свяжитесь с нами для консультации и расчёта стоимости. Мы гарантируем результат благодаря многолетнему опыту и сертифицированным инженерам. Получите стабильную админку уже через 1-2 дня.