01_virtualhost 設定- wampserver x64_ cover

VirtualHost 設定: WAMPServer 與 XAMPP 的例子

  • Post category:WordPress
  • Reading time:20 mins read

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): 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

如何測試 VirtualHost 是否設定成功

  1. 停用 Windows 10 防火牆 ( 或是允許 Apacche 通過防火牆 ),然後重新開機。 
  2. 在 Google Chrome 瀏覽器 或Microsoft IE 瀏覽器中,輸入你的網站網址,假使能夠連線成功,就代表設定正確。( e.g. https://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 的電腦上面,架設好屬於自己的專屬網站了(這篇文章可以看到自架網站的完整敘述)。而這系列的分享文章,是寫給架站新手 / 小公司 / 部落客的,不適用於大型企業 / 大神級…

架站硬體

電腦系統

free desktop pc svgrepo com
click svgrepo com

寬頻網路

globe connection svgrepo com
click svgrepo com

架站工具

軟體懶人包

xampp svgrepo com
click svgrepo com

申請網域

domain www svgrepo com
click svgrepo com

SSL 憑證

certificate ssl svgrepo com
click svgrepo com

商標設計

logo apple ar svgrepo com
click svgrepo com

架站效能

網站設定

setting line svgrepo com 1
click svgrepo com

網站設定

軟體參數微調

快取外掛

shower svgrepo com
click svgrepo com

架站安全

找出惡意爬蟲

crawl svgrepo com
click svgrepo com

網頁標題

quiz title svgrepo com
click svgrepo com

廣告違規

advertisement svgrepo com
click svgrepo com

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

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

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