0Pricing
Vue Academy · Lezione

Backend Fastify per SPA Vue

Route Fastify, CORS, pubblicazione della build Vue statica, limitazione della frequenza, validazione delle richieste.

Backend Fastify per SPA Vue è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Perché usare Fastify per una SPA Vue

Fastify è un framework web Node.js veloce e leggero, con un solido ecosistema di plugin e la validazione degli schemi integrata. È un eccellente backend API per un'applicazione Vue a pagina singola e può anche servire i file statici compilati.

Creare il server con un logger

Istanziare Fastify con logger: true consente di ottenere subito il logging strutturato delle richieste tramite Pino. È prezioso per eseguire il debug delle chiamate API provenienti dall'app Vue.

import Fastify from 'fastify'

const app = Fastify({
  logger: true
})

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

CORS per il server di sviluppo Vue

Durante lo sviluppo, l'app Vue viene eseguita da un'origine diversa (ad es. localhost:5173). Registri @fastify/cors e autorizzi tale origine affinché il browser consenta le chiamate API cross-origin.

import cors from '@fastify/cors'

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

Servire la dist compilata da Vue

In produzione si serve l'app Vue compilata. Registri @fastify/static indicando la directory dist, così Fastify può fornire index.html e le risorse.

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

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

Route fallback per SPA

Una SPA Vue usa il routing lato client, quindi per i percorsi sconosciuti è necessario restituire index.html (non 404). Aggiunga un fallback wildcard che serva l'app shell, così i deep link funzionano anche dopo un aggiornamento della pagina.

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

Limitazione della frequenza

Protegga l'API dagli abusi con @fastify/rate-limit. Configuri il numero massimo di richieste per client in ogni finestra temporale.

import rateLimit from '@fastify/rate-limit'

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

Validazione dello schema nelle route

Fastify esegue la validazione e la serializzazione usando JSON Schema. Definisca uno schema body: Fastify rifiuterà i payload non validi con un 400 prima dell'esecuzione dell'handler — non serve alcuna validazione manuale.

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

Schemi delle risposte per la velocità

L'aggiunta di uno schema response consente a Fastify di serializzare l'output con un serializer compilato veloce e rimuove i campi non inclusi nello schema, migliorando sia le prestazioni sia la sicurezza.

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

Organizzare le route come plugin

Fastify incoraggia l'incapsulamento: raggruppi le route correlate in plugin registrati con un prefisso. In questo modo l'API rimane modulare anche quando cresce.

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

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

Ordine di registrazione dei plugin

L'ordine è importante: registri i plugin trasversali (cors, rate-limit) prima delle route e il fallback statico/SPA per ultimo, così le route API vengono abbinate prima che il catch-all serva 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

Strategia per sviluppo e produzione

In sviluppo, esegua separatamente il server di sviluppo di Vite e Fastify, affidandosi a CORS. In produzione, compili l'app Vue e lasci che Fastify serva dist dalla stessa origine: non serve CORS e si ottiene un unico processo distribuibile.

Verifica rapida

Verifichi la sua comprensione del backend Fastify.

Riepilogo

Ha imparato a creare un backend Fastify per una SPA Vue:

  • logger: true fornisce il logging strutturato delle richieste
  • @fastify/cors autorizza l'origine del server di sviluppo Vue
  • @fastify/static serve la dist compilata; un fallback wildcard abilita il routing delle SPA
  • @fastify/rate-limit protegge dagli abusi
  • JSON Schema valida i body e serializza le risposte in modo sicuro e veloce

Domande Frequenti

La lezione «Backend Fastify per SPA Vue» è gratuita?

Sì — il testo completo di «Backend Fastify per SPA Vue» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Backend Fastify per SPA Vue»?

Route Fastify, CORS, pubblicazione della build Vue statica, limitazione della frequenza, validazione delle richieste. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Backend Fastify per SPA Vue»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Backend Fastify per SPA Vue
  2. Autenticazione JWT: login e refresh
  3. Chiamate API autenticate con gli interceptor Axios
  4. Deployment in produzione di Vue full-stack
← Torna a Vue Academy