使用 Docker 建置多個網域的 WordPress 站台開發 (運行) 環境

問題 (Problem)

我想使用 Docker 容器的虛擬化技術,可以在本機端建立多個 WordPress 站台的開發環境,然後只透過一個 Nginx Web Server,負責接收多個網域 (multiple domain) 的 Http Request (例如 "blog1.localhost", "blog2.localhot"), 並自動將該網域的需求指向對應的 WordPress 站台,如此可以便於託管運行多站台或是方便本機端的開發。

如何有效設定 Docker 的虛擬開發環境,且不會影響到 Host 本機系統的干擾,如此可以方便方便移轉與部署開發環境至其它主機或對外運轉的系統上?

解決方案 (Solution)

  • 建置一個使用 Nginix Reverse Proxy Server Docker 專案。可以採用已建置完整反向代理設定自動化的 jwilder/nginx-proxy 的映像檔。
  • 建置一個完整的 WordPress 開發環境的 Docker 專案,內含 MySQL、phpmyadmin、Wordpress 等 Docker Image。

主要實作步驟

主要實作的方法參考這篇:「Host Multiple Websites On One VPS With Docker And Nginx」。當然對於 Docker 多個容器的配置檔 (docker-compose.yml) 設定,肯定要查找官方文件指引與其它網路設定分享文的。過程期間常要不斷地 Try-Error 才得以配置好 Docker 多個容器的開發環境。

在 WSL2 的 Docker 專案目錄結構參考如下:

首先需要先創建一個 Docker 網絡,如此得以將下列所有這些容器 (container) 橋接 (bridge) 在一起。打開終端機 (terminal),輸入下列指令:

$ docker network create nginx-proxy

接著就是可以參考上述的專案目錄結構,來創建兩個專案 (Nginx and WordPress),並為各自的資料夾編輯配置設定。

閱讀全文 »

[建站日誌] 更改 WordPress 內程式碼高亮 (hightlight) 展現的插件 (plugin) – 使用 Code Syntax Block

原來在 WordPress 文章內,要展現程式碼的高亮顯示,是使用了「WP-Syntax」這個插件,效果展示如下 (Screenshot):

WP-Syntax Screenshot

程式碼展現的效果是還不錯的,但這個 Plugin 已經好幾年沒有更新了,為了新版本相容性與後續所新增各類程式語法及文件格式等高亮顯示效果,所以改選設置了這個「Code Syntax Block」插件,它是採用了「Prism Syntax Highlighter」藉此來擴展 WordPress 內對於程式碼展現的效果,同時它也開源在 Github 上以便於後續的開發維護。參考這一篇:「[WordPress] 176 種程式語言高亮標色 讓程式碼更容易閱讀 (支援Gutenberg)」,內有詳細的安裝與設定說明。

改使用「Code Syntax Block」後的程式碼展現效果對比如下:

閱讀全文 »

在 WordPress 文章內顯示如 Facebook 鏈結預覽效果 – 安裝 Visual Link Preview 插件

Visual Link Preview

我經常在網路上查找特定主題的文章,當看到內容還不錯的,就會將之儲存到我使用 Notion 建立的閱讀清單,或使用 Hypothes 可以對網頁內容作摘記。當某篇文章我可能想分享個人的評論或重點文摘時,若是軟體本業的類型,我會分享到「FB 社團-軟體設計鮮思維」。如果是一般或生活性,我可能也會分享到個人FB或特定主題的社團。

我覺得分享文章鏈結在 Facebook 或 Tweet 時,所顯現的鏈結預覽效果挺不錯,同時我現在也打算將我在 FB 所分享的文章鏈結,以及心得摘要等,同步在 WordPress 文章內。不過我也希望能有鏈結預覽這種美觀又醒目的效果。查找外掛 (plugin) 資訊,找到這款還算不錯用的 Visual Link Preview。以下就是我使用其外掛所產生的預覽效果。

閱讀全文 »

[建站日誌] 虛擬主機主網域指向資料夾位置

這次移轉網站,我希望在虛擬主機上的資料夾整理能比較有組織性。假如我有兩個網域:primary and seconday domain (虛擬主機商一般允許可附加多個不同網域),然後主網域的前綴設爲 image (這也就是子網域 (sub-domain) 的設定議題),所有主網域的圖檔均可透過該子網域統一讀取。所以主要網域的規劃如下:

