貓城
BLACKCAT CASTLE

如何透過別台電腦連線XAMPP

   344 VIEWS

本文目次

歡迎來到黑貓城,我是時雨の町站長 ─ 時雨。

一、localhost 本地端檢視

在完成 XAMPP 安裝後只要按下「Star」就會啟動對應的服務,可以利用「Admin」按鈕檢視網頁,如下圖:

不過仔細看下圖瀏覽器中的網址列,會發現出現的是「http://localhost/dashboard/」,而不是我們申請的網址,這是因為 XAMPP 的 Admin 是採用本地端檢視,所謂的本地端檢視就是指這時候瀏覽器與 Apache 之間沒有經過網際網路,所以網址會是「localhost」,而 127.0.0.1 也同樣屬於 localhost 檢視。

而架站就是為了讓其它人透過網路連線來到我們的網站,所以只有 localhost 別人是進不來的,之所以會有 localhost 的存在是因為在網站開發與架設過程中需不斷的檢視成果,特別是開發過程不可能一直讓網站上線運作,除此之外,在做各項設定時也會先利用「localhost」來檢查會不會導致錯誤。

當然,localhost 沒有問題不等於網站上線也沒有問題,最終還是要上線測試,舉例來說,當在網頁路徑中寫了絕對路徑,如「D:/xampp/htdocs/img/a.png」,由於圖片確實就在本機電腦裡,所以在 localhost(本機端)檢視不會有問題,但上線後使用者的電腦並沒有這個資料夾,那麼就會出現破圖。

二、讓別台電腦連線 XAMPP

因此讓網站上線測試就是必要的,而如何做到外部連線 XAMPP 具體來說步驟如下:

  1. 請先確認伺服器是有連上網的(無論是 LAN 或 WAN)。
  2. 確認伺服器的 IP(無論是 DHCP 派發的 192.168.0.1 虛擬IP 或是購買的實體IP)
  3. 啟動 XAMPP 上對應的服務後只要在其它電腦的瀏覽器網址列中輸入 IP 即可。(下圖黑色頁面就是輸入 IP)
  4. 或是在設定完成 DNS 後輸入網址。(下圖白色頁面就是輸入網址)
  5. 如何設定DNS請參考:購買IP、申請網址及設定DNS

只要依以上步驟所見到的畫面就是網站實際上線時的樣子。

輸入 IP 的畫面:

輸入網址的畫面:

三、XAMPP 常見無法由外部連線的常見問題

1. 防火牆設定:

我在安裝XAMPP,讓人看見你的網頁中有提到需同意 Apache 與 MySQL 能進出防火牆,但如果不小心按錯或是有其它的防火牆軟體那麼就會導致網站無法連線,以下是 Windows 10 的防火牆設定,可以由「控制台」中的「Windows Defender 防火牆」中進入。

進入後需從左側的「允許用程式或功能通過 Windows Defender 防火牆」點入進行設定。

進入之後點選右上方的「變更設定(N)」

如果沒有在名稱中找到 Apache HTTP Server 這個名字就點選右下方的「充許其它應用程式」來加入程式。

進入之後點選「瀏覽」來新增。

Apache HTTP Server 是存在 xampp/apache/bin 資料夾中,名為 httpd.exe。找到後將其加入即可。在這裡要先說明,以下為了示範所以另外在 C 槽安裝了 xampp,但實際上 xampp 資料夾是看你安裝 xampp 時選擇安裝在哪裡,要架站的話通常會建議與系統不同顆硬碟(這裡的不同顆是指實際硬體上的不同顆),當然如果只是用來開發就無所謂。

將其匯入後點選「新增」新可以了。

接著將 Apache HTTP Server 後面的私人、公用等選項都打勾再按下「確定」就可以了。

MySQL 一樣畫葫蘆即可。至於 MySQL 的存放位置是在 xampp\mysql\bin 名為 mysqld.exe 的程式。不過由於多數的 MySQL 資料庫都是在本機執行,所以不一定需要通過防火牆。

如果這些設定做好了還是不能外連成功,那麼可能遇到了萬惡的防毒軟體阻擋了(例如像下圖這個軟體),那一樣將其設定成例外就可以了。由於防毒軟體眾多,這部分就請自己 google 相關設定方式吧。

除此之外有些專用的防火牆軟體是採用 port 單獨設定的方式,也要看一下指定的 port 有無允許通過防火牆。(port 設定與檢查寫在下面)

2. 連線 port 設定

一般來說 http/https 服務都會設定在 80(http) 與 443(https)port,所以除了上述的防火牆阻擋之外,如果 http/https 服務不是設定在這兩個 port 上也會無法連線,之所以提出來是因為如果下載的是免安裝版的最好是看一下 port 設定。以下是要確認的地方:
首先從 XAMPP 中的「Config」按鍵點開設定檔。

