2026-08-02 · 3 min read

10306241 Lab 4: สร้างเว็บด้วย Nginx และพัฒนา REST API ด้วย Node.js บน Docker

ITSCI LaboratoryLab-04 Docker Nginx NodeJS ExpressJS RESTAPI Postman

title: ทดลองการสร้างเว็บด้วย Nginx และ NodeJS โดยใช้ Docker description: เรียนรู้การรัน Nginx และ NodeJS บน Docker พร้อมสร้าง REST API ด้วย Express และทดสอบด้วย Postman

ทดลองการสร้างเว็บด้วย Nginx และ NodeJS โดยใช้ Docker

สารบัญ

บทนำ
#ติดตั้ง-postman
#รัน-nginx-ด้วย-docker
[รัน NodeJS Server ด้วย Docker]( #การส่งงาน

บทนำ

ในปฏิบัติการนี้ นักศึกษาจะได้เรียนรู้การสร้างและให้บริการเว็บไซต์โดยใช้ Docker ร่วมกับ Nginx และ Node.js

หัวข้อที่ศึกษา ได้แก่

การใช้งาน Container ด้วย Docker
การให้บริการ Static Website ด้วย Nginx
การสร้าง REST API ด้วย Express.js
การทดสอบ API ด้วย Postman
การบริหารจัดการ Web Service เบื้องต้น

💡 ถึงแม้เนื้อหารายวิชาจะกล่าวถึง Wix.com แต่ Lab นี้จะเน้นการทำงานกับ Docker และ Node.js Server เพื่อให้เข้าใจโครงสร้าง Web Application ในโลกจริงมากขึ้น

ติดตั้ง Postman

ดาวน์โหลด Postman จากลิงก์ด้านล่าง

👉 https://www.postman.com/downloads/

หลังจากติดตั้งเสร็จแล้ว ให้เปิดโปรแกรม Postman เพื่อใช้ทดสอบ API ในขั้นตอนถัดไป

รัน Nginx ด้วย Docker

1. สร้าง Container

BASH

docker run -d \
  --name myapp-static \
  -p 80:80 \
  -v C:/Users/ACER/html:/usr/share/nginx/html:ro \
  nginx:stable

2. สร้างไฟล์เว็บไซต์

สร้างไฟล์

TEXT

C:/Users/ACER/html/index.html

ตัวอย่างโค้ด

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  />
</head>
 
<body>
  <h1>Hello</h1>
</body>
</html>

3. ทดสอบการทำงาน

เปิด Browser ไปที่

TEXT

http://localhost:80

หากทำงานถูกต้อง จะเห็นข้อความ

TEXT

Hello

4. ปรับแต่งหน้าเว็บ

ให้แก้ไขหน้าเว็บโดยเพิ่มข้อมูลส่วนตัว

TEXT

รหัสนักศึกษา
ชื่อ - นามสกุล
ชื่อเล่น
ข้อมูลเพิ่มเติมอื่น ๆ

สิ่งที่สามารถเพิ่มเติมได้

รูปถ่าย
สีสันของเว็บไซต์
CSS ตกแต่งหน้าเว็บ
Layout ที่สวยงาม

✅ บันทึกภาพหน้าจอเพื่อนำส่ง Assignment

รัน NodeJS Server ด้วย Docker

1. เปิด Node Container

BASH

docker run --rm -it \
  -p 3000:3000 \
  -v C:/Users/ACER/myapp:/usr/src/app \
  -w /usr/src/app \
  node:18-alpine sh

หากสำเร็จจะปรากฏ

BASH

/usr/src/app #

2. สร้าง package.json

ไฟล์

TEXT

C:/Users/ACER/myapp/package.json

JSON

{
  "name": "test-api",
  "version": "1.0.0",
  "description": "A simple Express API for testing GET, POST, PUT, DELETE",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "^4.18.2"
  }
}

3. สร้าง app.js

ไฟล์

TEXT

C:/Users/ACER/myapp/app.js

JAVASCRIPT

const express = require("express");
const app = express();
const port = 3000;
 
app.use(express.json());
 
let items = [];
let nextId = 1;
 
app.get("/items", (req, res) => {
  res.json(items);
});
 
app.get("/items/:id", (req, res) => {
  const item = items.find(
    (i) => i.id === parseInt(req.params.id)
  );
 
  if (!item) {
    return res.status(404).json({
      error: "Item not found"
    });
  }
 
  res.json(item);
});
 
app.post("/items", (req, res) => {
  const { name } = req.body;
 
  if (!name) {
    return res.status(400).json({
      error: "Name is required"
    });
  }
 
  const newItem = {
    id: nextId++,
    name
  };
 
  items.push(newItem);
 
  res.status(201).json(newItem);
});
 
app.put("/items/:id", (req, res) => {
  const id = parseInt(req.params.id);
 
  const item = items.find(
    (i) => i.id === id
  );
 
  if (!item) {
    return res.status(404).json({
      error: "Item not found"
    });
  }
 
  item.name = req.body.name;
 
  res.json(item);
});
 
app.delete("/items/:id", (req, res) => {
  const id = parseInt(req.params.id);
 
  items = items.filter(
    (i) => i.id !== id
  );
 
  res.status(204).end();
});
 
app.listen(port, () => {
  console.log(
    `Test API listening at http://localhost:${port}`
  );
});

4. ติดตั้ง Package

ภายใน Container

BASH

npm install

5. เริ่มต้น Server

BASH

npm start

ผลลัพธ์

TEXT

Test API listening at http://localhost:3000

6. ทดสอบ API

เปิด Browser

TEXT

http://localhost:3000/items

หรือใช้ Postman

HTTP

GET /items

ตัวอย่างข้อมูลทดสอบ

Create Item

JSON

{
  "name": "ITSCI"
}

Endpoints ที่ต้องทดสอบ

Method	Endpoint
GET	/items
GET	/items/1
POST	/items
PUT	/items/1
DELETE	/items/1

การส่งงาน

Lab 4.1

ส่งภาพหน้าจอเว็บไซต์ข้อมูลส่วนตัวที่ออกแบบและตกแต่งเรียบร้อย

Lab 4.2

ส่งภาพหน้าจอการทำงานของ API จำนวน 5 รายการ

List All Items
Get Item By ID
Create Item
Delete Item
Edit Item

โดยสามารถใช้ Postman ในการทดสอบและบันทึกหน้าจอได้

✅ ควรแสดงทั้งหน้าจอ Postman และผลลัพธ์ที่แสดงจาก Browser เพื่อให้เห็นการเปลี่ยนแปลงของข้อมูลอย่างชัดเจน