เพิ่มเว็บไซต์แรกของคุณ

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

ไม่ว่าคุณจะพัฒนา PHP, Node.js, เว็บไซต์ Static หรือจำเป็นต้องตั้งค่า Reverse Proxy หรือ Redirect — ServBay รองรับทุกความต้องการอย่างยืดหยุ่น

ภาพรวม

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

เงื่อนไขเบื้องต้น

ก่อนเริ่มเพิ่มเว็บไซต์ โปรดตรวจสอบให้แน่ใจว่า

• คุณได้ติดตั้งและเปิดใช้งานแอปพลิเคชัน ServBay บนระบบ macOS เป็นที่เรียบร้อยแล้ว

ขั้นตอนการเพิ่มเว็บไซต์

ต่อไปนี้คือขั้นตอนโดยละเอียดในการใช้ GUI ของ ServBay เพื่อเพิ่มเว็บไซต์ใหม่

ขั้นตอนที่ 1: เปิดแอปพลิเคชัน ServBay

ก่อนอื่น ให้เปิดโฟลเดอร์ Applications บน macOS ของคุณ ค้นหาไอคอน ServBay แล้วดับเบิลคลิกเพื่อเปิดโปรแกรม

ขั้นตอนที่ 2: ไปยังหน้าจัดการเว็บไซต์

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

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

ในหน้าจัดการเว็บไซต์ มองหาปุ่ม + ที่มุมล่างซ้ายของหน้า จากนั้นคลิก จะมีฟอร์มใหม่แสดงขึ้นทางด้านขวา ให้คุณกรอกรายละเอียดสำหรับตั้งค่าเว็บไซต์ใหม่ของคุณ

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

ในฟอร์มการตั้งค่าเว็บไซต์ที่ปรากฏขึ้นใหม่ คุณจำเป็นต้องกรอกหรือเลือกข้อมูลสำคัญดังนี้:

