0Pricing
Vue Academy · Lektion

Fastify-Backend für Vue-SPAs

Fastify-Routen, CORS, statischen Vue-Build bereitstellen, Rate Limiting und Request-Validierung

Fastify-Backend für Vue-SPAs ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum Fastify für eine Vue-SPA

Fastify ist ein schnelles Node.js-Webframework mit geringem Overhead, einem leistungsfähigen Plugin-Ökosystem und integrierter Schema-Validierung. Es eignet sich hervorragend als API-Backend für eine Vue-Single-Page-Anwendung und kann außerdem die gebauten statischen Dateien ausliefern.

Erstellen des Servers mit einem Logger

Initialisieren Sie Fastify mit logger: true, um standardmäßig strukturiertes Request-Logging über Pino zu erhalten. Das ist für das Debuggen von API-Aufrufen aus der Vue-App äußerst hilfreich.

import Fastify from 'fastify'

const app = Fastify({
  logger: true
})

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

CORS für den Vue-Dev-Server

Während der Entwicklung läuft die Vue-App unter einer anderen Origin (z. B. localhost:5173). Registrieren Sie @fastify/cors und erlauben Sie diese Origin, damit der Browser Cross-Origin-API-Aufrufe zulässt.

import cors from '@fastify/cors'

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

Bereitstellen des gebauten Vue-dist

In der Produktion stellen Sie die kompilierte Vue-App bereit. Registrieren Sie @fastify/static mit Verweis auf das dist-Verzeichnis, damit Fastify index.html und die Assets ausliefert.

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

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

SPA-Fallback-Route

Eine Vue-SPA verwendet clientseitiges Routing. Daher müssen unbekannte Pfade index.html zurückgeben (nicht 404). Fügen Sie einen Wildcard-Fallback hinzu, der den App-Shell ausliefert, damit Deep Links beim Aktualisieren funktionieren.

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

Rate-Limiting

Schützen Sie die API mit @fastify/rate-limit vor Missbrauch. Konfigurieren Sie eine maximale Anzahl von Requests pro Zeitfenster und Client.

import rateLimit from '@fastify/rate-limit'

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

Schema-Validierung für Routen

Fastify validiert und serialisiert anhand von JSON Schema. Definieren Sie ein body-Schema, und Fastify lehnt ungültige Payloads mit 400 ab, bevor Ihr Handler ausgeführt wird – eine manuelle Validierung ist nicht erforderlich.

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-Schemas für mehr Geschwindigkeit

Mit einem response-Schema kann Fastify die Ausgabe mit einem schnellen kompilierten Serializer serialisieren und Felder entfernen, die nicht im Schema enthalten sind. Das verbessert sowohl die Performance als auch die Sicherheit.

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

Organisieren von Routen als Plugins

Fastify setzt auf Kapselung: Gruppieren Sie zusammengehörige Routen in Plugins, die unter einem Präfix registriert werden. So bleibt die API auch bei wachsendem Umfang modular.

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

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

Reihenfolge der Plugin-Registrierung

Die Reihenfolge ist wichtig: Registrieren Sie übergreifende Plugins (cors, rate-limit) vor den Routen und den static-/SPA-Fallback zuletzt, damit API-Routen vor dem Catch-all greifen, das index.html ausliefert.

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

Strategie für Entwicklung und Produktion

In der Entwicklung führen Sie den Dev-Server von Vite und Fastify getrennt aus und verwenden CORS. In der Produktion bauen Sie die Vue-App und lassen Fastify dist unter derselben Origin ausliefern – CORS ist nicht erforderlich, und es gibt nur einen deploybaren Prozess.

Kurzer Test

Testen Sie Ihr Verständnis des Fastify-Backends.

Zusammenfassung

Sie haben gelernt, ein Fastify-Backend für eine Vue-SPA zu erstellen:

  • logger: true aktiviert strukturiertes Request-Logging
  • @fastify/cors erlaubt die Origin des Vue-Dev-Servers
  • @fastify/static liefert das gebaute dist-Verzeichnis aus; ein Wildcard-Fallback ermöglicht SPA-Routing
  • @fastify/rate-limit schützt vor Missbrauch
  • JSON Schema validiert Bodies und serialisiert Responses sicher und schnell

Häufig gestellte Fragen

Ist die Lektion „Fastify-Backend für Vue-SPAs“ kostenlos?

Ja — der vollständige Text von „Fastify-Backend für Vue-SPAs“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Fastify-Backend für Vue-SPAs“?

Fastify-Routen, CORS, statischen Vue-Build bereitstellen, Rate Limiting und Request-Validierung Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Fastify-Backend für Vue-SPAs“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Fastify-Backend für Vue-SPAs
  2. JWT-Authentifizierung: Login und Aktualisierung
  3. Authentifizierte API-Aufrufe mit Axios-Interceptors
  4. Full-Stack-Vue in der Produktion bereitstellen
← Zurück zu Vue Academy