Boss Battle: Server ที่พร้อมทำงานจริง (nodemon + dotenv)

เป้าหมายของ Boss นี้: ทำให้สภาพแวดล้อมการทำงานสะดวกด้วย nodemon และ dotenv แล้วประกอบทุกอย่างใน Chapter 2 เข้าด้วยกัน

1. Learning Objective

จบ Boss นี้คุณจะ

• ใช้ nodemon ให้ Server รีสตาร์ทเองเมื่อแก้โค้ด
• ใช้ .env เก็บค่าตั้งค่าแยกออกจากโค้ด
• เข้าใจว่าทำไมต้องแยก config ออกจากโค้ด (และทำไมห้าม commit .env)
• เขียน npm scripts ให้รันโปรเจคด้วยคำสั่งสั้นๆ

2. Theory ตอนที่ 1 — nodemon แก้ปัญหาที่คุณเจอมาแล้ว

ตลอด Mission 2-3 คุณต้องกด Ctrl+C แล้ว node index.js ใหม่ทุกครั้งที่แก้โค้ด — น่ารำคาญมาก และจะยิ่งน่ารำคาญขึ้นเรื่อยๆ

nodemon คือโปรแกรมที่คอย จับตาดูไฟล์ ถ้าไฟล์ไหนถูกแก้และ save มันจะรีสตาร์ท Server ให้เอง

   ไม่มี nodemon                        มี nodemon
+---------------------+          +----------------------------+
| แก้โค้ด               |          | แก้โค้ด                      |
| save                |          | save                       |
| Ctrl + C            |          |   (nodemon เห็นว่าไฟล์เปลี่ยน) |
| node index.js       |          |   (รีสตาร์ทให้อัตโนมัติ)        |
| รีเฟรชเบราว์เซอร์      |          | รีเฟรชเบราว์เซอร์             |
+---------------------+          +----------------------------+

ติดตั้ง

npm install --save-dev nodemon

--save-dev แปลว่า "ใช้เฉพาะตอนพัฒนา ไม่ต้องเอาขึ้น production" — จะไปโผล่ใน devDependencies แทน dependencies

3. Theory ตอนที่ 2 — dotenv และเหตุผลที่ต้องมี

ตอนนี้เราเขียน const PORT = 3000; ไว้ในโค้ดตรงๆ — เรียกว่า hardcode ซึ่งมีปัญหา 3 ข้อ

1. เครื่องแต่ละที่ต้องการค่าต่างกัน เครื่องคุณใช้ Port 3000 เซิร์ฟเวอร์จริงอาจใช้ 8080
2. ค่าลับห้ามอยู่ในโค้ด คอร์สหน้าเราจะมีรหัสผ่าน Database และ JWT Secret — ถ้าเขียนไว้ในไฟล์ แล้ว push ขึ้น GitHub = แจกให้คนทั้งโลก
3. แก้ค่าไม่ควรต้องแก้โค้ด เปลี่ยน Port ไม่ควรต้องไปแตะไฟล์โปรแกรม

dotenv คือ package ที่อ่านไฟล์ .env แล้วโยนค่าเข้าไปใน process.env ให้

flowchart LR
    A[".env<br/>PORT=3000<br/>DB_PASSWORD=secret"] --> B["dotenv/config<br/>อ่านตอนโปรแกรมเริ่ม"]
    B --> C["process.env.PORT<br/>process.env.DB_PASSWORD"]
    C --> D["โค้ดของเราหยิบไปใช้"]
    E[".gitignore<br/>มี .env อยู่"] -.->|"กัน .env ไม่ให้ขึ้น git"| A
    style A fill:#5c4d2d,stroke:#eab308,color:#fff
    style E fill:#5c2d2d,stroke:#ef4444,color:#fff

4. Live Coding

ขั้นที่ 1 — ติดตั้ง

npm install dotenv
npm install --save-dev nodemon

ขั้นที่ 2 — สร้างไฟล์ .env ที่ราก (ระดับเดียวกับ package.json)

PORT=3000
APP_NAME=Books API

กติกาของไฟล์ .env

