Деплой на различные платформы

Перед деплоем приложения, созданного с помощью Quasar Framework, необходимо убедиться, что проект полностью готов к производству. Основные шаги включают:

  • Проверку конфигурации в quasar.conf.js, особенно разделов build, devServer и framework.
  • Настройку publicPath для корректного развертывания на сервере или CDN.
  • Оптимизацию сборки с помощью tree shaking, минимизации CSS и JS, а также включения gzip или brotli при необходимости.

Команда для сборки продакшн-версии:

quasar build

По умолчанию сборка создаёт папку dist/spa для SPA, dist/pwa для PWA, dist/capacitor для мобильных платформ и dist/electron для настольных приложений.

Деплой SPA на веб-сервер

Для стандартного SPA-проекта результат сборки (dist/spa) содержит статические файлы, которые можно размещать на любом веб-сервере:

  1. Apache / Nginx

    • Поместить файлы из dist/spa в корневую директорию сайта.

    • Настроить маршрутизацию для поддержки history mode:

      Для Nginx:

      location / {
    try_files $uri $uri/ /index.html;
}

      Для Apache: В .htaccess добавить:

      RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

  2. CDN или облачные хостинги (Netlify, Vercel, Cloudflare Pages)

    • Просто указать папку dist/spa в настройках публикации.
    • Для PWA важно проверить наличие manifest.json и корректные пути к ресурсам.

Деплой PWA

Quasar позволяет строить прогрессивные веб-приложения. Для деплоя PWA (dist/pwa) нужно:

  • Убедиться, что service worker корректно генерируется (Quasar использует Workbox по умолчанию).
  • Разместить файлы на HTTPS-сервере, так как service worker требует защищённого соединения.
  • Настроить кэширование статических ресурсов через workboxOptions в quasar.conf.js.

Команда сборки PWA:

quasar build -m pwa

PWA можно развернуть на том же сервере, что и SPA, или использовать специализированные платформы для статических сайтов.

Деплой на мобильные платформы с Capacitor

Quasar интегрируется с Capacitor для сборки нативных приложений:

  1. Инициализация Capacitor

    quasar mode add capacitor

  2. Выбор платформы

    quasar build -m capacitor -T android
quasar build -m capacitor -T ios

  3. Сборка нативного приложения

    • Для Android используется Android Studio.
    • Для iOS — Xcode.

  4. Публикация в Google Play или App Store

    • Генерация релизного APK или AAB для Android.
    • Подготовка сборки .ipa для iOS с настройкой профиля разработчика и сертификатов.

Деплой Electron-приложений

Quasar поддерживает создание настольных приложений с Electron:

  1. Добавление режима Electron

    quasar mode add electron

  2. Сборка Electron-приложения

    quasar build -m electron

  3. Настройка пакета

    • В electron-packager или electron-builder указываются иконки, подписи и параметры автообновления.
    • Можно генерировать установочные пакеты для Windows (.exe), macOS (.dmg) и Linux (.AppImage, .deb, .rpm).

Деплой SSR-приложений

Quasar поддерживает серверный рендеринг (SSR) для SEO и производительности:

  1. Сборка SSR

    quasar build -m ssr

  2. Запуск на Node.js сервере

    • Получается директория dist/ssr с серверным приложением.
    • Используется команда node ./dist/ssr/serve.js для локального запуска.

  3. Развертывание на облаке или VPS

    • Подходит любой сервер с Node.js.
    • Важно настроить процесс-менеджер (pm2, systemd) для постоянной работы.

Управление конфигурациями деплоя

Quasar позволяет иметь отдельные конфигурации для разных платформ и окружений:

  • Env Variables: QUASAR_ENV и .env файлы для разделения dev, staging и prod.
  • Build Flags: отдельные quasar.conf.js секции build, devServer, framework.
  • Dynamic Public Path: использование функции в build.publicPath для корректного определения базового пути при деплое на CDN или в поддиректорию.

Советы по оптимизации

  • Минимизировать CSS и JS с помощью Quasar CLI и Webpack.
  • Включить lazy-loading для роутов и компонентов.
  • Использовать code splitting и dynamic imports для уменьшения размера начальной загрузки.
  • Активировать Service Worker для PWA для кэширования ресурсов и офлайн-доступа.

Все эти шаги обеспечивают корректное и безопасное развертывание приложений Quasar на любой платформе: веб, мобильной или настольной.

Оглавление