www.primarydomain.com (設爲主網域)
image.primarydomain.com (圖檔的讀取進入點)
www.secondarydomain.com(附加網域)

我希望資料夾的儲存位置設定爲:

\public_html\primarydomain => www.primarydomain.com
\public_html\primary_image => image.primarydomain.com
\public_html\secondarydomain => www.secondarydomain.com

但一般虛擬主機上的資料夾結構卻不是這樣設定。預設主網域規定一定要放在位於 \public_html 這個資料夾的根目錄上,但卻無法自行指定儲放於該目錄內的子資料夾內 (subfolder),而至於其它的子網域/附加網域,則是可以任意指定儲放的資料夾位置。

對於多個網站/網域的資料夾結構規劃而言,這並不合適。透過服務單詢問技術客服,得到的回答卻是只能這樣作。我對這結果當然不滿意,自行透過谷歌查找相關解決方案,發現到有同樣需求的用戶其實不少。因爲可能是 cPanel 的設計問題,預設確實無法這麼做,只能透過 .htaccess 的 Redirect 設定方式,但這種方式對一般用戶稍嫌不容易,所以主機商往往不會建議也不會主動提供這種做法。

閱讀全文 »

[建站日誌] WordPress 網站移轉至糖果主機

原來網站一直託寄在「網易主機」,運作已好幾年均很正常,對其客服高效率的回覆也很滿意,每一次購買都是三年期,但年底已到期,面臨到是否續約的考量。額,主要就是價錢的問題,服務與品質雖好,但價格仍偏高,然後還有一個重要的考量,就是希望我的網站內容可以被對岸直接讀取得到,所以綜合評估,最終選擇移轉到「糖果主機 (SugarHosts)」。

我是選擇「虛擬主機 → 亞太東部 → Shared Pro」方案,搭上聖誕節優惠與一次買三年週期折扣,這樣價錢 NT$5,580,相當便宜,而且頻寬限制、網站數量、附加網域/子網域 等都很寬鬆,這點挺滿意的。

花了快一天的時間將我的網站作移轉,其實難度不高,網路爬文一堆教學,如這篇就寫得很詳細:「如何更換新的虛擬主機?8 個步驟完成 WordPress 搬家」。不過我卡在希望能對主網域 (primary domain) 能否安裝位於 \public_html 下的子資料夾問題試了許久,期間問了技術客服也未果,不過總算爬文後成功自行解決多網站資料夾的組織議題,這另篇再來分享。

後續就看運作是否正常,以及穩定度、效率 …等,若真不適合,糖果主機的 退款策略 看來還蠻清楚實在的,30天內都可以無條件退款。當然,還是不希望再尋覓其它虛擬主機商,移轉這事還是嫌麻煩的。

WordPress 自行客製化 Sidebar Widget (隨機瀏覽/最新迴響) Plugin

原來我部落格右側 Sidebar 有使用對岸開發的「WP-RecentComments」plugin 所製成的 Widget,可以採 Tab 標籤方式切換「最近迴響 (recent comments)」與「隨機文章 (random posts)」,內容展示相當具彈性且不會佔據過長的版面。可惜該作者已停止維護,如使用在最新版本的 WordPress (4.9+) 啟用後在後台會有些錯誤訊息,是還可以使用,但總覺得不太妥當。

嗯,乾脆就自行實作類似的功能來撰寫屬於自己的第一支 wordpress plugin 小插件。整整花了一天,算是採以硬寫的方式,不是那麼具有客製化的設定,但起碼確實運行幾乎與原來上述的插件功能一般。尚差在沒有提供上下頁採 AJAX 的導覽功能,那比較麻煩些,可能就留待後續版本再來補充進來。

嗯,我是打算自行使用即可,所以並沒有公佈至 WordPress 官方的 plugin 儲庫內。不過為了後續的維護便利,我給上傳至 GitHub,並命名為「wp-plugin-tabbed-content-widget」 專案。若有部落格有興趣採用或研究者,歡迎自行下載即可。

先瞧瞧啟用該 Widget 後所展現的 Screentshot 效果:

閱讀全文 »

軟體思維顧問

專職軟體輔導與教育訓練的獨立顧問。輔導企業資訊單位如何有效組織系統開發與維護;輔導開發人員達成有效的專業分工。傳授如何把軟體作軟 (Keeping Software Soft)的技能,得以提昇系統的彈性/延展,並進而創造系統的再利用價值。

Personal