ServBay

繁體中文

English
简体中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano

繁體中文

English
简体中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano

Appearance

新增您的第一個網站 ​

在 ServBay 中，新增一個新網站以啟動您的本地開發專案既簡單又直覺。本篇文件將為您詳細介紹如何在 ServBay 中新增您的第一個網站，包括操作步驟、重要設定選項及一些實用小技巧。

無論您是開發 PHP、Node.js、靜態網站，還是需要設定反向代理或轉址，ServBay 都能提供靈活的支援。

概述 ​

ServBay 致力於為 Web 開發者打造一個強大且易於管理的本地開發環境。其友善的圖形介面（GUI）讓您可輕鬆新增、設定並管理多個本地網站。按照下列步驟，您即可快速於 ServBay 創建您的第一個本地網站，並依據專案需求自行設定相關選項。

前置條件 ​

在開始新增網站之前，請確保：

  • 您已成功於 macOS 系統上安裝並啟動 ServBay 應用程式。

新增網站的步驟 ​

以下為使用 ServBay GUI 新增網站的詳細步驟：

步驟 1：開啟 ServBay 應用程式 ​

首先，於您的 macOS 應用程式資料夾內找到 ServBay 圖示並雙擊開啟該應用程式。

步驟 2：導航至網站管理介面 ​

ServBay 啟動後，您會看到主畫面。在左側導覽選單中，點擊標有 網站 的選項，此操作將帶您進入 ServBay 的網站管理頁面。

導航至網站管理

步驟 3：開始新增網站 ​

於網站管理頁面，尋找並點選畫面左下角的 + 按鈕。點擊後，在畫面右側將出現一個新的表單供您輸入網站詳細設定資訊。

點擊加號新增網站

步驟 4：設定網站參數 ​

在新出現的網站設定表單中，您需填寫或選擇下方關鍵資訊：

  1. 名稱：為您的本地網站指定一個易於辨識的名稱。此名稱僅作為您在 ServBay 內部管理和區分各網站設定用。
  2. 域名：輸入您希望在本地存取該網站的域名。為避免與真實世界域名衝突，強烈建議使用 .demo 或 ServBay 配置的其他本地頂級域名（TLD），例如 servbay.demo 或 myproject.servbay.demo。ServBay 會自動處理本地 DNS 解析，讓您可直接於瀏覽器透過此域名進入本地網站。
  3. 協定：選擇網站支援的協定。一般預設為 HTTP/HTTPS，ServBay 會自動為您處理本地 HTTPS 的設定。
  4. SSL 憑證申請方式：設定本地網站的 SSL/TLS 加密。
    • ServBay CA：推薦供本地開發使用。 ServBay 會透過內建的 ServBay PKI 自動為您產生並管理由 ServBay 根憑證簽發的 SSL 憑證。您只需於系統中信任 ServBay 的根憑證（ServBay User CA 或 ServBay Public CA），即可於瀏覽器安全（無警告）訪問網站。
    • ACME：若需模擬生產環境，可透過 ACME 協定（如 Let's Encrypt、ZeroSSL、Google Trust Services 等）為您的本地域名（若該域名可公開存取且指向本地 ServBay）申請公共信任憑證。ServBay 支援 ACME 憑證自動申請及續期。
  5. 網站類型：根據專案技術選擇適合的類型：
    • PHP：適用於基於 PHP 的專案，如 WordPress、Laravel、Symfony 等。ServBay 將配置 Web 伺服器（如 Nginx 或 Apache）配合 PHP-FPM 處理 PHP 請求。
    • Node.js：適用於 Node.js 應用程式。ServBay 通常設定反向代理，將 Web 請求轉發至 Node.js 應用監聽的埠口。
    • 靜態：適用於純 HTML、CSS、JavaScript 等靜態檔案構成的網站。Web 伺服器會直接提供檔案服務。
    • 反向代理：讓您將某個域名或路徑的請求轉發至其他本地或遠端位址及埠口，適合代理到其他服務或應用。
    • 轉址：將來自此域名的所有請求轉送（重定向）到另一個 URL。
  6. PHP 版本：若選擇網站類型為 PHP，需從下拉選單中挑選一個已安裝並啟動的 PHP 版本來執行該網站的 PHP 程式。請確認您所需 PHP 版本已於 ServBay 軟體包管理介面安裝。
  7. URL 重寫（伺靜態）規則：多數現代 Web 框架與內容管理系統（CMS）為實現美觀網址路徑（如 /about 而非 /index.php?page=about），需設定 URL 重寫規則。ServBay 為常見應用（如 Laravel、WordPress、Discuz! 等）預設了多種重寫規則選項，可直接套用。若您的框架或應用未在列表中或有自訂規則，可能需手動編輯 Web 伺服器設定（Nginx 或 Apache）。
  8. 根目錄：指定網站檔案的實體路徑。這是 Web 伺服器尋找及提供網站檔案的起始目錄。建議將專案檔案存放在 ServBay 默認的 www 目錄下，例如 /Applications/ServBay/www/servbay-demo。請確保該目錄存在，且 ServBay 程序有讀取權限。

