Деплой SPA приложений

Quasar Framework предоставляет мощный инструмент для разработки SPA (Single Page Application) на базе Vue.js. Перед деплоем приложения необходимо правильно сконфигурировать проект, чтобы обеспечить стабильность, производительность и корректную работу на сервере.

1. Настройка конфигурации для продакшн-сборки

Конфигурационный файл Quasar quasar.config.js содержит раздел build, где задаются параметры для продакшн-сборки:

build: {
  vueRouterMode: 'history',
  publicPath: '/',
  distDir: 'dist/spa',
  minify: true,
  analyze: false,
  gzip: true
}
  • vueRouterMode – рекомендуется использовать 'history' для SPA, чтобы URL выглядели красиво без #.
  • publicPath – путь, по которому будут доступны ресурсы приложения. Для корневого деплоя обычно '/'.
  • distDir – директория для итоговой сборки, обычно dist/spa.
  • minify – уменьшение размера файлов за счет минификации.
  • gzip – генерация сжатых версий для ускорения загрузки.

2. Генерация продакшн-сборки

Для создания готового к деплою SPA выполняется команда:

quasar build

Процесс сборки создает оптимизированные HTML, JS и CSS файлы в директории dist/spa. В продакшн-сборке включены:

  • Минификация JS и CSS
  • Разделение кода (code splitting)
  • Оптимизация изображений (при использовании соответствующих плагинов)
  • Генерация index.html с корректными ссылками на бандлы

3. Настройка сервера для SPA

SPA приложения требуют корректной обработки маршрутов на сервере. В режиме history все запросы, которые не соответствуют существующим файлам, должны перенаправляться на index.html. Примеры конфигурации:

  • Nginx:
server {
    listen 80;
    server_name example.com;

    root /var/www/myapp/dist/spa;

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

    location /assets/ {
        expires 30d;
    }
}
  • Apache (.htaccess):
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Эти настройки гарантируют, что при прямом заходе на любой маршрут SPA приложение корректно подгружает компоненты.

4. Деплой на статические хостинги

SPA Quasar можно развернуть на любом статическом хостинге:

  • Netlify – достаточно скопировать содержимое dist/spa в корень проекта. Настройки маршрутизации для SPA задаются в _redirects:
/* /index.html 200
  • Vercel – поддержка SPA встроена, достаточно указать директорию dist/spa.
  • GitHub Pages – можно использовать утилиту gh-pages:
npm install --save-dev gh-pages
npx gh-pages -d dist/spa

5. Управление переменными окружения

Для корректной работы приложения в разных средах следует использовать .env файлы:

  • .env.production – значения для продакшн
  • .env.development – значения для разработки

В quasar.config.js подключение переменных через env:

build: {
  env: {
    API_URL: process.env.API_URL
  }
}

Использование:

axios.get(`${process.env.API_URL}/users`)

6. Оптимизация загрузки SPA

  • Lazy-loading маршрутов – импорт компонентов по требованию снижает размер начального бандла.
const Dashboard = () => import('pages/Dashboard.vue');
  • Prefetch и preload – Quasar автоматически генерирует prefetch для асинхронных модулей, ускоряя загрузку.
  • Service Worker – при необходимости можно подключить PWA плагин для кеширования ресурсов.

7. Контроль версий и CI/CD

Для больших проектов рекомендуется настроить автоматический деплой через CI/CD:

  • GitHub Actions, GitLab CI или Jenkins
  • Шаги: установка зависимостей → сборка → тесты → копирование файлов на сервер или в хранилище

Пример GitHub Actions для SPA:

name: Deploy SPA
on:
  push:
    branches:
      - main
jobs:
  build-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 20
      - run: npm ci
      - run: npx quasar build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist/spa

8. Мониторинг и логирование

Даже после успешного деплоя необходимо отслеживать:

  • Ошибки загрузки JS/CSS (Sentry или аналогичные сервисы)
  • Статистику посещений и производительности (Google Analytics, Plausible)
  • Размер бандлов и скорость загрузки (Lighthouse, WebPageTest)

Эта последовательность действий обеспечивает стабильный деплой SPA приложения на Quasar с высокой производительностью и минимальными рисками ошибок на продакшн-сервере.

Оглавление