0Pricing
Vue Academy · Lekcja

Backend Fastify dla aplikacji SPA Vue

Trasy Fastify, CORS, serwowanie statycznego buildu Vue, ograniczanie liczby żądań oraz walidacja żądań.

Backend Fastify dla aplikacji SPA Vue to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Dlaczego Fastify do aplikacji SPA we Vue

Fastify to szybki framework webowy Node.js o małym narzucie, z rozbudowanym ekosystemem pluginów i wbudowaną walidacją schematów. Doskonale nadaje się na backend API dla jednostronicowej aplikacji Vue, a także może serwować zbudowane pliki statyczne.

Tworzenie serwera z loggerem

Utworzenie instancji Fastify z logger: true zapewnia od razu strukturalne logowanie żądań za pośrednictwem Pino. Jest to nieocenione podczas debugowania wywołań API z aplikacji Vue.

import Fastify from 'fastify'

const app = Fastify({
  logger: true
})

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

CORS dla serwera deweloperskiego Vue

Podczas programowania aplikacja Vue działa w innym originie (np. localhost:5173). Należy zarejestrować @fastify/cors i zezwolić na ten origin, aby przeglądarka dopuszczała wywołania API między różnymi originami.

import cors from '@fastify/cors'

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

Serwowanie zbudowanego katalogu dist aplikacji Vue

W produkcji serwuje się skompilowaną aplikację Vue. Należy zarejestrować @fastify/static, wskazując katalog dist, aby Fastify dostarczał plik index.html i zasoby.

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

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

Trasa zapasowa SPA

Vue SPA korzysta z routingu po stronie klienta, więc nieznane ścieżki muszą zwracać index.html, a nie 404. Należy dodać zapasową trasę typu wildcard, która serwuje powłokę aplikacji, aby bezpośrednie odnośniki działały po odświeżeniu.

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

Ograniczanie liczby żądań

Należy chronić API przed nadużyciami za pomocą @fastify/rate-limit. Należy skonfigurować maksymalną liczbę żądań na klienta w każdym oknie czasowym.

import rateLimit from '@fastify/rate-limit'

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

Walidacja schematów na trasach

Fastify przeprowadza walidację i serializację za pomocą JSON Schema. Należy zdefiniować schemat body, a Fastify odrzuci nieprawidłowe payloady kodem 400, zanim uruchomi się handler — ręczna walidacja nie jest potrzebna.

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

Schematy odpowiedzi dla większej szybkości

Dodanie schematu response pozwala Fastify serializować dane wyjściowe za pomocą szybkiego, skompilowanego serializera i usuwa pola nieuwzględnione w schemacie — poprawiając zarówno wydajność, jak i bezpieczeństwo.

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

Organizowanie tras jako pluginów

Fastify zachęca do enkapsulacji: powiązane trasy należy grupować w pluginach rejestrowanych z prefiksem. Dzięki temu API pozostaje modularne w miarę rozwoju.

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

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

Kolejność rejestracji pluginów

Kolejność ma znaczenie: pluginy przekrojowe, takie jak cors i rate-limit, należy rejestrować przed trasami, a obsługę plików statycznych i fallback SPA dodać na końcu, aby trasy API były dopasowywane przed trasą catch-all serwującą 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 dla środowiska deweloperskiego i produkcyjnego

W środowisku deweloperskim należy uruchomić serwer deweloperski Vite i Fastify osobno, korzystając z CORS. W produkcji należy zbudować aplikację Vue i pozwolić Fastify serwować katalog dist z tego samego originu — CORS nie będzie potrzebny, a całość będzie działać jako jeden proces gotowy do wdrożenia.

Szybki test

Proszę sprawdzić swoją wiedzę na temat backendu Fastify.

Podsumowanie

Poznali Państwo sposób budowania backendu Fastify dla Vue SPA:

  • logger: true zapewnia strukturalne logowanie żądań
  • @fastify/cors zezwala na origin serwera deweloperskiego Vue
  • @fastify/static serwuje zbudowany katalog dist; fallback wildcard umożliwia routing SPA
  • @fastify/rate-limit chroni przed nadużyciami
  • JSON Schema waliduje treści żądań i bezpiecznie oraz szybko serializuje odpowiedzi

Często zadawane pytania

Czy lekcja „Backend Fastify dla aplikacji SPA Vue” jest bezpłatna?

Tak — pełny tekst „Backend Fastify dla aplikacji SPA Vue” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Backend Fastify dla aplikacji SPA Vue”?

Trasy Fastify, CORS, serwowanie statycznego buildu Vue, ograniczanie liczby żądań oraz walidacja żądań. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Backend Fastify dla aplikacji SPA Vue”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Backend Fastify dla aplikacji SPA Vue
  2. Uwierzytelnianie JWT: logowanie i odświeżanie
  3. Uwierzytelnione wywołania API z interceptorami Axios
  4. Wdrażanie pełnego stosu Vue na produkcję
← Powrót do Vue Academy