使用 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 建置多個網域的 WordPress 站台開發 (運行) 環境

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

$ docker network create nginx-proxy

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

閱讀全文 »

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

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

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

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

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

閱讀全文 »

[安裝筆記] Windows 10 WSL 2 安裝 Docker Desktop (含更改 Docker Image 路徑)

在 Windows 10 要能充分整合 Docker 應用與開發,安裝 Docker Desktop 是最理想的。

關於 Docker Desktop 可以參考官方文件的介紹

Docker Desktop is an easy-to-install application for your Mac or Windows environment that enables you to build and share containerized applications and microservices.
Docker Desktop includes Docker Engine, Docker CLI client, Docker Compose, Docker Content Trust, Kubernetes, and Credential Helper.

安裝 Docker Desktop 之前,要先確認在 Windows 10 系統上已安裝建置好 WSL 2 的 Linux 子系統,可以參考前寫的:[安裝筆記] Windows 10 安裝 Linux 子系統 (WSL2)。

安裝 Docker Desktop 只要下載官方的安裝檔並執行安裝即可。這裡有篇很詳細的安裝文件,可以參考:How to Set Up Docker in WSL [Step-by-Step]

安裝完 Docker Desktop,系統會提示登出 (logout) 再重新登入,如此 Docker 已常駐於系統 (可觀察工作列的通知區有否鯨魚圖示),點擊該圖示即可出現 Docker Desktop 操作介面。
[安裝筆記] Windows 10 WSL 2 安裝 Docker Desktop (含更改 Docker Image 路徑)

閱讀全文 »

Windows Terminal 美化 for WSL 2 Ubuntu (zsh + zim + powerlevel10k)

Windows Terminal 美化 for WSL 2 Ubuntu (zsh + zim + powerlevel10k)

執行 Ubuntu@WSL 最好用的就屬 Windows Terminal,這是在 Microsoft Store 就可以找到直接安裝的。從 Terminal 運行 Ubuntu,最好是給它美化一番,視覺化與介面操作性會好上很多。

看到這篇:「用 zsh + zim + powerlevel10k 讓你的 Terminal 潮又快」,以前我所使用的 oh-my-zsh 的 zsh 配置框架,看來現在有了效能更佳的 Zim 可以選擇,而且設定更是容易,所以也更着依樣畫葫蘆主要照該篇介紹再佐以 Zim 與 Powerlevel10K 的官方說明安裝與設定。

底下就摘記下安裝 zsh + zim + powerl10k 的步驟:

閱讀全文 »

[安裝筆記] Windows 10 安裝 Linux 子系統 (WSL2)

在 Windows 10 上跑 Linux 子系統,實在太過方便了!尤其是近年所推出 WSL 2 (Windows Subsystem for Linux version 2),利用其內建的虛擬機器 (其實就是輕量化後的 Hyper-V),可以充分完整支持原生 Linux 核心 (kernel),擁有比前一版 WSL 1 更好的效能與穩定性。

如何安裝 WSL 2 @Windows 10 環境,相當簡單,可以參考官網 WSL 文件:
Windows 10 上適用於 Linux 的 Windows 子系統安裝指南」。這裏僅摘要記錄下安裝的要項:

啓用 WSL 功能與所需組件

開啓「控制台 —> 程式和功能 —> 開啟或關Windows功能」,勾選如圖必要功能:「Windows 子系統 Linux 版」與「虛擬機器平台」,至於「Hyper-V」則不需要,原來以爲需要,再爬文才知「虛擬機器平台」就是輕量化 (lightweight)的 Hyper-V 虛擬機。勾選完畢後重新開機。
啓用 WSL 功能與所需組件

閱讀全文 »

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

Visual Link Preview

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

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

閱讀全文 »

軟體思維顧問

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

Personal