一般情況下我們使用 Xampp 是將網站放置於 xampp/htdoc 目錄下,因此如果我們有多個網站,例如web1、web2、web3,我們要進入以上網站時就會像是localhost/web1、localhost/web2……,以資料夾的方式管理,當我們要使用網域時就會不太方便,理想上我們會希望不同網域直接指向到特定的資料夾網頁。

因此上網查了一下解決辦法,在此紀錄一下。

Step1. 在hosts檔案設定域名解析

hosts檔案會放置於 C:\Windows\System32\drivers\etc 中,本身沒有附檔名,我們使用任何文字編輯器來打開它,比較注意的一點是需要以管理員權限打開編輯器,否則無法編輯。

打開文件後在最後面新增要解析的域名:

127.0.0.1 web1.junyou.tw
127.0.0.1 web2.junyou.tw

格式則為前 ip 後 域名 兩這之間以一個空格隔開。

Step2.在Apache中設定虛擬站點

我們進入 C:\xampp\apache\conf\extra 後找到 httpd-vhosts.conf 這個檔案,一樣以編輯器打開(管理員權限),最下面會看到一段被註解起來的指令如下,我們先將註解取消。

##<VirtualHost *:80>
    ##ServerAdmin [email protected]
    ##DocumentRoot "C:/xampp/htdocs/dummy-host.example.com"
    ##ServerName dummy-host.example.com
    ##ServerAlias www.dummy-host.example.com
    ##ErrorLog "logs/dummy-host.example.com-error.log"
    ##CustomLog "logs/dummy-host.example.com-access.log" common
##</VirtualHost>

這裡我配置兩個網站,結果應該會如下。

<VirtualHost *:80>
    ServerAdmin [email protected]
    DocumentRoot "C:/xampp/htdocs/web1"
    ServerName web1.junyou.tw
    ErrorLog "logs/web1-error.log"
    CustomLog "logs/web1-access.log" common
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin [email protected]
    DocumentRoot "C:/xampp/htdocs/web2"
    ServerName web2.junyou.tw
    ErrorLog "logs/web2-error.log"
    CustomLog "logs/web2-access.log" common
</VirtualHost>

比較要注意的一點是DocumentRoot指的是將來你各個網站的根目錄位置。

Step3.建置網站資料夾

依照剛剛設定的 DocumentRoot 我們建立兩個資料夾與檔案”C:/xampp/htdocs/web1/index.html”、
“C:/xampp/htdocs/web2/index.html”

Step4.設定DNS

這裡我使用 cloudflare 將我的子網域分別指向同一個ip(xampp本機的public ip)

Step5. 測試

分別進入剛剛設定的兩個網址,成功指向到不同網站資料夾了,成功!