Vite Server API

Vite's Server API ช่วยให้คุณกำหนดค่าการทำงานของ development server ได้อย่างละเอียด เพื่อให้การพัฒนาเว็บแอปพลิเคชันเป็นไปอย่างมีประสิทธิภาพและตอบโจทย์ความต้องการที่หลากหลาย

server.host

กำหนด host ที่จะใช้สำหรับ development server

import { defineConfig } from "vite";

export default defineConfig({
  server: {
    // ระบุ host ที่จะใช้
    // - 'localhost' (ค่าเริ่มต้น) - อนุญาตเฉพาะเครื่องตัวเอง
    // - '0.0.0.0' - อนุญาตการเข้าถึงจากเครือข่ายท้องถิ่น
    // - false - ใช้ค่าเริ่มต้นของระบบ
    host: "0.0.0.0",
  },
});

server.port and server.strictPort

กำหนดพอร์ตที่ใช้สำหรับ development server

import { defineConfig } from "vite";

export default defineConfig({
  server: {
    // ระบุพอร์ตที่ต้องการใช้
    port: 3000,
    // true: ไม่ค้นหาพอร์ตที่ว่างโดยอัตโนมัติ
    // false: หากพอร์ตถูกใช้งาน จะหาและใช้พอร์ตถัดไปที่ว่าง
    strictPort: true,
  },
});

server.https

เปิดใช้งาน HTTPS สำหรับ development server

import fs from "fs";
import { defineConfig } from "vite";

export default defineConfig({
  server: {
    // เปิดใช้งาน HTTPS
    https: {
      // ระบุ path ไปยังไฟล์ key และ cert
      key: fs.readFileSync("path/to/key.pem"),
      cert: fs.readFileSync("path/to/cert.pem"),
    },
  },
});

server.allowedHosts

ระบุ host ที่อนุญาตให้เข้าถึง development server

import { defineConfig } from "vite";

export default defineConfig({
  server: {
    allowedHosts: [
      "example.com",
      // อนุญาต subdomains
      ".example.com",
      // ใช้ regular expression
      /^example\d+\.com$/,
    ],
  },
});

server.proxy

กำหนดค่า proxy สำหรับ development server

import { defineConfig } from "vite";

export default defineConfig({
  server: {
    proxy: {
      // ตัวอย่างที่ 1: Proxy ง่ายๆ
      "/api": "http://localhost:3000",
      // ตัวอย่างที่ 2: กำหนดค่าเพิ่มเติม
      "/api2": {
        target: "http://jsonplaceholder.typicode.com",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api2/, ""),
      },
      // ตัวอย่างที่ 3: ใช้ RegExp
      "^/api/.*": {
        target: "http://localhost:3000",
        changeOrigin: true,
      },
    },
  },
});

server.cors

เปิดใช้งาน CORS สำหรับ development server

import { defineConfig } from "vite";

export default defineConfig({
  server: {
    // เปิดใช้งาน CORS พร้อมกำหนดค่าเพิ่มเติม
    cors: {
      origin: "https://example.com",
      methods: "GET,POST,PUT,DELETE",
      allowedHeaders: "Content-Type,Authorization",
      credentials: true,
    },
  },
});

server.headers

กำหนด HTTP headers สำหรับ development server

import { defineConfig } from "vite";

export default defineConfig({
  server: {
    headers: {
      // กำหนด custom headers
      "X-Custom-Header": "value",
      // เปิดใช้งาน CORS ผ่าน headers
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers":
        "X-Requested-With, content-type, Authorization",
    },
  },
});

server.hmr

กำหนดค่า Hot Module Replacement

import { defineConfig } from "vite";

export default defineConfig({
  server: {
    hmr: {
      // เปิดใช้งาน HMR overlay
      overlay: true,
      // กำหนด protocol สำหรับ HMR
      protocol: "ws",
      // ระบุ host และ port สำหรับ HMR
      host: "localhost",
      port: 24678,
    },
  },
});

server.fs

ควบคุมการเข้าถึงไฟล์ระบบ

import path from "path";
import { defineConfig } from "vite";

export default defineConfig({
  server: {
    fs: {
      // เปิดใช้งาน strict file system access
      strict: true,
      // ระบุ path ที่อนุญาตให้เข้าถึง
      allow: [
        // อนุญาตให้เข้าถึง root directory
        process.cwd(),
        // อนุญาตให้เข้าถึง node_modules
        path.join(process.cwd(), "node_modules"),
      ],
      // ระบุไฟล์หรือไดเรกทอรีที่ไม่อนุญาตให้เข้าถึง
      deny: [
        ".env",
        ".env.*",
        "*.{pem,crt}",
      ],
    },
  },
});

server.middlewareMode

เปิดใช้งานโหมด middleware สำหรับการรวมกับเฟรมเวิร์คอื่นๆ

import express from "express";
import { createServer as createViteServer } from "vite";

async function createServer() {
  const app = express();

  // สร้าง Vite server ในโหมด middleware
  const vite = await createViteServer({
    server: {
      middlewareMode: "ssr", // หรือ 'html' ขึ้นกับความต้องการ
    },
  });

  // ใช้ Vite's connect instance เป็น middleware
  app.use(vite.middlewares);

  // เส้นทางอื่นๆ ของแอปของคุณ
  app.get("*", async (req, res) => {
    try {
      // 1. อ่าน index.html
      let template = fs.readFileSync(
        path.resolve(__dirname, "index.html"),
        "utf-8",
      );

      // 2. ใช้ Vite ในการแปลง HTML
      template = await vite.transformIndexHtml(req.url, template);

      // 3. Render แอปของคุณ
      const { render } = await vite.ssrLoadModule("/src/entry-server.ts");
      const appHtml = await render({ url: req.url });

      // 4. แทรก HTML ที่ render แล้วเข้าไปใน template
      const html = template.replace(`<!--ssr-outlet-->`, appHtml);

      // 5. ส่ง HTML กลับไปยัง client
      res.status(200).set({ "Content-Type": "text/html" }).end(html);
    } catch (e) {
      // ถ้าเกิดข้อผิดพลาด ให้ Vite แก้ไข stack trace
      vite.ssrFixStacktrace(e);
      console.error(e);
      res.status(500).end(e.message);
    }
  });

  // เริ่มต้นเซิร์ฟเวอร์
  app.listen(3000, () => {
    console.log("Server is running on http://localhost:3000");
  });
}

createServer();