WARNING

若您使用框架開發（如 Laravel），請特別注意根目錄需指向包含index.php的public目錄，而非專案根目錄。

設定網站資料

步驟 5：保存並啟用網站 ​

填寫並確認所有設定資訊無誤後，點擊表單下方的 新增 按鈕。ServBay 將自動產生並載入新網站的設定至 Web 伺服器（如 Nginx 或 Apache），並即時更新本地 DNS 設定。

儲存成功後，新網站設定將出現在網站列表頁面。您可點右上角的瀏覽器圖標，快速開啟您的網站。

步驟 6：善用快捷操作管理網站 ​

網站快捷操作

ServBay 為列表中每個網站提供多項便捷快捷操作按鈕，協助您高效管理本地開發工作流程：

  1. 以 IDE 開啟：快速於預設編輯器或 IDE 打開網站根目錄。
  2. 於瀏覽器開啟：直接於預設瀏覽器開啟網站 URL。
  3. 查看網站日誌：輕鬆檢視該網站相關的 Web 伺服器存取日誌及錯誤日誌，有助於除錯。
  4. 暫停/啟動網站：可暫時停用或重新啟用該網站的存取。
  5. 刪除網站：將網站設定自 ServBay 移除（注意：不會刪除實際網站檔案）。

簡易範例：建立一個靜態 HTML 網站 ​

如要驗證您的第一個網站是否設定成功，可依照以下步驟進行簡單測試：

  1. 依上述步驟新增一個網站，例如域名設為 servbay.demo，網站類型選 靜態，根目錄設為 /Applications/ServBay/www/servbay-demo-static。

  2. 於您的檔案系統中建立該根目錄 /Applications/ServBay/www/servbay-demo-static。

  3. 在該目錄下建立名為 index.html 的檔案。

  4. 使用文字編輯器打開 index.html 檔案，並加入下方簡易 HTML 內容：

    html
    <!DOCTYPE html>
<html>
<head>
    <title>ServBay Static Test</title>
</head>
<body>
    <h1>恭喜！您的第一個 ServBay 網站已成功運行！</h1>
    <p>如果您看到這個頁面，代表 ServBay 已成功設定並提供您的靜態網站。</p>
</body>
</html>

  5. 儲存 index.html 檔案。

  6. 回到 ServBay 網站管理畫面，找到剛剛新增的 servbay.demo 網站，點選快捷操作中的瀏覽器圖示。

  7. 您的瀏覽器應會開啟 http://servbay.demo（或 https://servbay.demo，視您的 SSL 設定而定），並顯示 index.html 頁面內容。

