วัตถุประสงค์ของโปรเจ็กต์นี้
เว็บไซต์ PriceMatch พัฒนาขึ้นเพื่อวัตถุประสงค์ในการศึกษาเท่านั้น โดยใช้เครื่องมือ AI เป็นตัวช่วยในการสร้างและออกแบบ แรงบันดาลใจมาจากความต้องการช่วยเหลือธุรกิจของครอบครัวให้มีช่องทางออนไลน์ โดยไม่ต้องเสียค่าใช้จ่ายสูง ผ่านการเรียนรู้ด้วยตนเองตั้งแต่การเช่า Server ไปจนถึงการ Deploy เว็บไซต์จริง
⚠️ เนื้อหาสินค้าและราคาในเว็บไซต์นี้เป็นข้อมูลสมมติเพื่อการศึกษาเท่านั้น
👨💻 Developer & System Admin
นักพัฒนาโปรเจ็กต์
นักเรียน · Full-Stack Developer · DevOps Enthusiast
ผมเป็นนักเรียนที่ทำโปรเจ็กต์นี้คนเดียวตั้งแต่ต้นจนจบ ทั้งการวางแผน ออกแบบ สั่งการAI และ Deploy ขึ้น Server จริง เป้าหมายคือเรียนรู้การทำงานของ Web Infrastructure จริงๆ และนำความรู้นี้มาช่วยธุรกิจครอบครัวได้ในอนาคต
☁️ VPS Cloud
🔒 Firewall
🔀 Port Forwarding
⚡ Nginx Config
🤖 AI-Assisted Dev
🛠️ สิ่งที่ทำในโปรเจ็กต์นี้
☁️
เช่า VPS Cloud
เช่าเครื่อง Virtual Private Server เพื่อรันเว็บไซต์บน Cloud จริง ไม่ใช่ Localhost
🔒
จัดการ Firewall
กำหนด Rules ของ Firewall เพื่อป้องกัน Server และเปิดเฉพาะ Port ที่จำเป็น
🔀
Port Forwarding
ตั้งค่า Port Forwarding เพื่อส่ง Traffic จาก Port 80/443 ไปยัง Application ที่ถูกต้อง
⚙️
ติดตั้ง & Config Nginx
ติดตั้ง Nginx เป็น Web Server และเขียน Config เพื่อ Serve ไฟล์ HTML, SSL และ Reverse Proxy
🤖
AI-Assisted Design
ใช้เครื่องมือ AI ช่วยออกแบบ UI/UX และสร้างโค้ด HTML/CSS เพื่อเพิ่มประสิทธิภาพการพัฒนา
🚀
Deploy จริง
นำเว็บไซต์ขึ้น Server จริงผ่าน Nginx ให้สามารถเข้าถึงได้จากอินเทอร์เน็ตทั่วโลก
N
Nginx คืออะไร? — ความรู้เบื้องต้น
High-Performance Web Server
Nginx เป็น Web Server ที่เร็วและเบา ออกแบบมาให้รองรับ Connection จำนวนมากพร้อมกันได้ดีกว่า Apache
Reverse Proxy
ทำหน้าที่เป็น "ตัวกลาง" รับ Request จาก Client แล้วส่งต่อไปยัง Backend Server เช่น Node.js หรือ Python
Load Balancing
กระจาย Traffic ไปยังหลาย Server เพื่อป้องกัน Overload และเพิ่ม Availability ของระบบ
SSL/TLS Termination
จัดการ HTTPS Certificate ให้เว็บไซต์ปลอดภัย ใช้ร่วมกับ Let's Encrypt ได้ฟรี
# ตัวอย่าง Nginx Config พื้นฐานที่ใช้ในโปรเจ็กต์นี้
server {
listen 80;
server_name pricematch.example.com;
# Serve ไฟล์ HTML จาก directory
root /var/www/pricematch;
index index.html price-compare.html;
location / {
try_files $uri $uri/ =404;
}
# Redirect HTTP → HTTPS
return 301 https://$host$request_uri;
}