Vue Academy · Урок

Бэкенд Fastify для SPA на Vue

Маршруты Fastify, CORS, раздача статической сборки Vue, ограничение частоты запросов и проверка запросов

«Бэкенд Fastify для SPA на Vue» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Зачем использовать Fastify для SPA на Vue

Fastify — это быстрый веб-фреймворк Node.js с небольшими накладными расходами, развитой экосистемой плагинов и встроенной проверкой схем. Он отлично подходит как серверная часть API для одностраничного приложения Vue, а также умеет раздавать собранные статические файлы.

Создание сервера с журналированием

Создайте экземпляр Fastify с logger: true, чтобы сразу получать структурированное журналирование запросов через Pino. Это незаменимо при отладке вызовов API из приложения Vue.

import Fastify from 'fastify'

const app = Fastify({
  logger: true
})

await app.listen({ port: 3000, host: '0.0.0.0' })

CORS для сервера разработки Vue

Во время разработки приложение Vue работает из другого источника (например, localhost:5173). Зарегистрируйте @fastify/cors и разрешите этот источник, чтобы браузер пропускал междоменные вызовы API.

import cors from '@fastify/cors'

await app.register(cors, {
  origin: 'http://localhost:5173',
  credentials: true // allow cookies
})

Раздача собранного приложения Vue из dist

В продакшене нужно раздавать скомпилированное приложение Vue. Зарегистрируйте @fastify/static, указав каталог dist, чтобы Fastify отдавал index.html и ресурсы.

import fastifyStatic from '@fastify/static'
import { join } from 'node:path'

await app.register(fastifyStatic, {
  root: join(process.cwd(), 'dist'),
  prefix: '/'
})

Резервный маршрут SPA

SPA Vue использует маршрутизацию на стороне клиента, поэтому для неизвестных путей нужно возвращать index.html, а не ошибку 404. Добавьте универсальный резервный маршрут, который отдаёт оболочку приложения, чтобы глубокие ссылки работали после обновления страницы.

app.setNotFoundHandler((req, reply) => {
  // let the Vue router handle non-API paths
  if (req.url.startsWith('/api')) {
    return reply.code(404).send({ error: 'Not found' })
  }
  return reply.sendFile('index.html')
})

Ограничение частоты запросов

Защитите API от злоупотреблений с помощью @fastify/rate-limit. Настройте максимальное число запросов от одного клиента за заданное временное окно.

import rateLimit from '@fastify/rate-limit'

await app.register(rateLimit, {
  max: 100,            // requests
  timeWindow: '1 minute'
})

Проверка схемы в маршрутах

Fastify выполняет проверку и сериализацию с помощью JSON Schema. Определите схему body, и Fastify отклонит недопустимые payload с кодом 400 ещё до запуска обработчика — ручная проверка не нужна.

app.post('/api/users', {
  schema: {
    body: {
      type: 'object',
      required: ['email', 'name'],
      properties: {
        email: { type: 'string', format: 'email' },
        name: { type: 'string', minLength: 1 }
      }
    }
  }
}, async (req) => {
  return createUser(req.body)
})

Схемы ответа для повышения скорости

Добавление схемы response позволяет Fastify сериализовать выходные данные с помощью быстрого скомпилированного сериализатора и удаляет поля, отсутствующие в схеме, — повышая производительность и безопасность.

app.get('/api/users/:id', {
  schema: {
    response: {
      200: {
        type: 'object',
        properties: {
          id: { type: 'number' },
          name: { type: 'string' }
          // password is omitted, never serialized
        }
      }
    }
  }
}, getUserHandler)

Организация маршрутов в виде плагинов

Fastify поощряет инкапсуляцию: объединяйте связанные маршруты в плагины, зарегистрированные с префиксом. Благодаря этому API остаётся модульным по мере роста.

async function userRoutes(app) {
  app.get('/', listUsers)
  app.post('/', createUser)
}

await app.register(userRoutes, { prefix: '/api/users' })

Порядок регистрации плагинов

Порядок важен: регистрируйте сквозные плагины (CORS и ограничение частоты) до маршрутов, а статическую раздачу и резервный маршрут SPA — в последнюю очередь, чтобы маршруты API сопоставлялись до того, как универсальный обработчик отдаст index.html.

await app.register(cors, corsOpts)
await app.register(rateLimit, rlOpts)
await app.register(userRoutes, { prefix: '/api/users' })
await app.register(fastifyStatic, staticOpts) // last

Стратегия для разработки и продакшена

В режиме разработки запускайте сервер разработки Vite и Fastify отдельно, полагаясь на CORS. В продакшене соберите приложение Vue и позвольте Fastify раздавать dist из того же источника — CORS не нужен, а разворачивать нужно всего один процесс.

Быстрая проверка

Проверьте, насколько хорошо Вы поняли устройство серверной части Fastify.

Итоги

Вы научились создавать серверную часть Fastify для SPA на Vue:

logger: true обеспечивает структурированное журналирование запросов
@fastify/cors разрешает источник сервера разработки Vue
@fastify/static раздаёт собранный dist; универсальный резервный маршрут обеспечивает маршрутизацию SPA
@fastify/rate-limit защищает от злоупотреблений
JSON Schema проверяет тела запросов и быстро и безопасно сериализует ответы

Часто задаваемые вопросы

Урок «Бэкенд Fastify для SPA на Vue» бесплатный?

Да — полный текст урока «Бэкенд Fastify для SPA на Vue» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Бэкенд Fastify для SPA на Vue»?

Маршруты Fastify, CORS, раздача статической сборки Vue, ограничение частоты запросов и проверка запросов Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Бэкенд Fastify для SPA на Vue»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy