Vue Academy · Pelajaran

Backend Fastify untuk SPA Vue

Rute Fastify, CORS, menyajikan build Vue statis, pembatasan laju, serta validasi permintaan.

Backend Fastify untuk SPA Vue adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Mengapa Memilih Fastify untuk SPA Vue

Fastify adalah kerangka kerja web Node.js yang cepat dan ringan, dengan ekosistem pengaya yang kuat serta validasi skema bawaan. Fastify merupakan backend API yang sangat baik untuk aplikasi Vue satu halaman, dan juga dapat menyajikan berkas statis hasil pembangunan.

Membuat Server dengan Pencatat

Buat instans Fastify dengan logger: true untuk mendapatkan pencatatan permintaan terstruktur melalui Pino secara langsung. Hal ini sangat berguna untuk men-debug panggilan API dari aplikasi Vue.

import Fastify from 'fastify'

const app = Fastify({
  logger: true
})

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

CORS untuk Server Pengembangan Vue

Selama pengembangan, aplikasi Vue berjalan pada asal yang berbeda, misalnya localhost:5173. Daftarkan @fastify/cors dan izinkan asal tersebut agar browser mengizinkan panggilan API lintas asal.

import cors from '@fastify/cors'

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

Menyajikan dist Vue Hasil Kompilasi

Dalam produksi, Anda menyajikan aplikasi Vue yang telah dikompilasi. Daftarkan @fastify/static dengan menunjuk ke direktori dist agar Fastify menyajikan index.html dan aset.

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

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

Rute Cadangan untuk SPA

SPA Vue menggunakan perutean sisi klien, sehingga jalur yang tidak dikenal harus mengembalikan index.html, bukan 404. Tambahkan rute cadangan untuk semua jalur yang menyajikan kerangka aplikasi agar tautan langsung dapat berfungsi saat halaman dimuat ulang.

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

Pembatasan Laju

Lindungi API dari penyalahgunaan dengan @fastify/rate-limit. Konfigurasikan jumlah maksimum permintaan per jendela waktu untuk setiap klien.

import rateLimit from '@fastify/rate-limit'

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

Validasi Skema pada Rute

Fastify melakukan validasi dan serialisasi menggunakan Skema JSON. Tentukan skema body, lalu Fastify menolak payload yang tidak valid dengan status 400 sebelum penangan Anda dijalankan—tidak diperlukan validasi 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)
})

Skema Respons untuk Kecepatan

Penambahan skema response memungkinkan Fastify menserialisasi keluaran dengan serialisator terkompilasi yang cepat dan menghapus bidang yang tidak tercantum dalam skema—sehingga meningkatkan performa sekaligus keamanan.

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

Mengatur Rute sebagai Pengaya

Fastify mendorong enkapsulasi: kelompokkan rute yang saling terkait ke dalam pengaya yang didaftarkan dengan awalan. Dengan demikian, API tetap modular saat berkembang.

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

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

Urutan Pendaftaran Pengaya

Urutan itu penting: daftarkan pengaya lintas fungsi (CORS, pembatasan laju) sebelum rute, lalu daftarkan pengaya statis dan rute cadangan SPA terakhir, sehingga rute API dicocokkan sebelum pencocokan semua jalur menyajikan 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

Strategi Pengembangan vs Produksi

Dalam pengembangan, jalankan server pengembangan Vite dan Fastify secara terpisah dengan mengandalkan CORS. Dalam produksi, bangun aplikasi Vue dan biarkan Fastify menyajikan dist dari asal yang sama—tidak diperlukan CORS dan hanya ada satu proses yang dapat diterapkan.

Pemeriksaan Singkat

Uji pemahaman Anda tentang backend Fastify.

Rangkuman

Anda telah mempelajari cara membangun backend Fastify untuk SPA Vue:

logger: true memberikan pencatatan permintaan terstruktur
@fastify/cors mengizinkan asal server pengembangan Vue
@fastify/static menyajikan dist hasil pembangunan; rute cadangan untuk semua jalur memungkinkan perutean SPA
@fastify/rate-limit melindungi dari penyalahgunaan
Skema JSON memvalidasi isi permintaan dan menserialisasi respons dengan aman dan cepat

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Backend Fastify untuk SPA Vue” gratis?

Ya — teks lengkap “Backend Fastify untuk SPA Vue” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Backend Fastify untuk SPA Vue”?

Rute Fastify, CORS, menyajikan build Vue statis, pembatasan laju, serta validasi permintaan. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Backend Fastify untuk SPA Vue” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Backend Fastify untuk SPA Vue
Autentikasi JWT: Login dan Refresh
Panggilan API Terautentikasi dengan Interceptor Axios
Men-deploy Vue Full-Stack ke Produksi

← Kembali ke Vue Academy