Vue Academy · Lección

Backend Fastify para SPA de Vue

Rutas de Fastify, CORS, servicio de la compilación estática de Vue, limitación de solicitudes y validación de peticiones

Backend Fastify para SPA de Vue es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

Por qué usar Fastify con una SPA de Vue

Fastify es un framework web de Node.js rápido y ligero, con un sólido ecosistema de plugins y validación de esquemas integrada. Es un excelente backend de API para una aplicación de una sola página de Vue y también puede servir los archivos estáticos compilados.

Crear el servidor con un registrador

Inicialice Fastify con logger: true para obtener registros estructurados de las solicitudes mediante Pino desde el primer momento. Esto resulta muy valioso para depurar las llamadas a la API desde la aplicación de Vue.

import Fastify from 'fastify'

const app = Fastify({
  logger: true
})

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

CORS para el servidor de desarrollo de Vue

Durante el desarrollo, la aplicación de Vue se ejecuta en un origen distinto (por ejemplo, localhost:5173). Registre @fastify/cors y permita ese origen para que el navegador autorice las llamadas a la API entre orígenes.

import cors from '@fastify/cors'

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

Servir la carpeta dist compilada de Vue

En producción se sirve la aplicación de Vue compilada. Registre @fastify/static apuntando al directorio dist para que Fastify entregue index.html y los recursos.

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

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

Ruta de respaldo de la SPA

Una SPA de Vue utiliza el enrutamiento del lado del cliente, por lo que las rutas desconocidas deben devolver index.html (no un 404). Añada una ruta comodín de respaldo que sirva el shell de la aplicación para que los enlaces profundos funcionen al actualizar la página.

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')
})

Limitación de solicitudes

Proteja la API contra el abuso con @fastify/rate-limit. Configure un número máximo de solicitudes por cliente en cada intervalo de tiempo.

import rateLimit from '@fastify/rate-limit'

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

Validación de esquemas en las rutas

Fastify valida y serializa mediante JSON Schema. Defina un esquema para body y Fastify rechazará las cargas no válidas con un 400 antes de ejecutar su controlador; no necesitará validación manual.

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)
})

Esquemas de respuesta para mejorar el rendimiento

Añadir un esquema de response permite que Fastify serialice la salida con un serializador compilado rápido y elimine los campos que no aparecen en el esquema, lo que mejora tanto el rendimiento como la seguridad.

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

Organizar las rutas como plugins

Fastify fomenta la encapsulación: agrupe las rutas relacionadas en plugins registrados con un prefijo. Esto mantiene la API modular a medida que crece.

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

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

Orden de registro de los plugins

El orden es importante: registre los plugins transversales (cors, rate-limit) antes que las rutas, y la reserva de archivos estáticos/SPA al final, para que las rutas de la API se evalúen antes de que la ruta comodín sirva 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

Estrategia de desarrollo frente a producción

En desarrollo, ejecute por separado el servidor de desarrollo de Vite y Fastify, utilizando CORS. En producción, compile la aplicación de Vue y deje que Fastify sirva dist desde el mismo origen; no necesitará CORS y tendrá un único proceso desplegable.

Comprobación rápida

Compruebe su comprensión del backend de Fastify.

Resumen

Ha aprendido a crear un backend de Fastify para una SPA de Vue:

logger: true proporciona registros estructurados de las solicitudes
@fastify/cors permite el origen del servidor de desarrollo de Vue
@fastify/static sirve la carpeta dist compilada; una ruta comodín de respaldo habilita el enrutamiento de la SPA
@fastify/rate-limit protege contra el abuso
JSON Schema valida los cuerpos y serializa las respuestas de forma segura y rápida

Preguntas frecuentes

¿La lección «Backend Fastify para SPA de Vue» es gratis?

Sí — el texto completo de «Backend Fastify para SPA de Vue» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Backend Fastify para SPA de Vue»?

Rutas de Fastify, CORS, servicio de la compilación estática de Vue, limitación de solicitudes y validación de peticiones Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Backend Fastify para SPA de Vue»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Backend Fastify para SPA de Vue
Autenticación JWT: inicio de sesión y renovación
Llamadas autenticadas a la API con interceptores de Axios
Despliegue de Vue full-stack en producción

← Volver a Vue Academy