VirtualHost 設定: WAMPServer 與 XAMPP 的例子

VirtualHost 是什麼呢? 目的是使用同一個網頁伺服器 ( Apache ) 架設多個網站 ( e.g. hipay0.com ; www.hipay0.com ),當使用者以不同網域名稱 ( e.g. hipay0.com ; www.hipay0.com… ) 連到主機時, Apache 會依據不同的網址,回應不同的網頁內容。

這篇文章中,使用了兩個 WordPress 安裝包( WAMPServer 與 XAMPP )當例子,在安裝完成後,分別修改檔案內容的細節,讓網站可以順利用 https 的方式成功連線。所以,根據你使用的 WordPress 安裝包,來選擇以下適合自己的文章章節來參考。第一章節是使用 WAMPServer 安裝包架設網站所需要修改VirtualHost的部分;而第二章節是給使用 XAMPP 安裝包架設網站所需要修改的部分。

在 WAMPServer 設定 VirtualHost

如何新增 Virtual Host

1、打開電腦總管,在路徑【 C:\wamp64 】底下,執行【 wampmanager.exe 】

02_ virtualhost 設定-  執行wampmanager
執行 wampmanager.exe

2、在視窗右下角綠色圖案點滑鼠右鍵,然後進入【 localhost 】

03_ virtualhost 設定-  localhost
進入【 localhost 】

3、點一下【 Add a Virtual Host 】

04_ virtualhost 設定-  add virtualhost
Add a Virtual Host

4、新增第一個VirtualHost :

  • 在下圖編號 1 的欄位輸入【 你的網址 】( e.g. hipay0.com )
  • 在下圖編號 2 的欄位輸入【 網站根目錄路徑 】( e.g. C:\wamp64\www\spa )
  • 按一下下圖編號 3 的按鈕,開始新增VirtualHost 
04_ virtualhost 設定-  add virtualhost-1
新增第一個VirtualHost

5、新增第二個 VirtualHost :

  • 在上圖編號 1 的欄位輸入【 你的網址 】( e.g. www.hipay0.com )
  • 在上圖編號 2 的欄位輸入【 網站根目錄路徑 】( e.g. C:\wamp64\www\spa )
  • 按一下上圖編號 3 的按鈕,開始新增 VirtualHost

6、完成設定。

04_ virtualhost 設定-  add virtualhost
新增第二個VirtualHost

7、記得連到 wordpress 後臺更改網站位址!

e.g.

  • 連到: https://hipay0.com/spa
  • 在 WordPress 設定裡面,更改
    1. WordPress 位址(URL): http://hipay0.com
    2. 網站位址(URL): http://hipay0.com

httpd.conf 設定

1、在視窗右下角綠色圖案點滑鼠右鍵,然後進入【 Apache 】–>【 httpd.conf 】

05_ httpd conf setting
httpd.conf 設定

2、在 httpd.conf 檔案中,line 238:

ServerName localhost: 80
改成
ServerName hipay0.com: 80

05_ httpd conf setting-1
改 port number

3、在 httpd.conf 檔案中,line 245:

AllowOverride none
Require all denied
改成
AllowOverride none
require all granted

05_ httpd conf setting-2
require all granted

4、在 httpd.conf 檔案中,line 290:

Require local
改成
Require all granted

05_ httpd conf setting-3
Require all granted

httpd-vhosts.conf 設定

1、在視窗右下角綠色圖案點滑鼠右鍵,然後進入【 Apache 】–>【 httpd-vhosts.conf 】

06_ httpd-vhosts-conf
httpd-vhosts.conf 設定

2、在 httpd-vhosts.conf 檔案中,新增 line 16 ~ line 36:

ServerName localhost
ServerAlias localhost
DocumentRoot ” $ { INSTALL_DIR } / www “
<Directory ” $ { INSTALL_DIR } / www / “>
Options + Indexes + Includes + FollowSymLinks + MultiViews
AllowOverride All
Require local

改成

ServerName hipay0.com
DocumentRoot ” c:/wamp64/www/spa “
<Directory ” c:/wamp64/www/spa/ “>
Options + Indexes + Includes + FollowSymLinks + MultiViews
AllowOverride All
require all granted

06_ httpd-vhosts-conf_1
修改 httpd-vhosts.conf