將 httpd.conf 及 httpd-ssl.conf 打開。

找到 Listen 看看後面的數字(見下圖一),如果不是 80 那麼要不就是把這裡的數字改成 80,或是在瀏覽的網址例中再打入:8080(假設寫的是8080),即為 192.168.0.1:8080(這表示下令瀏覽器前往伺服器的 8080port 執行http連線)。另外還有要確認 ServerName 這行中「:」後面的數字也要跟 Listen 相同才行(見下圖二)。

圖一:

圖二:

在 httpd-ssl.conf 中,一樣要確認 Listen 與 ServerName 是否為 443(見下圖一及下圖二),如果不是一樣是改為 443 或是在瀏覽器指定連線 port。

圖一:

圖二:

3. 網路環境的確認:

之前說過只要確認 IP 那麼理論上就可以執行外連,但電腦麻煩的地方就總是還要考慮外在因素,假設 IP 是 DHCP 指派的(例如 192.168.0.1)那麼能連接這個 IP 的 http/https 服務的只有同一個區域網路內的電腦,不過常常會看到別人 IP 也是 192.168 開頭但就是不能連,那麼只有接下來的幾種情況:

A) 你們是在不同路由器的區域網路內:

這種情況最容易發生在學校與公司這類電腦多的環境內,既然是不同區網不能連也很正常,那麼該如何檢測呢?最簡單的就是打開「網路和網際網路設定」(下圖一),再點選「共用選項」(下圖二),最後「開啟網路探索」(下圖三)。

圖一:

圖二:

圖三:

設定好了之後到「網路」中看一下「網路結構」是不是同一台設備就知道了,通常學生宿設會是同一層樓同一台。但總之如果不同台就一定是不同區域網路。

B) 所在的區域網路路由器有限制 http/https 伺服連線:

這是在家裡以外的地方最常見到的問題,多數的公共網路、企業網路甚至是校園網路都會有設定各種的限制(類似於防火牆的功能),除非自己就是網路管理員否則就直接放棄吧,如果是在家裡,就直接拿出家裡路由器的說明書出來看怎麼關閉這個設定,在市售路由器中通常是將這個功能寫在「防火牆」裡。

C) 在區域網路外的地方要連線到區域網路內:

這個部份就更麻煩了,由於這關係到路由器的設定,所以在這裡用下面的圖簡單的說明一下發生什麼事。通常這樣的功能通訊埠轉發(Port Forwarding),雖然廠商有時會取一個技術名字,但只要查詢該機型的 Port Forwarding 功能就可以了,由於市售路由器眾多所以詳細的設定就要自己查找路由器的說明書了,但並不是所有的家用路由器都會支援這個功能。例如 Buffalo 有的入門 Wi-Fi 路由器就不支援這個功能。如是這樣就要安裝其它跳接程式了,不過通常會建議換一台路由器比較好。

D) 啟始資料夾設定錯誤:

一樣開啟 httpd.conf 檔,確認 DocumentRoot 指向的位置是否與自己存放的資料夾相同(見下圖一),當然 httpd-ssl.conf 檔也要一部檢查才行(見下圖二),這個問題通常是發生在下載免安裝版的 XAMPP 上,除此之外在下載免安版的 XAMPP 還經常發生指定檔案位置與實際存放位置不同的問題。

E) 檢查瀏覽器設定

如果是用 Chrome 就檢查一下它的設定吧,需要開啟無痕模式重新連上 XAMPP 並將自己的網站重新設定,點選網址列前的圖視 ,打開連線設定並點選網站設定後選擇清除資訊與重設權限後就可以了。

最後會發現 XAMPP 無法連線多數的問題都在網路上,所以發生 XAMPP 無法由外部連線時可先檢查伺服器的網路環境,從外連線路到防火牆的所有網路環境全都查找一次,如果有任何無法確認的網路情況,那麼幾乎可以說你是處於無法架站的環境,這也是為何前面說要申請 IP 的另一層考量,排除網路環境後接著確認服務目錄就是具體的排除流程,而最後 Chrome 的問題通常是出現在沒有 SSL 或是設定為封鎖/不信任的網站這兩種情況下發生的。



時雨 時雨,時雨の町-日文學習園地站長,為了紀錄網站維護的日誌而架設本網站,並以家中黑貓命名為黑貓城,順道分享各種架站知識與相關的網頁程式語言,如果你喜歡我的文章,請幫我按讚哦(*´ω`*)。也歡迎各位到我的日語教學網站學習日文 :)

LEAVE A REPLY

COMMENTS