0Pricing
Vue Academy · Aula

Backend Fastify para SPAs Vue

Rotas do Fastify, CORS, disponibilização do build estático do Vue, limitação de requisições e validação de solicitações.

Backend Fastify para SPAs Vue é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Por que usar Fastify em uma SPA Vue

Fastify é um framework web Node.js rápido e com baixa sobrecarga, com um ecossistema robusto de plug-ins e validação de esquemas integrada. Ele é um excelente back-end de API para uma aplicação de página única Vue e também pode servir os arquivos estáticos compilados.

Criando o servidor com registro de eventos

Instancie o Fastify com logger: true para obter, por padrão, o registro estruturado de requisições por meio do Pino. Isso é indispensável para depurar chamadas de API feitas pelo app Vue.

import Fastify from 'fastify'

const app = Fastify({
  logger: true
})

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

CORS para o servidor de desenvolvimento do Vue

Durante o desenvolvimento, o app Vue é executado em uma origem diferente (por exemplo, localhost:5173). Registre @fastify/cors e permita essa origem para que o navegador autorize chamadas de API entre origens.

import cors from '@fastify/cors'

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

Servindo os arquivos compilados do Vue

Em produção, você serve o app Vue compilado. Registre @fastify/static apontando para o diretório dist para que o Fastify entregue index.html e os recursos.

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

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

Rota alternativa da SPA

Uma SPA Vue usa roteamento no cliente, portanto caminhos desconhecidos devem retornar index.html (não 404). Adicione uma rota alternativa curinga que sirva o shell da aplicação para que links profundos funcionem após uma atualização.

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

Limitação de taxa

Proteja a API contra abuso com @fastify/rate-limit. Configure um número máximo de requisições por janela de tempo para cada cliente.

import rateLimit from '@fastify/rate-limit'

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

Validação de esquemas nas rotas

O Fastify valida e serializa usando JSON Schema. Defina um esquema para body e o Fastify rejeita cargas úteis inválidas com um erro 400 antes que seu manipulador seja executado — não é necessária validação 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 resposta para ganhar velocidade

Adicionar um esquema de response permite que o Fastify serialize a saída com um serializador compilado rápido e remova campos que não estão no esquema — melhorando tanto o desempenho quanto a segurança.

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

Organizando rotas como plug-ins

O Fastify incentiva o encapsulamento: agrupe rotas relacionadas em plug-ins registrados sob um prefixo. Isso mantém a API modular à medida que cresce.

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

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

Ordem de registro dos plug-ins

A ordem importa: registre os plug-ins transversais (cors, rate-limit) antes das rotas e o fallback estático/da SPA por último, para que as rotas da API sejam correspondidas antes que a rota curinga 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

Estratégia de desenvolvimento versus produção

No desenvolvimento, execute o servidor de desenvolvimento do Vite e o Fastify separadamente, contando com CORS. Em produção, compile o app Vue e deixe o Fastify servir dist a partir da mesma origem — não será necessário CORS, e haverá um único processo implantável.

Verificação rápida

Teste sua compreensão do back-end do Fastify.

Revisão

Você aprendeu a criar um back-end Fastify para uma SPA Vue:

  • logger: true fornece registro estruturado de requisições
  • @fastify/cors permite a origem do servidor de desenvolvimento do Vue
  • @fastify/static serve o dist compilado; uma rota alternativa curinga habilita o roteamento da SPA
  • @fastify/rate-limit protege contra abusos
  • JSON Schema valida os corpos das requisições e serializa respostas de forma segura e rápida

Perguntas Frequentes

A aula “Backend Fastify para SPAs Vue” é grátis?

Sim — o texto completo de “Backend Fastify para SPAs Vue” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Backend Fastify para SPAs Vue”?

Rotas do Fastify, CORS, disponibilização do build estático do Vue, limitação de requisições e validação de solicitações. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Backend Fastify para SPAs Vue”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Backend Fastify para SPAs Vue
  2. Autenticação JWT: login e atualização
  3. Chamadas autenticadas à API com interceptadores do Axios
  4. Implantação de Vue full-stack em produção
← Voltar para Vue Academy