注意事項 ​

  • 域名衝突：避免使用可能與本地網路或 VPN 衝突的域名，建議選用 .demo。
  • 根目錄權限：請確認 ServBay 執行帳號（通常是您當前用戶）對指定網站根目錄及其子檔案皆有讀取權限。
  • 埠口佔用：ServBay 預設使用標準埠口（HTTP 80、HTTPS 443）。若這些埠口被其他程式佔用，ServBay 可能無法正常啟動 Web 伺服器，或您的網站無法訪問。請檢查並關閉佔用相關埠口的程式。
  • ServBay CA 信任：若採用 ServBay CA 並希望安全無警告訪問 HTTPS，需於 macOS 系統中信任 ServBay User CA 或 ServBay Public CA。ServBay 文件通常會有詳細教學指引。

常見問題解答（FAQ） ​

  • Q: 為何我的網站開啟後，出現 HTTP Error 403 - Forbidden 或 HTTP Error 404 - File not found？
    • A： 這是最常見的開發者錯誤。
    • 請先檢查網站根目錄是否正確設定。多數現代框架（如 Laravel、Symfony、CakePHP 等）出於安全與專案結構考量，專案根目錄（通常包含vendor、composer.json、package.json等檔案）並非網站真正的根目錄/入口。
    • 因此，網站根目錄應正確指向實際入口檔案（index.php、index.htm、index.html）所在的目錄。
    • 常見入口目錄有：public、web、www、htdocs、wwwroot、webroot等。
  • Q: 我已新增網站，但瀏覽器訪問時顯示“無法訪問此網站”或“連線遭拒”？
    • A： 請先檢查 ServBay 是否正在運作，以及 Web 伺服器狀態正常（可在 ServBay 主畫面查看）。
    • 確認瀏覽器中輸入的域名與 ServBay 設定完全一致。
    • 檢查 ServBay 網站列表該網站是否為「運行」狀態（不是暫停）。
    • 確認網站根目錄路徑正確，且該目錄下有入口檔案（如 index.html、index.php）。
    • 留意是否有其他程式佔用 80 或 443 埠口。
  • Q: 我的 PHP 網站無法正常運作，只顯示空白頁或下載檔案？
    • A： 請確保網站設定中選擇的 PHP 版本正確，且該 PHP 已於 ServBay 軟體包管理安裝並運作中。
    • 檢查網站根目錄檔案權限。
    • 透過快捷操作按鈕檢查網站日誌，留意是否有 PHP 錯誤訊息。
    • 確認專案目錄下有 index.php 或其他 ServBay 設定為預設索引的檔案。
  • Q: 我已設定 HTTPS，但瀏覽器顯示憑證警告？
    • A： 若您使用的是 ServBay CA，需於作業系統或瀏覽器中信任 ServBay 根憑證。請參考 ServBay 官方文件關於信任 CA 憑證的教學。
    • 若使用 ACME，請確認域名已正確指向 ServBay，且憑證已成功申請安裝。可檢查 ServBay 日誌掌握 ACME 申請細節。
  • Q: 為何 URL 重寫規則未生效，頁面無法瀏覽？
    • A： 請確認網站設定中選擇了適用於您框架或應用的 URL 重寫規則。
    • 使用 Apache 時，請確保 .htaccess 檔案已放於網站根目錄或相應子目錄，且 ServBay 的 Apache 配置允許讀取 .htaccess。
    • 若使用 Nginx、Caddy，重寫規則通常在 ServBay 產生的設定檔中，請檢查規則是否正確載入。

總結 ​

依照本文步驟，您應已順利於 ServBay 本地開發環境中新增並運行了您的第一個網站。ServBay 功能強大的網站管理、彈性的設定選項（SSL 憑證、網站類型、PHP 版本、URL 重寫）及便利的快捷操作，將大幅提升您的本地開發效率。建議持續探索 ServBay 其他功能，如軟體包管理、資料庫管理等，以打造更完善的本地開發流程。