reveal.js

# Environment Variables และ dotenv

Lesson 6 - Node.js และการโปรแกรมฝั่ง Server

**Environment Variables** คือค่าที่ส่งจากสภาพแวดล้อมภายนอกเข้าสู่โปรแกรม เช่น URL ฐานข้อมูลหรือ Secret Key ส่วน **dotenv** ช่วยโหลดค่าเหล่านี้จากไฟล์ `.env` ระหว่างพัฒนา

---

## Timeline/ประวัติศาสตร์

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
 subgraph Era1["ยุค Hardcode Config / In-code Secret"]
 A["DB_URL ใน source code เสี่ยงรั่วไหล"]
 end
 subgraph Era2["ยุค Environment Config / Twelve-factor"]
 B["process.env แยก config จาก code"]
 C["dotenv โหลด .env ตอนพัฒนา"]
 end
 subgraph Era3["ยุค Multi Environment / Deployment"]
 D["development/staging/production ค่าต่างตาม environment"]
 E["Secret Manager จัดการ secret จริง"]
 end
 A --> B --> C --> D --> E
</pre>

---

## แนวคิดสำคัญ

- **Hardcode Secret** ใน code เสี่ยงด้านความปลอดภัยและดูแลยาก
- **ติดตั้ง dotenv** ด้วย `npm install dotenv`
- **สร้างไฟล์ `.env`** สำหรับค่าจริงในเครื่องพัฒนา
- **โหลดค่า** ด้วย `require('dotenv').config()` หรือ `import 'dotenv/config'`
- **อ่านค่า** ผ่าน `process.env.DB_URL`, `process.env.JWT_SECRET`
- **`.env.example`** เป็น Template ที่ commit เข้า Git ได้
- **`.gitignore`** ควรเพิ่ม `.env` เพื่อป้องกันการ Push Secret
- **Environment แยกกัน** เช่น development, staging, production

---

## ตารางไฟล์ Config

| ไฟล์/ตัวแปร | Commit ได้ไหม | หน้าที่ |
|---|---|---|
| `.env` | ไม่ควร | เก็บค่าจริงและ secret |
| `.env.example` | ควร | บอกว่าต้องมีตัวแปรใดบ้าง |
| `.gitignore` | ควร | ป้องกัน commit `.env` |
| `process.env` | ไม่ใช่ไฟล์ | อ่านค่าจาก environment |

---

## Mermaid Diagram: dotenv Flow

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart TD
 A[".env ค่าจริงในเครื่อง"] --> B["dotenv.config โหลดค่า"]
 B --> C["process.env ตัวแปร runtime"]
 C --> D["Node App ใช้งาน config"]
 E[".env.example template"] --> F["Developer สร้าง .env เอง"]
 G[".gitignore กัน secret หลุด"] --> A
</pre>

---

## Code Example

```text
# .env
# ไฟล์นี้ห้าม commit เข้า Git
PORT=3000
DB_URL=mongodb://localhost:27017/course
JWT_SECRET=change-me-in-development
NODE_ENV=development
```

```text
# .env.example
# ไฟล์ template สำหรับบอกตัวแปรที่ระบบต้องการ
PORT=
DB_URL=
JWT_SECRET=
NODE_ENV=
```

```text
# .gitignore
node_modules
.env
```

```js
// config-demo.mjs
// โหลด dotenv และอ่านค่าจาก process.env
import 'dotenv/config';
import express from 'express';

const app = express();
const port = process.env.PORT || 3000;

app.get('/health', (req, res) => {
  res.json({
    status: 'ok',
    env: process.env.NODE_ENV,
    hasDbUrl: Boolean(process.env.DB_URL)
  });
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

// ตัวอย่างการใช้งาน:
// npm install express dotenv
// node config-demo.mjs
// เปิด http://localhost:3000/health
```

---

## กิจกรรมท้ายบท

- ติดตั้ง `dotenv`
- สร้าง `.env`, `.env.example` และเพิ่ม `.env` ใน `.gitignore`
- อ่านค่า `PORT` และ `DB_URL` จาก `process.env`
- อธิบายค่าที่ต่างกันระหว่าง development, staging และ production

---

## End

<a href="/web-programming/10-node-server/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>