Vue Academy · Ders

Vue SPA'leri için Fastify Arka Ucu

Fastify route'ları, CORS, statik Vue derlemesi sunma, hız sınırlama ve istek doğrulama.

1. ders / 413 adım

Vue SPA'leri için Fastify Arka Ucu, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Vue SPA'si için Fastify neden

Fastify, güçlü bir eklenti ekosistemine ve yerleşik şema doğrulamasına sahip, hızlı ve düşük ek yüke sahip bir Node.js web çatısıdır. Vue tek sayfalı uygulaması için mükemmel bir API arka ucu olmasının yanı sıra derlenmiş statik dosyaları da sunabilir.

Günlük Kaydedicili Sunucu Oluşturma

Yerleşik Pino aracılığıyla yapılandırılmış istek günlük kaydı almak için Fastify'ı logger: true ile örneklendirin. Bu, Vue app içinden yapılan API çağrılarını hata ayıklarken çok değerlidir.

import Fastify from 'fastify'

const app = Fastify({
  logger: true
})

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

Vue Geliştirme Sunucusu için CORS

Geliştirme sırasında Vue app farklı bir kaynakta çalışır (ör. localhost:5173). @fastify/cors'u kaydedin ve tarayıcının kaynaklar arası API çağrılarına izin vermesi için bu kaynağa izin verin.

import cors from '@fastify/cors'

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

Derlenmiş Vue dist Dizinini Sunma

Üretimde derlenmiş Vue app'i sunarsınız. Fastify'ın index.html dosyasını ve varlıkları sunması için dist dizinini gösteren @fastify/static'i kaydedin.

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

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

SPA Geri Dönüş Rotası

Bir Vue SPA istemci tarafı yönlendirme kullanır; bu nedenle bilinmeyen yollar 404 yerine index.html döndürmelidir. Uygulama kabuğunu sunan joker karakterli bir geri dönüş rotası ekleyin; böylece derin bağlantılar yenileme sonrasında da çalışır.

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

İstek Hızı Sınırlama

@fastify/rate-limit ile API'yi kötüye kullanıma karşı koruyun. İstemci başına zaman aralığında izin verilen en fazla istek sayısını yapılandırın.

import rateLimit from '@fastify/rate-limit'

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

Rotalarda Şema Doğrulaması

Fastify, JSON Schema kullanarak doğrulama ve serileştirme yapar. Bir body şeması tanımlayın; Fastify, işleyiciniz çalışmadan önce geçersiz payload değerlerini 400 durumuyla reddeder — elle doğrulama yapmanız gerekmez.

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

Hız için Yanıt Şemaları

Bir response şeması eklemek, Fastify'ın çıktıyı hızlı ve derlenmiş bir serileştiriciyle serileştirmesini sağlar; ayrıca şemada bulunmayan alanları kaldırır. Böylece hem performans hem de güvenlik iyileşir.

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

Rotaları Eklenti Olarak Düzenleme

Fastify kapsüllemeyi teşvik eder: ilgili rotaları bir önek altında kaydedilen eklentilerde gruplayın. Bu yaklaşım, API büyüdükçe modüler yapıyı korur.

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

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

Eklenti Kayıt Sırası

Sıra önemlidir: CORS ve hız sınırlama gibi genel amaçlı eklentileri rotalardan önce, statik içerik ile SPA geri dönüşünü ise en son kaydedin. Böylece tüm yolları yakalayan yapı index.html sunmadan önce API rotaları eşleştirilir.

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

Geliştirme ve Üretim Stratejisi

Geliştirme ortamında Vite'ın geliştirme sunucusunu ve Fastify'ı ayrı ayrı çalıştırıp CORS'a güvenin. Üretimde Vue app'i derleyin ve Fastify'ın dist dizinini aynı kaynaktan sunmasını sağlayın; böylece CORS gerekmez ve tek bir dağıtılabilir işlem elde edilir.

Hızlı Kontrol

Fastify arka ucuyla ilgili anlayışınızı sınayın.

İnteraktif derste cevapla

Özet

Vue SPA'si için Fastify arka ucu oluşturmayı öğrendiniz:

logger: true yapılandırılmış istek günlük kaydı sağlar
@fastify/cors Vue geliştirme sunucusunun kaynağına izin verir
@fastify/static derlenmiş dist dizinini sunar; joker karakterli geri dönüş rotası SPA yönlendirmesini etkinleştirir
@fastify/rate-limit kötüye kullanıma karşı koruma sağlar
JSON Schema, istek gövdelerini doğrular ve yanıtları güvenli ve hızlı biçimde serileştirir

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 42
Dersler: 156

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Vue SPA'leri için Fastify Arka Ucu” dersi ücretsiz mi?

Evet — “Vue SPA'leri için Fastify Arka Ucu” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Vue SPA'leri için Fastify Arka Ucu” dersinde ne öğreneceğim?

Fastify route'ları, CORS, statik Vue derlemesi sunma, hız sınırlama ve istek doğrulama. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Vue SPA'leri için Fastify Arka Ucu” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Vue SPA'leri için Fastify Arka Ucu
JWT Kimlik Doğrulaması: Oturum Açma ve Yenileme
Axios Arakatmanlarıyla Kimliği Doğrulanmış API Çağrıları
Tam Yığın Vue'yu Üretime Dağıtma

← Vue Academy Sayfasına Dön