Vue Academy · บทเรียน

แบ็กเอนด์ Fastify สำหรับ SPA ของ Vue

เส้นทาง Fastify, CORS การให้บริการบิลด์ Vue แบบสแตติก การจำกัดอัตรา และการตรวจสอบคำขอ

แบ็กเอนด์ Fastify สำหรับ SPA ของ Vue เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

Fastify เหมาะกับ SPA ของ Vue อย่างไร

Fastify เป็นเฟรมเวิร์กเว็บของ Node.js ที่ทำงานรวดเร็ว ใช้ทรัพยากรน้อย มีระบบนิเวศของปลั๊กอินที่แข็งแกร่ง และมีการตรวจสอบสคีมาในตัว จึงเหมาะอย่างยิ่งสำหรับเป็นแบ็กเอนด์ API ของแอปพลิเคชันแบบหน้าเดียวของ Vue และยังสามารถให้บริการไฟล์สแตติกที่ build แล้วได้ด้วย

การสร้างเซิร์ฟเวอร์พร้อมตัวบันทึก

สร้างอินสแตนซ์ Fastify ด้วย logger: true เพื่อรับการบันทึกคำขอแบบมีโครงสร้างผ่าน Pino ได้ทันที ความสามารถนี้มีประโยชน์อย่างมากเมื่อต้องแก้ไขข้อผิดพลาดของการเรียก API จากแอป Vue

import Fastify from 'fastify'

const app = Fastify({
  logger: true
})

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

CORS สำหรับเซิร์ฟเวอร์พัฒนา Vue

ระหว่างการพัฒนา แอป Vue จะทำงานจากต้นทางที่แตกต่างกัน เช่น localhost:5173 ให้ลงทะเบียน @fastify/cors และอนุญาตต้นทางนั้น เพื่อให้เบราว์เซอร์อนุญาตการเรียก API ข้ามต้นทาง

import cors from '@fastify/cors'

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

การให้บริการ dist ที่ build จาก Vue

ในสภาพแวดล้อมใช้งานจริง คุณจะให้บริการแอป Vue ที่คอมไพล์แล้ว ให้ลงทะเบียน @fastify/static โดยชี้ไปยังไดเรกทอรี dist เพื่อให้ Fastify ส่งมอบ index.html และไฟล์ทรัพยากร

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

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

เส้นทางสำรองสำหรับ SPA

SPA ของ Vue ใช้การกำหนดเส้นทางฝั่งไคลเอนต์ ดังนั้นเส้นทางที่ไม่รู้จักต้องส่งคืน index.html แทนที่จะตอบ 404 ให้เพิ่มเส้นทางสำรองแบบไวลด์การ์ดที่ให้บริการโครงแอป เพื่อให้ลิงก์ไปยังหน้าภายในทำงานได้เมื่อรีเฟรช

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

การจำกัดอัตรา

ปกป้อง API จากการใช้งานในทางที่ผิดด้วย @fastify/rate-limit โดยกำหนดจำนวนคำขอสูงสุดต่อช่วงเวลาสำหรับไคลเอนต์แต่ละราย

import rateLimit from '@fastify/rate-limit'

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

การตรวจสอบสคีมาบนเส้นทาง

Fastify ใช้ JSON Schema ในการตรวจสอบและจัดรูปแบบข้อมูลตามสคีมา กำหนดสคีมาของ body แล้ว Fastify จะปฏิเสธ payload ที่ไม่ถูกต้องด้วยรหัส 400 ก่อนที่ตัวจัดการของคุณจะทำงาน โดยไม่ต้องตรวจสอบด้วยตนเอง

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

สคีมาผลลัพธ์เพื่อความเร็ว

การเพิ่มสคีมา response ช่วยให้ Fastify จัดรูปแบบผลลัพธ์ด้วยตัวจัดรูปแบบที่คอมไพล์ไว้และทำงานรวดเร็ว อีกทั้งยังตัดฟิลด์ที่ไม่ได้อยู่ในสคีมาออก จึงช่วยเพิ่มทั้งประสิทธิภาพและความปลอดภัย

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

การจัดระเบียบเส้นทางเป็นปลั๊กอิน

Fastify สนับสนุนการแยกขอบเขตการทำงาน โดยจัดกลุ่มเส้นทางที่เกี่ยวข้องไว้ในปลั๊กอินและลงทะเบียนภายใต้คำนำหน้า วิธีนี้ช่วยให้ API ยังคงเป็นโมดูลเมื่อระบบเติบโตขึ้น

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

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

ลำดับการลงทะเบียนปลั๊กอิน

ลำดับมีความสำคัญ ควรลงทะเบียนปลั๊กอินที่ทำงานครอบคลุมหลายส่วน เช่น CORS และการจำกัดอัตรา ก่อนเส้นทาง และลงทะเบียนการให้บริการไฟล์สแตติกกับเส้นทางสำรองของ SPA เป็นลำดับสุดท้าย เพื่อให้จับคู่เส้นทาง API ก่อนที่เส้นทางครอบคลุมทั้งหมดจะส่ง 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

กลยุทธ์สำหรับการพัฒนาและใช้งานจริง

ในโหมดพัฒนา ให้เรียกใช้เซิร์ฟเวอร์พัฒนาของ Vite และ Fastify แยกกัน โดยอาศัย CORS ส่วนในสภาพแวดล้อมใช้งานจริง ให้ build แอป Vue แล้วให้ Fastify ให้บริการ dist จากต้นทางเดียวกัน จึงไม่ต้องใช้ CORS และมีเพียงกระบวนการเดียวที่นำไปติดตั้งได้

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจเกี่ยวกับแบ็กเอนด์ Fastify ของคุณ

สรุปทบทวน

คุณได้เรียนรู้การสร้างแบ็กเอนด์ Fastify สำหรับ SPA ของ Vue:

logger: true เปิดใช้การบันทึกคำขอแบบมีโครงสร้าง
@fastify/cors อนุญาตต้นทางของเซิร์ฟเวอร์พัฒนา Vue
@fastify/static ให้บริการ dist ที่ build แล้ว และเส้นทางสำรองแบบไวลด์การ์ดช่วยให้การกำหนดเส้นทางของ SPA ทำงานได้
@fastify/rate-limit ช่วยป้องกันการใช้งานในทางที่ผิด
JSON Schema ตรวจสอบ body และจัดรูปแบบผลลัพธ์ได้อย่างปลอดภัยและรวดเร็ว

คำถามที่พบบ่อย

บทเรียน “แบ็กเอนด์ Fastify สำหรับ SPA ของ Vue” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “แบ็กเอนด์ Fastify สำหรับ SPA ของ Vue” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “แบ็กเอนด์ Fastify สำหรับ SPA ของ Vue”

เส้นทาง Fastify, CORS การให้บริการบิลด์ Vue แบบสแตติก การจำกัดอัตรา และการตรวจสอบคำขอ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “แบ็กเอนด์ Fastify สำหรับ SPA ของ Vue” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

แบ็กเอนด์ Fastify สำหรับ SPA ของ Vue
การยืนยันตัวตนด้วย JWT: การเข้าสู่ระบบและการรีเฟรช
การเรียก API ที่ยืนยันตัวตนด้วยตัวดักจับของ Axios
การนำ Vue แบบฟูลสแตกขึ้นใช้งานจริง

← กลับไปที่ Vue Academy