WordPress 網站無法使用 ngrok 連線的問題

最近都在忙用樹莓派架設 WordPress 網站, 這兩天已經就緒, 正進行網站管理設定作業, 完工後打算先用 ngrok 取得外網網址, 讓湘雲老師瀏覽網站雛型, 看看哪裡需要補強. 但後來想想這可以同步進行, 所以昨天找出之前的 ngrok 筆記先測試看看外網存取結果, 參考 :

# 使用 ngrok 代理伺服器穿透社區網路存取內網的樹莓派本機網站

1.下載 ngrok :

ngrok 下載網址 : 

# https://dashboard.ngrok.com/get-started/setup

初次下載需先申請 ngrok 帳號, 登入後會自動依據作業系統顯示不同下載頁面, 樹莓派顯示如下 Linux(Arm) 下載頁面 :  

樹莓派預設下載目錄為 Downloads, 切換到此目錄後即可看到已下載的 ngrok 壓縮檔 ngrok-stable-linux-arm.zip :

pi@raspberrypi:~ $ cd Downloads    

pi@raspberrypi:~/Downloads $ ls -ls    

12740 -rw-r--r-- 1 pi pi 13043713  5月 30 19:42 ngrok-stable-linux-arm.zip   

用 unzip 命令解壓縮為 ngrok 執行檔 : 

pi@raspberrypi:~/Downloads $ unzip ngrok-stable-linux-arm.zip    

pi@raspberrypi:~/Downloads $ ls -ls    

25376 -rwxr-xr-x 1 pi pi 25983364  5月  4 22:20 ngrok   

12740 -rw-r--r-- 1 pi pi 13043713  5月 30 19:42 ngrok-stable-linux-arm.zip   

然後用 ./ngrok 啟動 ngrok 即可取得一個外部網址 (每次執行都會改變) :

pi@raspberrypi:~/Downloads $ ./ngrok http -region ap 80   

按 Ctrl + C 即可停止 ngrok. 

結果顯示 ngrok 指配了 http://89bbf1f687d6.ap.ngrok.io 給樹莓派上的 WordPress 網站, 但我在瀏覽器網址列輸入此網址後預期會看到 WordPress 網頁, 但卻跳轉到 127.0.0.1 並出現 "127.0.0.1 拒絕連線" 訊息 :

奇怪, 我上回測試時都很順利啊, 怎會變成這樣? 上次是使用 NGINX 伺服器, 顯示了 NGINX 的預設網頁, 為了釐清是否為 WordPress 網站問題, 所以我到 WordPress 網站根目錄 /var/www/html 下以下列指令製作了一個顯示 PHP 狀態的網頁 : 

pi@raspberrypi:~ $ cd /var/www/html/ 

pi@raspberrypi:/var/www/html $ echo "<?php phpinfo ();?>" > /var/www/html/phpinfo.php   

這個 phpinfo.php 網頁其實就是呼叫 phpinfo() 函數而已. 接著從外網再次拜訪 ngrok 指配的網址後面指定瀏覽 phpinfo.php :

# http://89bbf1f687d6.ap.ngrok.io/phpinfo.php 

結果正常顯示網頁 : 

可見這不是 ngrok 的問題, 而是 WordPress 的問題. 

====== 以下第 2. 3 項跳過, 直接到第 4. 項安裝 WP-ngrok 外掛即可 ========  

2. 修改 wp-config.php :

我搜尋 "ngrok wordpress" 找到下面這篇文章 :  

# https://github.com/inconshreveable/ngrok/issues/315

其中 thosten-stripe 提出了解決辦法 : 

首先編輯 /var/www/html/wp-config.php, 在最後面加上這兩行後存檔 : 

define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST']);

define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST']);

pi@raspberrypi:/var/www/html $ cp wp-config.php wp-config_old.php    

pi@raspberrypi:/var/www/html $ nano wp-config.php   

關於 WordPress 設定檔 wp-config.php 的更多用法參考 :

# 15 個設定 WordPress 網站的程式碼整理，加入 wp-config.php 就能使用

3. 安裝 relative url 外掛 : 

由於 WordPress 內都是使用絕對位址, 因此還要去 "控制台/外掛" 中搜尋安裝 relative url 外掛 :

然後用 Ctrl+C 關掉 ngrok 後重新啟動, 用新指配的網址連線果然 OK, 但是 CSS 效果卻沒出現 :

我找了一些資料試圖解決此問題, 但都不成功, 例如 :

# CSS not loading with Ngrok and Wordpress

暫時只能做到這樣, 但沒有 CSS 其實蠻難看的.

2021-05-31 補充 :

4. 安裝 WP-ngrok 外掛 :

晚上倒完垃圾回來不死心, 再次搜尋 WordPress 與 ngrok 相關文章, 在下面這篇找到簡單方便的解決辦法, 那就是安裝 WP-ngrok, 參考 :

# https://wordpress.org/plugins/wp-ngrok/   

此文前半部下載與啟動 ngrok 部分就是上面第 1 項所述, 接著只要到 "控制台/外掛" 中搜尋安裝 WP-ngrok 外掛, 直接安裝啟用即可 :

然後在終端機的 ngrok 程式目錄下以如下指令啟動 ngrok 就可以取得 ngrok 指配之網址, 從外網瀏覽此網址果然顯示 WordPress 網站完整面貌 : 

./ngrok http -host-header=rewrite localhost:80 

或

./ngrok http -host-header=localhost 80 

注意,  :80 或 80 可省略 (這是預設值), 只有在連線非 80 埠時才需要指定. 參考 :

# 如何讓 ngrok 瀏覽只能接受 localhost 連接的網站

可見透過 WP-ngrok 外掛幫助, WordPress 網站的 CSS 與 Javascript 檔都能順利下載, 所以才能看到與 localhost 內網相同的網站內容. 因為 WP-ngrok 就可以解決全部問題, 所以我就把上面修改的 wp-config.php 復原, 同時將安裝啟用的 relative url 或 relative urls 停用刪除.