• KEY=value บรรทัดละคู่
• ห้ามมีช่องว่างรอบ = → PORT = 3000 ผิด
• ห้ามใส่ quote → APP_NAME="Books API" จะได้ค่าติด " มาด้วย
• ห้ามใส่ ; ปิดท้าย
• ทุกค่าที่อ่านออกมาเป็น string เสมอ แม้จะเขียนเป็นตัวเลข

ขั้นที่ 3 — เพิ่ม .env ลง .gitignore (ข้อนี้พลาดไม่ได้)

node_modules
.env

ขั้นที่ 4 — ใช้ใน index.js

import "dotenv/config";   // ⚠️ ต้องเป็นบรรทัดแรกสุด ก่อน import อื่นทั้งหมด
import express from "express";

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

ทำไม import "dotenv/config" ต้องอยู่บนสุด? เพราะ import อื่นๆ อาจต้องใช้ค่าจาก process.env ทันทีตอนถูกโหลด ถ้าโหลด dotenv ทีหลังจะได้ undefined

ทำไมต้องมี || 3000? เป็นค่าสำรอง — ถ้าหาไฟล์ .env ไม่เจอ หรือลืมใส่ PORT โปรแกรม จะยังรันได้ ไม่พังทั้งระบบ

ขั้นที่ 5 — เพิ่ม npm scripts ใน package.json

จำ "start": "node index.js" ที่ใส่ไว้ตั้งแต่ Mission 1 ได้ไหม — คราวนี้เพิ่มปุ่มที่สองชื่อ dev

"scripts": {
  "start": "node index.js",
  "dev": "nodemon index.js"
}

จากนี้ไปตอนพัฒนาใช้คำสั่งเดียวคือ

npm run dev

ทำไมเก็บ start ไว้ด้วย? เพราะทั้งสองปุ่มมีหน้าที่ต่างกัน — dev ใช้ตอนเขียนโค้ด (มี nodemon คอยรีสตาร์ทให้) ส่วน start คือคำสั่งที่ใช้ตอนเอาขึ้นเซิร์ฟเวอร์จริง ซึ่งไม่ควรมี nodemon ติดไปด้วย

เทียบกับที่เคยเจอ: เหมือน npm run dev ของ Next.js เป๊ะ — เป็นแค่ชื่อย่อของคำสั่งยาวๆ ที่เขียนไว้ใน package.json

ขั้นที่ 6 — บอก nodemon ว่าอย่าไปยุ่งกับโฟลเดอร์ข้อมูล

เพิ่มก้อนนี้ใน package.json (ระดับเดียวกับ "scripts")

"nodemonConfig": {
  "ignore": ["data/*"]
}

ทำไมต้องใส่ตั้งแต่ตอนนี้? เพราะ Chapter 3 เราจะเก็บข้อมูลไว้ในไฟล์ data/books.json แล้ว API จะเขียนทับไฟล์นั้นทุกครั้งที่มีคนเพิ่ม/แก้/ลบข้อมูล

ถ้าไม่ใส่บรรทัดนี้ nodemon จะเห็นว่าไฟล์เปลี่ยนแล้ว รีสตาร์ท Server กลางอากาศทุกครั้งที่ยิง POST — เป็นอาการที่ไล่หาสาเหตุยากมากถ้าไม่รู้มาก่อน ใส่กันไว้ตั้งแต่วันนี้เลย

5. Common Mistakes

6. Summary

• nodemon = รีสตาร์ท Server ให้อัตโนมัติเมื่อแก้ไฟล์ (dev only)
• dotenv = อ่าน .env เข้า process.env — แยก config ออกจากโค้ด
• .env ต้องอยู่ใน .gitignore เสมอ และค่าที่อ่านได้เป็น string เสมอ
• npm scripts ทำให้รันโปรเจคด้วย npm run dev สั้นๆ — dev ตอนพัฒนา / start ตอนขึ้นจริง
• nodemonConfig.ignore = กัน nodemon รีสตาร์ทเวลาโปรแกรมเขียนไฟล์ข้อมูลเอง (ต้องมีก่อนเข้า Chapter 3)
• จบ Chapter 2 แล้ว — คุณมี Server ที่รันได้ แก้แล้วรีสตาร์ทเอง และตั้งค่าแยกจากโค้ด แต่ยังไม่มีข้อมูล Chapter 3 จะใส่ข้อมูลจริงเข้าไปทำ CRUD ครบวงจร