如何測試 VirtualHost 是否設定成功

  1. 停用 Windows 10 防火牆 ( 或是允許 Apacche 通過防火牆 ),然後重新開機。 
  2. 在 Google Chrome 瀏覽器 或Microsoft IE 瀏覽器中,輸入你的網站網址,假使能夠連線成功,就代表設定正確。( e.g. http://hipay0.com/ )
  3. 接下來就是申請 SSL 憑證 了!

在 XAMPP 下設定 virtual host apache

對於 VirtualHost 的設定,坦白說, XAMPP 就比較直覺。只要找到相對應的檔案位置,直接打開修改就可以了。

httpd-ssl.conf: 指定 Let’s Encrypt SSL 憑證的路徑

在路徑下 C:\xampp\apache\conf\extra\httpd-ssl.conf,打開 httpd-ssl.conf 後,在以下的列數做修改:

Line 125:
ServerName www.example.com:443
改成
ServerName yoursitename.com:443

因為申請 SSL 免費憑證的關係,憑證檔名是: certificate.crt,所以要把預設值改掉。

Line 149:
SSLCertificateFile “conf/ssl.crt/server.crt”
改成
SSLCertificateFile “C:/xampp/apache/conf/ssl.crt/certificate.crt

Line 159:
SSLCertificateKeyFile “conf/ssl.key/server.key”
改成
SSLCertificateKeyFile “C:/xampp/apache/conf/ssl.key/private.key

Line 180:
新增一行
SSLCACertificateFile “C:/xampp/apache/conf/ssl.crt/ca_bundle.crt

httpd-ssl.conf: 啟動 HTTP/2

在路徑 C:\xampp\apache\conf\extra\httpd-ssl.conf,打開 httpd-ssl.conf,新增以下這行即可啟動 HTTP/2。利用這個連結 https://tools.keycdn.com/http2-test,來測試 HTTP/2 是否有設定成功。

在 SSLEngine on 的下方,
新增這行 Protocols h2 http/1.1

同時也要在 C:\XAMPP\apache\conf\httpd.conf 路徑下打開 httpd.conf。找到以下這行,把前方的#刪除。

LoadModule http2_module modules/mod_http2.so

httpd-ssl.conf: 支援 TLS 安全性憑證

TSL (Transport Layer Security,傳輸層安全性) 是更新、更安全的 SSL 版本,我們仍將安全性憑證稱為 SSL。假使想要支援更多 SSL Protocol 的話,可以更改成以下這行

Line 79:
將 SSLProtocol all -SSLv3
更改成
SSLProtocol all -SSLv3 -TLSv1 -TLSv1.1

httpd-ssl.conf: 客製化 Apache Log

避免 Log 檔案過大,拖慢 Apache 的效能,甚至避免電腦當機。可以考慮採用固定檔案大小分割 Log 或以天為單位進行 Log 分割。

找到下面兩行
ErrorLog “C:/xampp/apache/logs/error.log”
TransferLog “C:/xampp/apache/logs/access.log”
將這兩行直接在最前面加上#的符號,範例如下:
#ErrorLog “C:/xampp/apache/logs/error.log”
#TransferLog “C:/xampp/apache/logs/access.log”

將 Apache Log 每天自動存到 D:/Apache_logs/access/ or D:/Apache_logs/error/ 底下。

找到 LogLevel info 後,新增下面兩行
ErrorLog “|bin/rotatelogs.exe -l D:/Apache_logs/error/error-%Y-%m-%d.log 86400”
CustomLog “|bin/rotatelogs.exe -l D:/Apache_logs/access/access-%Y-%m-%d.log 86400” combined


同時在 </VirtualHost> 前面,找到下面兩行在前面加上#符號
#CustomLog “C:/xampp/apache/logs/ssl_request.log” \
# “%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \”%r\” %b”

httpd-mpm.conf: 提高 Apache 網頁伺服器效能

畢竟是自架 WordPress 網站的關係,自己的電腦硬體資源,都會遠比租主機所提供的硬體資源來得好。這裡提供一個例子給大家參考,個人使用這幾年,還沒遇過記憶體不足導致網站當機或連線過多導致停擺。在C:\xampp\apache\conf\extra\,找到 httpd-mpm.conf 的檔案,做以下的修改:

原始內容:
# WinNT MPM
<IfModule mpm_winnt_module>
ThreadsPerChild 150
MaxConnectionsPerChild 0
</IfModule>

<IfModule !mpm_netware_module>
MaxMemFree 2048
</IfModule>

修改後:
# WinNT MPM
<IfModule mpm_winnt_module>
ThreadsPerChild 800
MaxConnectionsPerChild 80000
</IfModule>

<IfModule !mpm_netware_module>
MaxMemFree 4096
</IfModule>

httpd-default.conf: Apache 連線時間相關設定

TimeOut: 用來設定伺服器接收一個請求以及完成一個請求最長的等待時間(以秒為單位),如果在此時間內沒有回應則終止服務。
KeepAlive: 用於設定伺服器要不要開啟連續請求的功能,On 是開啟,Off 是關閉。
MaxKeepAliveRequests: 用於設定伺服器所能接受之最大連續請求量,如果連續請求超過這個此數限制則 Server 會自動拒絕請求連線。
KeepAliveTimeout:用於設定使用者”連續”請求等待的時間上限,如果使用者連續請求的時間超過此數,則終止此請求服務。

範例:
Timeout 60
KeepAlive On
MaxKeepAliveRequests 100
KeepAliveTimeout 15

wp-config.php: 避免儲存不必要的檔案

在 C:\XAMPP\htdocs\wp-config.php 路徑,找到 wp-config.php 的檔案,做以下的修改:

/* 禁用WordPress文章版本(Post Revisions)功能 */
define( ‘WP_POST_REVISIONS’, false );

/* 清空回收桶 */
define (‘EMPTY_TRASH_DAYS’, 7);

/* 關閉後台佈景編輯功能 */
define(‘DISALLOW_FILE_EDIT’, true);

/* 設定自動儲存時間設定為一天 */
define( ‘AUTOSAVE_INTERVAL’, 86400 );

Apache Virtual Hosts 常見問題

為什麼要設定 Apache Virtual Host?

VirtualHost 是一個 Apache 網路伺服器的一個設定檔案,用來在同一台電腦上執行多個網站。 在 VirtualHost 設定檔裡面,可以指定每一個網站的根目錄,同時也可以為每個網站指定不同的 SSL 憑證。

為何更新設定檔之後,功能還是無法啟動?

建議在更新任何設定檔內容後,要重新啟動 Apache 伺服器。

Apache Virtual Host 可以將多個網域綁定到一個 IP

Step 1:
首先在你購買域名的地方,將多個頂級域名(TLD) 透過類型 A 指向同一個 IP。

Step2:
開啟 httpd.conf (預設路徑在 C:\xampp\apache\conf)將以下指令前方的#刪除。
LoadModule ssl_module modules/mod_ssl.so

Step 3:
修改 httpd-ssl.conf 檔案 (預設路徑在 C:\xampp\apache\conf\extra),範例如下:

<VirtualHost _default_:443>
DocumentRoot “C:/xampp/htdocs/main”
ServerName main.hipay0.com:443
SSLEngine on
Protocols h2 http/1.1
SSLCertificateFile “C:/xampp/apache/conf/ssl.crt/cert1.pem”
SSLCertificateKeyFile “C:/xampp/apache/conf/ssl.key/privkey1.pem”
SSLCertificateChainFile “C:/xampp/apache/conf/ssl.crt/chain1.pem”
SSLCACertificateFile “C:/xampp/apache/conf/ssl.crt/fullchain1.pem”
</VirtualHost>

<VirtualHost _default_:443>
DocumentRoot “C:/xampp/htdocs/shop”
ServerName shop.hipay0.com:443
SSLEngine on
Protocols h2 http/1.1
SSLCertificateFile “C:/xampp/apache/conf/ssl.crt/cert1.pem”
SSLCertificateKeyFile “C:/xampp/apache/conf/ssl.key/privkey1.pem”
SSLCertificateChainFile “C:/xampp/apache/conf/ssl.crt/chain1.pem”
SSLCACertificateFile “C:/xampp/apache/conf/ssl.crt/fullchain1.pem”
</VirtualHost>

架設 WordPress 網站流程

只要照著我的步驟做,相信你也可以不用額外花半毛錢,就可以在 Windows 10 的電腦上面,架設好屬於自己的專屬網站了(這篇文章可以看到自架網站的完整敘述)。而這系列的分享文章,是寫給架站新手 / 小公司 / 部落客的,不適用於大型企業 / 大神級…

架站硬體

電腦安裝 Windows 10
路由器入門防火牆進階防火牆
寬頻網路中華電信光世代

架站軟體

5套免費架站懶人包
(參考第 2 章節,推薦使用 XAMPP)

網域名稱

免費域名:NoIP DDNS
(建議購買專屬域名)

推薦使用 XAMPP 安裝包架設 WordPress 網站

在試用過多套架站安裝包之後,XAMPP 算是最適合新手架站使用的軟體。原因不外乎以下幾點:

  1. 因為討論度高,容易在網路上找到答案。
  2. 提供 Windows 版本,修改檔案的門檻不會太高。
  3. XAMPP 軟體有專業團隊維護,不定期會有版本更新。

Patti's Blog

Patti 是一位從事美容 SPA 多年的店長,利用工作之餘,與團隊共同經營【Patti Blog】。透過部落格分享經驗、見解和專業知識,同時也想讓讀者了解我的美容事業。透過【Patti Blog】的平台,除了建立了個人品牌外,也想與讀者建立了良好的信任關係。總之,【Patti Blog】是展現團隊創意和熱情的平台。 Email: support@hipay0.com