การเพิ่มเว็บไซต์ไฟล์ Static

ServBay เป็นเครื่องมือสภาพแวดล้อมพัฒนาเว็บบนเครื่องที่ทรงพลัง รองรับหลายภาษาและฐานข้อมูล ไม่เพียงแต่เว็บไซต์แบบไดนามิกเท่านั้น ServBay ยังเหมาะอย่างยิ่งสำหรับการโฮสต์และทดสอบเว็บไซต์ Static เช่นหน้าเว็บหรือแอป Front-end ที่สร้างด้วย HTML, CSS และ JavaScript

บทความนี้จะแนะนำวิธีการเพิ่มและตั้งค่าเว็บไซต์ไฟล์ Static ใน ServBay

ภาพรวม

เว็บไซต์ Static ประกอบด้วยไฟล์ที่ให้บริการจากเว็บเซิร์ฟเวอร์โดยตรงโดยไม่เกี่ยวข้องกับการทำงานของสคริปต์ฝั่งเซิร์ฟเวอร์ (เช่น PHP, Node.js, Python ฯลฯ) เว็บไซต์ประเภทนี้มักจะประกอบด้วยไฟล์ HTML, สไตล์ชีต CSS, ไฟล์ JavaScript, รูปภาพ, ฟอนต์ และทรัพยากรอื่นๆ

ใช้ ServBay เพื่อโฮสต์เว็บไซต์ Static บนเครื่องจะช่วยให้คุณพัฒนา แก้ไขข้อผิดพลาด และทดสอบได้สะดวกโดยเฉพาะเมื่อต้องการจำลองโดเมนแบบ production, เชื่อมต่อ HTTPS หรือทดสอบ CORS (Cross-Origin Resource Sharing) ในสภาพแวดล้อมจริง

กรณีใช้งาน

พัฒนาและทดสอบโปรเจกต์ Front-end (HTML/CSS/JS) ล้วนๆ
โฮสต์เอกสาร Static หรือเว็บไซต์บล็อกแบบ Static
ทดสอบว่าส่วนตอบสนองไฟล์ Static ของเว็บเซิร์ฟเวอร์แต่ละตัว (Caddy/Nginx) แตกต่างกันอย่างไร
จำลองโดเมนและ HTTPS ในสภาพแวดล้อมเครื่องของคุณ
ทดสอบไฟล์ build ของเฟรมเวิร์ก Front-end (เช่น React, Vue, Angular)

ข้อกำหนดเบื้องต้น

คุณได้ติดตั้งและใช้งาน ServBay บน macOS เรียบร้อยแล้ว
คุณมีไฟล์เว็บไซต์ Static ที่ต้องการนำมาใช้งาน

ขั้นตอนการดำเนินการ

ทำตามขั้นตอนดังต่อไปนี้เพื่อเพิ่มเว็บไซต์ไฟล์ Static ของคุณลงใน ServBay

ขั้นตอนที่ 1: เตรียมไฟล์เว็บไซต์ของคุณ

ก่อนอื่น ให้แน่ใจว่าไฟล์เว็บไซต์ Static ของคุณ (เช่น index.html, style.css, script.js ฯลฯ) ถูกเก็บไว้ในโฟลเดอร์แยกต่างหาก

แนะนำให้สร้างโฟลเดอร์เว็บไซต์ของคุณไว้ในไดเร็กทอรีเริ่มต้นของ ServBay คือ /Applications/ServBay/www เพื่อความเป็นระเบียบ เช่น หากต้องการสร้างเว็บไซต์ชื่อว่า my-static-site ให้สร้างโฟลเดอร์ชื่อ my-static-site ภายใต้ /Applications/ServBay/www/ แล้วนำไฟล์เว็บไซต์ทั้งหมดมาวางในโฟลเดอร์นี้

bash

# สร้างไดเร็กทอรีตัวอย่างผ่าน Terminal
mkdir -p /Applications/ServBay/www/servbay-static-demo
cd /Applications/ServBay/www/servbay-static-demo

