Backend Fastify pour les SPA Vue
Routes Fastify, CORS, diffusion de la build Vue statique, limitation du débit et validation des requêtes
Backend Fastify pour les SPA Vue est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Pourquoi choisir Fastify pour une SPA Vue
Fastify est un framework web Node.js rapide et léger, doté d’un riche écosystème d’extensions et d’une validation intégrée par schéma. Il constitue un excellent backend d’API pour une application monopage Vue et peut également servir les fichiers statiques générés.
Créer le serveur avec un système de journalisation
Instanciez Fastify avec logger: true pour bénéficier d’une journalisation structurée des requêtes via Pino, sans configuration supplémentaire. C’est particulièrement utile pour déboguer les appels d’API effectués depuis l’application Vue.
import Fastify from 'fastify'
const app = Fastify({
logger: true
})
await app.listen({ port: 3000, host: '0.0.0.0' })CORS pour le serveur de développement Vue
Pendant le développement, l’application Vue s’exécute depuis une origine différente (par exemple localhost:5173). Enregistrez @fastify/cors et autorisez cette origine afin que le navigateur permette les appels d’API inter-origines.
import cors from '@fastify/cors'
await app.register(cors, {
origin: 'http://localhost:5173',
credentials: true // allow cookies
})Servir les fichiers compilés de Vue
En production, vous servez l’application Vue compilée. Enregistrez @fastify/static en le faisant pointer vers le répertoire dist afin que Fastify fournisse index.html et les ressources.
import fastifyStatic from '@fastify/static'
import { join } from 'node:path'
await app.register(fastifyStatic, {
root: join(process.cwd(), 'dist'),
prefix: '/'
})Route de repli pour une SPA
Une SPA Vue utilise le routage côté client : les chemins inconnus doivent donc renvoyer index.html plutôt qu’une erreur 404. Ajoutez une route de repli générique qui sert la structure de l’application afin que les liens profonds fonctionnent après actualisation.
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')
})Limitation du débit
Protégez l’API contre les abus avec @fastify/rate-limit. Configurez un nombre maximal de requêtes par période pour chaque client.
import rateLimit from '@fastify/rate-limit'
await app.register(rateLimit, {
max: 100, // requests
timeWindow: '1 minute'
})Validation des schémas sur les routes
Fastify valide et sérialise les données à l’aide de schémas JSON. Définissez un schéma body : Fastify rejette les charges utiles non valides avec une erreur 400 avant l’exécution de votre gestionnaire, sans validation manuelle.
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)
})Schémas de réponse pour gagner en rapidité
L’ajout d’un schéma response permet à Fastify de sérialiser la sortie avec un sérialiseur compilé performant et de supprimer les champs absents du schéma, ce qui améliore à la fois les performances et la sécurité.
app.get('/api/users/:id', {
schema: {
response: {
200: {
type: 'object',
properties: {
id: { type: 'number' },
name: { type: 'string' }
// password is omitted, never serialized
}
}
}
}
}, getUserHandler)Organiser les routes sous forme d’extensions
Fastify encourage l’encapsulation : regroupez les routes associées dans des extensions enregistrées sous un préfixe. L’API reste ainsi modulaire à mesure qu’elle s’agrandit.
async function userRoutes(app) {
app.get('/', listUsers)
app.post('/', createUser)
}
await app.register(userRoutes, { prefix: '/api/users' })Ordre d’enregistrement des extensions
L’ordre est important : enregistrez les extensions transversales (CORS, limitation du débit) avant les routes, puis le service des fichiers statiques et la route de repli SPA en dernier, afin que les routes d’API soient trouvées avant que la route générique ne serve index.html.
await app.register(cors, corsOpts)
await app.register(rateLimit, rlOpts)
await app.register(userRoutes, { prefix: '/api/users' })
await app.register(fastifyStatic, staticOpts) // lastStratégie de développement et de production
En développement, exécutez séparément le serveur de développement de Vite et Fastify, en vous appuyant sur CORS. En production, compilez l’application Vue et laissez Fastify servir dist depuis la même origine : CORS n’est plus nécessaire et vous disposez d’un seul processus déployable.
Vérification rapide
Testez votre compréhension du backend Fastify.
Récapitulatif
Vous avez appris à créer un backend Fastify pour une SPA Vue :
logger: truefournit une journalisation structurée des requêtes@fastify/corsautorise l’origine du serveur de développement Vue@fastify/staticsert ledistcompilé ; une route de repli générique active le routage SPA@fastify/rate-limitprotège contre les abus- Les schémas JSON valident les corps des requêtes et sérialisent les réponses rapidement et en toute sécurité
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 42
- Leçons
- 156
Questions Fréquemment Posées
La leçon « Backend Fastify pour les SPA Vue » est-elle gratuite ?
Oui — le texte complet de « Backend Fastify pour les SPA Vue » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Backend Fastify pour les SPA Vue » ?
Routes Fastify, CORS, diffusion de la build Vue statique, limitation du débit et validation des requêtes Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Backend Fastify pour les SPA Vue » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Backend Fastify pour les SPA Vue
- Authentification JWT : connexion et actualisation
- Appels d’API authentifiés avec les intercepteurs Axios
- Déployer une application Vue full-stack en production