1. ชื่อเว็บไซต์: กำหนดชื่อที่เข้าใจง่ายสำหรับระบุเว็บไซต์ของคุณใน ServBay โดยใช้เพื่อแยกแยะและจัดการเว็บไซต์ที่เพิ่มไว้เท่านั้น
2. โดเมน: ป้อนชื่อโดเมนที่คุณต้องการใช้เพื่อเข้าถึงเว็บไซต์นี้บนเครื่องเรา หลีกเลี่ยงการใช้ชื่อโดเมนที่อาจซ้ำกับของจริง แนะนำให้ใช้ .demo หรือโดเมน TLD ภายในที่ ServBay กำหนดเช่น servbay.demo หรือ myproject.servbay.demo ServBay จะดูแลเรื่อง DNS ภายใน ทำให้คุณเข้าเว็บไซต์โลคัลผ่านชื่อโดเมนนี้ได้ทันที
3. โปรโตคอล: เลือกโปรโตคอลที่เว็บไซต์รองรับ โดยปกติจะเลือก HTTP/HTTPS ไว้เป็นค่าเริ่มต้น ServBay จะช่วยตั้งค่า HTTPS ในเครื่องให้อัตโนมัติ
4. วิธีขอใบรับรอง SSL: กำหนดการเข้ารหัส SSL/TLS ให้กับเว็บไซต์โลคัลของคุณ
   • ServBay CA: แนะนำสำหรับการพัฒนาโลคัล ServBay จะสร้างและดูแลใบรับรอง SSL ที่ลงนามโดย ServBay CA ภายในเครื่องให้คุณอัตโนมัติ เพียงคุณเชื่อถือรากใบรับรอง (ServBay User CA หรือ ServBay Public CA) ในระบบ คุณก็สามารถเข้าเว็บไซต์แบบ HTTPS โดยไม่มีการแจ้งเตือนในเบราว์เซอร์
   • ACME: หากต้องการจำลองสภาพจริง สามารถใช้ ACME protocol (เช่น Let's Encrypt, ZeroSSL, Google Trust Services ฯลฯ) ออกใบรับรองที่ได้รับความเชื่อถือสาธารณะให้กับโดเมนภายในของคุณ (หากโดเมนนั้นเข้าถึงได้สาธารณะและชี้มาที่ ServBay ในเครื่อง) ServBay รองรับการขอและต่ออายุอัตโนมัติผ่าน ACME
5. ประเภทเว็บไซต์: เลือกประเภทตามเทคโนโลยีของโปรเจกต์คุณ
   • PHP: เหมาะกับโปรเจกต์ PHP เช่น WordPress, Laravel, Symfony เป็นต้น ServBay จะตั้งค่า Web Server (Nginx หรือ Apache) พร้อม PHP-FPM ให้เอง
   • Node.js: สำหรับแอป Node.js ServBay จะตั้งค่า Reverse Proxy ให้ Web Request วิ่งไปยัง port ของแอป Node.js
   • Static: สำหรับเว็บไซต์ที่มีแต่ไฟล์ HTML, CSS, JavaScript (Static File) Web Server จะให้บริการไฟล์เหล่านี้โดยตรง
   • Reverse Proxy: ตั้งให้โดเมนหรือ path ที่กำหนด forward ไปที่ address/port อื่นทั้งในเครื่องหรือภายนอก เหมาะสำหรับทำ Proxy ไปยังบริการอื่น
   • Redirect: Redirect ทุก request จากโดเมนนี้ไป URL อื่น
6. เวอร์ชัน PHP: ถ้าเลือกประเภทเว็บไซต์เป็น PHP ต้องเลือกเวอร์ชัน PHP ที่ติดตั้งไว้ผ่าน ServBay และกำลังรันอยู่ให้ถูกต้อง
7. กฎ Rewrite URL (pseudo-static): ระบบ Web Framework และ CMS สมัยใหม่มักต้องการกฎ URL Rewrite เพื่อโครงสร้าง URL ที่สวยงาม (เช่น /about แทน /index.php?page=about) ServBay มี preset rewrite rule สำหรับแอปยอดนิยม (Laravel, WordPress, Discuz! ฯลฯ) ให้เลือกใช้ หรือหากต้องการ custom เอง สามารถแก้ไข config ของ Nginx/Apache ได้เช่นกัน
8. โฟลเดอร์รากเว็บไซต์: ระบุ path ของไฟล์เว็บไซต์ในเครื่อง (Document Root) ซึ่งเป็นตำแหน่งที่ Web Server จะแสดงผลและให้บริการไฟล์ แนะนำเก็บไฟล์โปรเจกต์ไว้ในโฟลเดอร์ www ของ ServBay เช่น /Applications/ServBay/www/servbay-demo ตรวจสอบให้แน่ใจว่าไดเร็กทอรีนี้มีอยู่จริงและ ServBay สามารถอ่านได้

WARNING

สำหรับนักพัฒนาที่ใช้ Framework (เช่น Laravel) โปรดชี้โฟลเดอร์รากไปที่ไดเรกทอรี public ที่มีไฟล์ index.php ไม่ใช่โฟลเดอร์โปรเจกต์หลัก

ขั้นตอนที่ 5: บันทึกและเปิดใช้งานเว็บไซต์

หลังกรอกข้อมูลและตรวจสอบว่าถูกต้องแล้ว ให้คลิกปุ่ม เพิ่ม ด้านล่างฟอร์ม ServBay จะสร้างและโหลด config ใหม่ของเว็บไซต์นี้เข้าสู่ Web Server (Nginx หรือ Apache) พร้อมอัปเดต DNS ในเครื่องให้อัตโนมัติ

หากสำเร็จ รายการเว็บไซต์ใหม่จะปรากฏในหน้าเว็บไซต์ สามารถคลิกไอคอนเบราว์เซอร์ที่มุมขวาบนเพื่อเปิดเว็บไซต์ได้ทันที

ขั้นตอนที่ 6: จัดการเว็บไซต์ด้วยปุ่มลัด

ServBay จัดเตรียมปุ่มลัดใช้งานสะดวกสำหรับแต่ละเว็บไซต์ในรายการ เพื่อช่วยให้คุณจัดการ workflow ได้อย่างคล่องตัว:

1. เปิดด้วย IDE: เปิดโฟลเดอร์เว็บไซต์ในโค้ดเอดิเตอร์/IDE ที่ตั้งไว้ทันที
2. เปิดด้วยเบราว์เซอร์: เปิด URL ของเว็บไซต์ในเว็บเบราว์เซอร์ดีฟอลต์
3. ดู log เว็บไซต์: เปิด access log และ error log ของ Web Server ที่เกี่ยวข้องกับเว็บไซต์เพื่อการดีบัก
4. หยุดชั่วคราว/เริ่มต้นเว็บไซต์: ปิดการเข้าถึงเว็บไซต์นี้ชั่วคราวหรือเปิดใหม่
5. ลบเว็บไซต์: เอาเว็บไซต์ออกจากระบบ Config ของ ServBay (แต่ไม่ได้ลบไฟล์จริงในเครื่อง)

ตัวอย่างง่าย: สร้างเว็บไซต์ HTML แบบ Static

เพื่อตรวจสอบว่าเว็บไซต์แรกของคุณตั้งค่าสำเร็จดีหรือไม่ สามารถทดสอบดังนี้:

1. ทำตามขั้นตอนข้างต้นเพื่อเพิ่มเว็บไซต์ใหม่ เช่น ใช้โดเมน servbay.demo เลือกประเภท Static และตั้งโฟลเดอร์รากเป็น /Applications/ServBay/www/servbay-demo-static

2. ในระบบไฟล์เครื่องของคุณ ให้สร้างโฟลเดอร์ /Applications/ServBay/www/servbay-demo-static

3. สร้างไฟล์ชื่อ index.html ในโฟลเดอร์ดังกล่าว

4. เปิดไฟล์ index.html ด้วย text editor แล้วเพิ่มโค้ด HTML ดังนี้:

   <!DOCTYPE html>
   <html>
   <head>
       <title>ServBay Static Test</title>
   </head>
   <body>
       <h1>ขอแสดงความยินดี! เว็บไซต์ ServBay แรกของคุณทำงานสำเร็จแล้ว!</h1>
       <p>หากคุณเห็นหน้านี้ แสดงว่า ServBay ได้ตังค่าและให้บริการเว็บไซต์ Static ของคุณเรียบร้อยแล้ว</p>
   </body>
   </html>

5. บันทึกไฟล์ index.html

6. กลับไปหน้าจัดการเว็บไซต์ใน ServBay หาเว็บไซต์ servbay.demo ที่เพิ่งเพิ่ม แล้วคลิกไอคอนเบราว์เซอร์

7. เบราว์เซอร์จะเปิดไปที่ http://servbay.demo (หรือ https://servbay.demo แล้วแต่คุณตั้งค่า SSL) และแสดงเนื้อหาใน index.html

หมายเหตุ

• ชื่อโดเมนซ้ำ: หลีกเลี่ยงโดเมนที่อาจซ้ำกับในเครือข่ายโลคัลหรือ VPN ของคุณ .demo คือทางเลือกที่ปลอดภัย
• สิทธิ์โฟลเดอร์ราก: ตรวจสอบให้แน่ใจว่า user ที่รัน ServBay (โดยปกติคือ user ของคุณเอง) มีสิทธิ์อ่าน/เขียนโฟลเดอร์เว็บไซต์และไฟล์ย่อย
• การใช้พอร์ต: ServBay ใช้ port มาตรฐาน (HTTP 80, HTTPS 443) หาก port เหล่านี้ถูกโปรแกรมอื่นใช้งานอยู่ อาจทำให้ Web Server หรือเว็บไซต์ใช้งานไม่ได้ กรุณาทำการปิดโปรแกรมที่ใช้ port เหล่านั้นก่อน
• เชื่อถือ CA ของ ServBay: ถ้าใช้ ServBay CA และต้องการเข้า HTTPS แบบไม่แจ้งเตือน กรุณาดำเนินการเพิ่มความเชื่อมั่น CA ของ ServBay (User CA หรือ Public CA) ใน macOS ตามคู่มือของ ServBay

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

• Q: เปิดเว็บไซต์แล้วเจอ HTTP Error 403 - Forbidden หรือ HTTP Error 404 - File not found?
  • A: นี่คือข้อผิดพลาดที่พบบ่อยสำหรับนักพัฒนา
  • เช็คให้มั่นใจว่าได้ตั้ง path โฟลเดอร์รากของเว็บไซต์ถูกต้อง ใน framework สมัยใหม่ (เช่น Laravel, Symfony, CakePHP) โดยทั่วไป โฟลเดอร์โปรเจกต์หลัก (ที่มีไฟล์อย่าง vendor, composer.json, package.json) ไม่ใช่ Document Root / จุดเข้าจริง ของเว็บไซต์
  • ต้องกำหนด Document Root ไปที่ไดเรกทอรีที่มีไฟล์หลัก (index.php, index.htm, index.html) เท่านั้น
  • ตัวอย่างไดเรกทอรีหลัก: public, web, www, htdocs, wwwroot, webroot ฯลฯ
• Q: เพิ่มเว็บไซต์แล้ว แต่เข้าโดเมนในเบราว์เซอร์ไม่ได้/แจ้ง “ไม่สามารถเข้าถึงเว็บไซต์นี้” หรือ “การเชื่อมต่อล้มเหลว”?
  • A: ตรวจสอบว่า ServBay กำลังทำงานอยู่พร้อมทั้ง Web Server (Caddy/Nginx/Apache) (ดูสถานะในแอปหลักของ ServBay)
  • ตรวจสอบว่าชื่อโดเมนในเบราว์เซอร์ตรงกับโดเมนที่ตั้งค่าใน ServBay
  • เช็คสถานะของเว็บไซต์ในรายการ ว่าอยู่ในสถานะ “รันอยู่” ไม่ใช่ “หยุดอยู่”
  • พาธของโฟลเดอร์รากถูกต้อง และมีไฟล์เริ่มต้น (index.html, index.php)
  • ตรวจสอบว่าพอร์ต 80 หรือ 443 ไม่ถูกโปรแกรมอื่นใช้
• Q: เว็บไซต์ PHP ของฉันไม่ทำงานตามต้องการ แสดงหน้าเปล่าหรือดาวน์โหลดไฟล์?
  • A: ตรวจสอบว่าเลือกเวอร์ชัน PHP ใน setting เว็บไซต์ตรงกับที่ติดตั้งไว้บน ServBay และกำลังทำงานอยู่
  • ตรวจสอบสิทธิ์ของไฟล์ในโฟลเดอร์ราก
  • ตรวจสอบ log ของเว็บไซต์ (ที่ปุ่มด่วน) เพื่อดูว่า PHP ขึ้น error อะไรหรือไม่
  • ตรวจสอบว่ามีไฟล์ index.php หรือไฟล์ index ตามที่ Config ของ ServBay ระบุไว้
• Q: ตั้งค่า HTTPS แล้ว เบราว์เซอร์แจ้งใบรับรองไม่ถูกต้อง/มี warning?
  • A: หากใช้ ServBay CA จะต้องเพิ่ม CA เข้าสู่ trust store ของ OS หรือเบราว์เซอร์ ตามคู่มือที่ให้ไว้
  • หากใช้ ACME ตรวจสอบว่าชื่อโดเมนชี้มาที่ ServBay ในเครื่องคุณเรียบร้อย และใบรับรองลงทะเบียนสำเร็จแล้ว สามารถเช็ค log ของ ServBay ได้
• Q: URL rewrite ไม่ทำงาน หน้าเว็บเข้าไม่ได้?
  • A: ตรวจสอบใน Setting ว่าได้เลือก rewrite rule ที่ตรงกับ framework/app ของคุณแล้ว
  • ถ้าใช้ Apache ต้องมีไฟล์ .htaccess ในไดเรกทอรีต้นทางหรือโฟลเดอร์ย่อย และต้องแน่ใจว่า config ของ Apache ใน ServBay อนุญาตให้อ่าน .htaccess
  • ถ้าใช้ Nginx หรือ Caddy ให้ตรวจสอบ rewrite rule ใน config ที่ ServBay สร้างไว้ ว่าถูกต้องหรือไม่

สรุป

เมื่อทำตามขั้นตอนในบทความนี้ คุณจะสามารถเพิ่มและเปิดเว็บไซต์แรกของคุณบนสภาพแวดล้อมการพัฒนาโลคัลของ ServBay ได้สำเร็จอย่างแน่นอน ด้วยฟีเจอร์สำหรับจัดการหลายเว็บไซต์ ตัวเลือกการตั้งค่าที่ยืดหยุ่น (เช่น SSL, ประเภทเว็บไซต์, เวอร์ชัน PHP, URL rewrite) และปุ่มลัดอำนวยความสะดวก จะช่วยให้ workflow การพัฒนาเว็บบนเครื่องโลคัลของคุณเร็วขึ้นอีกหลายเท่า อย่าลืมลองใช้ฟีเจอร์อื่นๆ ของ ServBay เช่น จัดการ software package หรือจัดการฐานข้อมูล เพื่อเพิ่มประสิทธิภาพการทำงานของคุณให้สูงสุด