# สร้างไฟล์ index.html แบบง่าย
echo '<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ตัวอย่างเว็บไซต์ Static ของ ServBay</title>
    <style>
        body { font-family: sans-serif; text-align: center; margin-top: 50px; }
        h1 { color: #333; }
    </style>
</head>
<body>
    <h1>ขอแสดงความยินดี! คุณตั้งค่าเว็บไซต์ Static กับ ServBay สำเร็จแล้ว!</h1>
    <p>คุณกำลังเข้าถึงหน้านี้ผ่าน ServBay บนเครื่องของคุณเอง</p>
</body>
</html>' > index.html

# ขณะนี้โครงสร้างไฟล์ของคุณจะเป็นประมาณนี้:
# /Applications/ServBay/www/servbay-static-demo/index.html

ขั้นตอนที่ 2: เพิ่มเว็บไซต์ใน ServBay

เปิดแอปพลิเคชัน ServBay
ในแถบเมนูด้านซ้าย คลิก เว็บไซต์ (หมายเหตุ: ในเวอร์ชันเก่าอาจแสดงเป็น "โฮสต์" แต่เวอร์ชันล่าสุดเปลี่ยนชื่อเป็น "เว็บไซต์")
ที่ด้านล่างของหน้ารายการเว็บไซต์ ให้คลิกปุ่ม เพิ่ม เพื่อเปิดหน้าต่างการตั้งค่า

ขั้นตอนที่ 3: กำหนดค่าการตั้งค่าเว็บไซต์

ในหน้าต่างตั้งค่า ให้กรอกหรือเลือกข้อมูลดังต่อไปนี้

โดเมน (Domain): ใส่ชื่อโดเมนที่คุณต้องการใช้เข้าถึงเว็บไซต์นี้บนเครื่องของคุณ แนะนำให้ใช้โดเมนที่ลงท้ายด้วย .servbay.demo เช่น static.servbay.demo หรือ my-static-site.servbay.demo โดย ServBay จะจัดการการชี้โดเมน .servbay.demo มาที่เครื่องของคุณโดยอัตโนมัติ ไม่ต้องแก้ไขไฟล์ hosts เอง
- คำอธิบาย: การใช้โดเมน .servbay.demo จะช่วยเลี่ยงปัญหาซ้ำกับโดเมนจริงบนอินเทอร์เน็ต และ DNS ภายในของ ServBay จะชี้โดเมนนี้มายังเครื่องคุณเสมอ
เส้นทาง (Path): คลิกไอคอนโฟลเดอร์ทางขวาแล้วเลือกไดเรกทอรีที่คุณสร้างในขั้นตอนที่ 1 เช่น /Applications/ServBay/www/servbay-static-demo/
- คำอธิบาย: เส้นทาง (Path) คือไดเรกทอรีหลักของเว็บไซต์หรือ Document Root ที่เว็บเซิร์ฟเวอร์ (Caddy หรือ Nginx) จะดึงไฟล์ขึ้นมาแสดง เมื่อเข้าถึง http://static.servbay.demo/ เว็บเซิร์ฟเวอร์จะค้นหา index.html หรือไฟล์หน้าแรกในไดเรกทอรีนี้ อย่าลืมเลือก โฟลเดอร์ ไม่ใช่ไฟล์เดี่ยว (เช่น index.html)
พอร์ต (Port): ปกติปล่อยเป็นค่ามาตรฐาน HTTP คือ 80 และ HTTPS คือ 443 ถ้าต้องการใช้พอร์ตเฉพาะ ให้ระบุที่นี่
เว็บเซิร์ฟเวอร์ (Web Server): เลือกเว็บเซิร์ฟเวอร์ที่คุณต้องการ สำหรับเว็บไซต์ Static ทั้ง Caddy และ Nginx ล้วนเป็นตัวเลือกที่ดี
- Caddy: กำหนดค่าง่าย รองรับ HTTP/2 และตั้งค่า HTTPS อัตโนมัติ (ร่วมกับ ServBay User CA) และเป็นตัวเลือกแนะนำตามค่าเริ่มต้นของ ServBay
- Nginx: สมรรถนะสูง ตั้งค่าได้ยืดหยุ่น และนิยมใช้ใน production จริง
- เลือกอย่างใดอย่างหนึ่ง
PHP เวอร์ชัน (PHP Version): สำหรับเว็บไซต์ Static ไม่ต้องใช้ PHP ให้เลือก None
Node.js เวอร์ชัน (Node.js Version): ไม่จำเป็น ให้เลือก None
Python เวอร์ชัน (Python Version): ไม่จำเป็น ให้เลือก None
Go เวอร์ชัน (Go Version): ไม่จำเป็น ให้เลือก None
Java เวอร์ชัน (Java Version): ไม่จำเป็น ให้เลือก None
SSL: หากคุณต้องการทดสอบเว็บไซต์ Static ผ่าน HTTPS ให้ติ๊กเลือก ServBay จะใช้ certificate authority (ServBay User CA) ที่มีในตัว พร้อมออกใบรับรองและติดตั้งรับรอง Local SSL ให้อัตโนมัติ สะดวกสำหรับงานทดสอบ HTTPS
CORS: หากเว็บไซต์ต้องการอนุญาต Cross-Origin เช่นโหลดฟอนต์หรือ API จากโดเมน local อื่น สามารถเปิดการตั้งค่านี้ได้ ServBay รองรับการตั้งค่า CORS header สำหรับแต่ละเว็บไซต์

ขั้นตอนที่ 4: บันทึกและนำการเปลี่ยนแปลงไปใช้

หลังกรอกทุกอย่างครบ ให้กดปุ่ม บันทึก ด้านล่างหน้าต่างตั้งค่า
กลับไปที่หน้ารายชื่อเว็บไซต์ของ ServBay จะเห็นรายการเว็บไซต์ใหม่ที่เพิ่งเพิ่ม
กดปุ่ม นำการเปลี่ยนแปลงไปใช้ ด้านบนรายการเว็บไซต์
- คำอธิบาย: การกด นำการเปลี่ยนแปลงไปใช้ จะทำให้ ServBay โหลดไฟล์คอนฟิกเว็บเซิร์ฟเวอร์ (Caddy หรือ Nginx) ใหม่เพื่อให้ค่าเว็บไซต์ล่าสุดถูกนำไปใช้ หากไม่ทำขั้นตอนนี้ เว็บที่เพิ่มใหม่จะยังเข้าใช้งานไม่ได้

การตรวจสอบผลการตั้งค่า

หลังจากตั้งค่าและนำการเปลี่ยนแปลงไปใช้แล้ว เปิดเว็บเบราว์เซอร์ของคุณแล้วพิมพ์โดเมนที่ตั้งไว้ (เช่น http://static.servbay.demo หรือ https://static.servbay.demo ถ้าเปิด SSL) เพื่อทดสอบการเข้าถึง

ถ้าตั้งค่าถูกต้อง เว็บเบราว์เซอร์จะแสดงเนื้อหาเว็บไซต์ Static เช่นหน้า index.html ที่สร้างไว้เป็นตัวอย่างในขั้นต้น

ข้อควรระวัง

ตรวจสอบว่า เส้นทาง (Path) ที่ตั้งไว้ถูกต้องคือโฟลเดอร์หลักของไฟล์เว็บไซต์นั้นๆ
ทุกครั้งที่เพิ่ม แก้ไข หรือลบเว็บไซต์ ต้องกด นำการเปลี่ยนแปลงไปใช้ ให้เรียบร้อย มิเช่นนั้นจะไม่เห็นผล
สำหรับเว็บไซต์ Static ให้ตั้งค่าภาษาเว็บเซิร์ฟเวอร์เช่น PHP, Node.js เป็นต้นเป็น None เสมอ เพื่อประหยัดทรัพยากรป้องกันความเสี่ยงด้านความปลอดภัยที่ไม่จำเป็น
หากติดปัญหาเข้าเว็บไซต์ไม่ได้ ตรวจสอบให้แน่ใจว่า ServBay ทำงานอยู่, ตรวจสอบสถานะเว็บเซิร์ฟเวอร์ (Caddy/Nginx) และพิมพ์ชื่อโดเมนในเบราว์เซอร์ให้ตรงตามที่ตั้งค่า

คำถามที่พบบ่อย (FAQ)

ถาม: เข้าโดเมนที่ตั้งไว้แล้วขึ้นว่า“ไม่สามารถเข้าถึงเว็บไซต์นี้” หรือ “ไม่พบเซิร์ฟเวอร์” ต้องทำอย่างไร?

ตอบ:

ตรวจสอบว่า ServBay กำลังเปิดใช้งานอยู่
แน่ใจว่าได้กด นำการเปลี่ยนแปลงไปใช้ ใน ServBay แล้ว
ตรวจสอบโดเมนที่พิมพ์ในเบราว์เซอร์ว่าเหมือนกับที่กำหนดใน ServBay หรือไม่ (รวม http:// และ https:// ด้วย)
ตรวจสอบว่า เส้นทาง (Path) ที่ตั้งไว้ตรงกับโฟลเดอร์เว็บไซต์จริงหรือไม่
เปิดดู log ของ ServBay อาจพบรายละเอียดข้อผิดพลาดเพิ่ม

ถาม: ทำไมตั้งค่าเส้นทางเว็บไซต์แล้วแต่เข้าเว็บขึ้นเป็นรายชื่อไฟล์ ไม่แสดงหน้า index.html ที่ทำไว้?

ตอบ: ปัญหานี้ปกติเกิดจากไม่มีไฟล์หน้าแรก (เช่น index.html) ในโฟลเดอร์เว็บไซต์ กรุณาวางไฟล์ชื่อ index.html (หรือชื่ออื่นตามที่เว็บเซิร์ฟเวอร์ตั้งค่าเป็น default) ที่ถูกต้องทั้งชื่อและนามสกุล (ต้องตรงกันตัวเล็กใหญ่)

ถาม: สามารถตั้งค่า HTTPS ให้เว็บไซต์ Static ได้หรือไม่?

ตอบ: ได้ คุณสามารถเลือก SSL ในหน้าตั้งค่าเว็บไซต์ของ ServBay ServBay จะออก certificate และติดตั้งรับรองโดเมน Local ให้อัตโนมัติสำหรับโดเมนที่กำหนดเพื่อทดลอง HTTPS ได้ทันที

สรุป

ผ่าน ServBay คุณสามารถเพิ่มและจัดการเว็บไซต์ไฟล์ Static บนเครื่องได้อย่างง่ายไม่ว่าจะเป็นหน้า HTML กำหนดเองหรือไฟล์ build front-end ที่ซับซ้อน ด้วยฟีเจอร์จัดการเว็บไซต์, จัดการโดเมน Local และรองรับ SSL ของ ServBay จะช่วยให้การพัฒนาและทดสอบงาน front-end เป็นไปอย่างมีประสิทธิภาพมากขึ้น

การเพิ่มเว็บไซต์ไฟล์ Static ​

ภาพรวม ​

กรณีใช้งาน ​

ข้อกำหนดเบื้องต้น ​

ขั้นตอนการดำเนินการ ​

ขั้นตอนที่ 1: เตรียมไฟล์เว็บไซต์ของคุณ ​

ขั้นตอนที่ 2: เพิ่มเว็บไซต์ใน ServBay ​

ขั้นตอนที่ 3: กำหนดค่าการตั้งค่าเว็บไซต์ ​

ขั้นตอนที่ 4: บันทึกและนำการเปลี่ยนแปลงไปใช้ ​

การตรวจสอบผลการตั้งค่า ​

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

คำถามที่พบบ่อย (FAQ) ​

สรุป ​