VirtualHost 設定: WAMPServer 與 XAMPP 的例子

Q: 為什麼要設定 Apache Virtual Host？

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

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 安裝包架設網站所需要修改的部分。

Table of Contents

WAMPServer 參數設定
XAMPP 參數設定
Apache Virtual Hosts 常見問題
架設 WordPress 網站流程
推薦使用 XAMPP 安裝包架設 WordPress 網站

在 WAMPServer 設定 VirtualHost

如何新增 Virtual Host

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

執行 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、完成設定。

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 】

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

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

改 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

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 是否設定成功

停用 Windows 10 防火牆 ( 或是允許 Apacche 通過防火牆 )，然後重新開機。
在 Google Chrome 瀏覽器或Microsoft IE 瀏覽器中，輸入你的網站網址，假使能夠連線成功，就代表設定正確。( e.g. http://hipay0.com/ )
接下來就是申請 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
(建議購買專屬域名)

June 2023
日	一	二	三	四	五	六
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

VirtualHost 設定: WAMPServer 與 XAMPP 的例子