Wrikka Learn

Dark mode

การจัดการ Environment Variables ​

Built-in Environment Variables ​

Node.js มี built-in object process.env สำหรับการเข้าถึง environment variables

src/config.ts
ts
// ตัวอย่างการใช้งาน process.env
const nodeEnv = process.env.NODE_ENV || "development";
const port = process.env.PORT ? parseInt(process.env.PORT) : 3000;

// Type-safe environment variables
interface EnvVars {
  NODE_ENV: "development" | "production" | "test";
  PORT?: string;
  DATABASE_URL: string;
}

const env = process.env as unknown as EnvVars;

export const config = {
  isProd: env.NODE_ENV === "production",
  port,
  databaseUrl: env.DATABASE_URL,
};

การใช้ dotenv ​

dotenv เป็น package ที่ช่วยโหลด environment variables จากไฟล์ .env เข้าไปใน process.env

.env
sh
NODE_ENV=development
PORT=3000
DATABASE_URL=postgres://user:pass@localhost:5432/dbname
JWT_SECRET=your-secret-key
src/config.ts
ts
import dotenv from "dotenv";
import path from "path";

// โหลด environment variables จาก .env file
dotenv.config({
  path: path.resolve(process.cwd(), ".env"),
});

// หรือโหลดตาม NODE_ENV
// dotenv.config({
//   path: path.resolve(process.cwd(), `.env.${process.env.NODE_ENV || 'development'}`)
// })

// ใช้งาน environment variables ผ่าน process.env
const config = {
  env: process.env.NODE_ENV || "development",
  port: process.env.PORT || 3000,
  databaseUrl: process.env.DATABASE_URL,
  jwtSecret: process.env.JWT_SECRET,
};

export default config;

Vite Environment Variables ​

Vite ใช้ import.meta.env แทน process.env และมี built-in variables บางตัว

.env
sh
# เริ่มต้นด้วย VITE_ เพื่อให้ Vite expose ให้ client-side
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My Awesome App
src/vite-env.d.ts
ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_URL: string;
  readonly VITE_APP_TITLE: string;
  // เพิ่ม environment variables อื่นๆ ที่ใช้ในแอป
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}
src/main.ts
ts
// ใช้งาน Vite environment variables
console.log("API URL:", import.meta.env.VITE_API_URL);
document.title = import.meta.env.VITE_APP_TITLE;

ข้อควรระวัง ​

  • อย่า commit ไฟล์ .env ที่มีข้อมูลสำคัญขึ้น git

    • เพิ่ม .env ลงใน .gitignore
    • ใช้ .env.example เป็น template สำหรับการตั้งค่าเริ่มต้น

  • Type Safety

    • ควรประกาศ type สำหรับ environment variables
    • ตรวจสอบค่าที่จำเป็น (required) ก่อนใช้งาน

  • Security

  • Performance

    • เก็บค่าที่ใช้บ่อยในตัวแปรเพื่อเพิ่มประสิทธิภาพ
    • หลีกเลี่ยงการอ่าน process.env ซ้ำๆ ใน hot code paths