Настройка Saleor Dashboard

Настройка Saleor Dashboard

Saleor Dashboard — отдельное React-приложение (TypeScript, Apollo Client, Material UI), которое деплоится независимо от API. Оно общается с Saleor Core исключительно через GraphQL. Настройка включает сборку под конкретное окружение, конфигурацию CORS/CSP на стороне API и опциональную кастомизацию интерфейса.

Требования и репозиторий

Dashboard живёт в отдельном репозитории: github.com/saleor/saleor-dashboard. Версия Dashboard должна совпадать с версией Core — мажорная и минорная версии должны быть одинаковы.

git clone https://github.com/saleor/saleor-dashboard.git
cd saleor-dashboard
git checkout 3.20  # версия = версии вашего Saleor Core
npm install

Переменные окружения

# .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 — единственная обязательная переменная. Остальные опциональны, но STATIC_URL критичен если Dashboard живёт не в корне домена.

Сборка и деплой

npm run build
# dist/ содержит статические файлы

Артефакт — чистый SPA без SSR. Деплоится на любой статический хостинг: S3 + CloudFront, Nginx, Vercel. При деплое на субпуть нужно настроить basename React Router — это делается через APP_MOUNT_URI.

Nginx-конфиг для субпути:

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 на стороне API

Dashboard и API могут быть на разных доменах. Saleor Core (settings.py):

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

# Для staging:
CORS_ALLOW_ALL_ORIGINS = False
CORS_ALLOW_CREDENTIALS = True

Без правильного CORS браузер заблокирует GraphQL-запросы — это первая проблема при новой установке.

Настройка CSP

Если на сервере включён Content-Security-Policy, нужно разрешить:

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'unsafe-inline';
  connect-src 'self' https://api.your-store.com wss://api.your-store.com;
  img-src 'self' data: https://cdn.your-store.com;
  font-src 'self' https://fonts.gstatic.com;

wss:// нужен для GraphQL subscriptions (live updates в Dashboard).

Первичная настройка после деплоя

1. Открыть /dashboard/
2. При первом запуске появится мастер создания суперпользователя (если база пустая)
3. Настроить каналы продаж: Channels → Create Channel
4. Подключить платёжные методы: Plugins → Payment
5. Настроить склады: Warehouses → Create
6. Добавить shipping zones и методы доставки

Брендирование интерфейса

Dashboard не предназначен для глубокой кастомизации, но базовое брендирование возможно:

// src/config.ts — можно переопределить:
export const APP_NAME = "My Store Admin";
export const LOGO_URL = "/static/logo.svg";

Замена логотипа и цветовой схемы (Material UI theme) требует правки исходников и пересборки. Это приемлемо, если Dashboard форкнут.

Интеграция Saleor Apps

С версии 3.x Dashboard поддерживает установку Apps через App Store или по manifest URL:

Настройки → Apps → Install external app:

https://my-app.vercel.app/api/manifest

App должно отдавать корректный JSON manifest с id, name, permissions и appUrl. Dashboard встраивает App через iframe с токен-аутентификацией.

Типичные проблемы при настройке

Обновление Dashboard

Dashboard обновляется независимо от Core, но версии должны совпадать. Процедура:

git fetch origin
git checkout 3.21
npm install
npm run build
# деплой нового dist/

Без миграций БД, без рестарта API — только пересборка фронта.