最近都在忙用樹莓派架設 WordPress 網站, 這兩天已經就緒, 正進行網站管理設定作業, 完工後打算先用 ngrok 取得外網網址, 讓湘雲老師瀏覽網站雛型, 看看哪裡需要補強. 但後來想想這可以同步進行, 所以昨天找出之前的 ngrok 筆記先測試看看外網存取結果, 參考 :
1.下載 ngrok :
ngrok 下載網址 :
初次下載需先申請 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 外掛即可 ========
我搜尋 "ngrok wordpress" 找到下面這篇文章 :
其中 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 的更多用法參考 :
由於 WordPress 內都是使用絕對位址, 因此還要去 "控制台/外掛" 中搜尋安裝 relative url 外掛 :
然後用 Ctrl+C 關掉 ngrok 後重新啟動, 用新指配的網址連線果然 OK, 但是 CSS 效果卻沒出現 :
我找了一些資料試圖解決此問題, 但都不成功, 例如 :
暫時只能做到這樣, 但沒有 CSS 其實蠻難看的.
2021-05-31 補充 :
4. 安裝 WP-ngrok 外掛 :
晚上倒完垃圾回來不死心, 再次搜尋 WordPress 與 ngrok 相關文章, 在下面這篇找到簡單方便的解決辦法, 那就是安裝 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 埠時才需要指定. 參考 :
可見透過 WP-ngrok 外掛幫助, WordPress 網站的 CSS 與 Javascript 檔都能順利下載, 所以才能看到與 localhost 內網相同的網站內容. 因為 WP-ngrok 就可以解決全部問題, 所以我就把上面修改的 wp-config.php 復原, 同時將安裝啟用的 relative url 或 relative urls 停用刪除.
沒有留言 :
張貼留言