VirtualHost 設定: WAMPServer 與 XAMPP 的例子

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

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

在 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): https://hipay0.com
    2. 網站位址(URL): https://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

結果測試

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

在 XAMPP 設定 VirtualHost

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

修改 httpd-ssl.conf 的內容

在路徑下 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"

進階版修改內容: 支援 h2 、 TLS 與 log

基本上,上面的修改可以算是完成了。假使還要做進階功能的修改,以符合未來網站需求的話,可以參考以下部分。同時,可以利用這個連結(https://tools.keycdn.com/http2-test),來測試 h2 是否有設定成功。

Line 79:
SSLProtocol all -SSLv3
假使想要支援更多 SSL Protocol 的話,可以更改成以下這行
SSLProtocol all -SSLv3 -TLSv1 -TLSv1.1
Line 128 / 129:
ErrorLog "C:/xampp/apache/logs/error.log"
TransferLog "C:/xampp/apache/logs/access.log"
假使不需要檢查網站連線的log,直接在最前面加上#的符號
#ErrorLog "C:/xampp/apache/logs/error.log"
#TransferLog "C:/xampp/apache/logs/access.log"
假使需要log來檢查錯誤或連線狀態,可以考慮改成將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
同時在 Line 292 and Line 293 前面加上#符號
#CustomLog "C:/xampp/apache/logs/ssl_request.log" \
#          "%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"
Line 137:
假使要支援HTTP/2(簡稱h2)的話,可以新增以下這行
Protocols h2 http/1.1

如何提高網站效能

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

# WinNT MPM
# ThreadsPerChild: constant number of worker threads in the server process
# MaxConnectionsPerChild: maximum number of connections a server process serves
<IfModule mpm_winnt_module>
    ThreadsPerChild        150

    MaxConnectionsPerChild   0

</IfModule>
# The maximum number of free Kbytes that every allocator is allowed
# to hold without calling free(). In threaded MPMs, every thread has its own
# allocator. When not set, or when set to zero, the threshold will be set to
# unlimited.
<IfModule !mpm_netware_module>
    MaxMemFree            2048

</IfModule>
修改成以下:
# WinNT MPM
# ThreadLimit: Default=1920, Max=15000
# ThreadsPerChild: constant number of worker threads in the server process; default=64, Max=1920
# MaxConnectionsPerChild: maximum number of connections a server process serves
<IfModule mpm_winnt_module>
    ThreadsPerChild        800

    MaxConnectionsPerChild   80000

</IfModule>
# The maximum number of free Kbytes that every allocator is allowed
# to hold without calling free(). In threaded MPMs, every thread has its own
# allocator. When not set, or when set to zero, the threshold will be set to
# unlimited.
<IfModule !mpm_netware_module>
    MaxMemFree            4096

</IfModule>

Windows 10 自架網站流程圖

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

網站DIY流程圖

Step 1、準備好硬體

– 電腦主機
– 路由器
初期
: 拿現有的路由器,具備設定通訊阜轉發就可以了。
後期: 決定要持續維護網站後,最好更換成具備防火牆功能的產品。畢竟防火牆功能的路由器,價格都不便宜。本身使用的都是入門款的防火牆(Vigor2120n使用心得),到現在,網站還沒中毒或被駭的經驗。只是每天在後台都看到一堆惡意連線,心裡難免怕怕的,所以只能靠硬體防火牆多少排除一下這些狀況。
進階: 自架免費防火牆OS(pfsense的使用心得),可以操作的細部功能更多了,防火牆設定也變得靈活。

Step 2、安裝架站安裝包

– 安裝 XAMPP 要記得在最後允許 Windows 防火牆存取【公用網路】與【私人網路】
– 設定 phpMyadmin (可以參考: 在Windows10架設WordPress網站)
– 設定 WordPress(可以參考上面連結: 在Windows10架設WordPress網站)

Step 3、申請 DDNS

使用 NoIP DDNS 的服務,將 IP 轉換成專屬網址,申請流程請參考: 申請 NoIP DDNS 的流程

Step 4、申請 SSL 數位憑證

當網站加入 SSL 加密協定(HTTPS,網址列會是綠色鎖頭圖示,申請流程請參考: ZeroSSL 的網站中完成申請),就不會被讀者誤會是危險網站或詐騙網站了(HTTP,是紅色鎖頭圖示)。也有利於 Google 搜尋排名。

Step 5、軟體設定

– VirtualHost 目的是使用同一個網頁伺服器 ( Apache ) 架設多個網站 ( e.g. hipay0.com ; www.hipay0.com ),當使用者以不同網域名稱 ( e.g. hipay0.com ; www.hipay0.com… ) 連到主機時, Apache 會依據不同的網址,回應不同的網頁內容。
– Apache 、WordPress、mySQL、phpMyadmin…的參數微調,全部都集中在VirtualHost 設定這一篇做分享。

6、網站上線

接下來要面對的問題,就是根據您的網站應用、屬性,在社團中發問,尋找解決方法了,例如:
– 如何提供 Pagespeed Insights 的分數
– 如何提高網站排名
– 如何改善SEO 的問題
– 如何提高流量
– 如何增加被動式收入、加入聯盟行銷
– 如何使用 Google Keyword Planner
-…
接下來的部分,會分享一些進階版的內容,有興趣的人,可以參考下一個章節。

你可能有興趣>>> DIY 居家監視器系統的心路歷程~

回到頂端