Blog

{筆記} Word 文件插入程式碼高亮顯示與列出行號

原來是使用 Notepad++ 安裝了 NppExport 外掛後可以將各種程式語言的程式碼連同高亮 (highlight) 的樣式一併可以複製到 Word 文件內,但相較 VSCode 可以直接複製含高亮的樣式略顯不便,且 Notepad++ 高亮的樣式還是感覺比較陽春,使用 VSCode 複製程式碼應該是目前使用過效果最好的。不過原來在 VSCode 環境內使用「One Dark Pro」Theme,直接複製貼到 Word 文件內程式碼背景是深色的,與原來編輯的文件比較不搭,所以要貼到 Word 前,最好改為淺色系的主題,如「Atom One Light」。

程式碼高亮格式貼到 Word 文件內現在可以很直覺方便,但有一個問題,如果要顯示行號 (Line number),是不建議在 VSCode 內使用外掛或巨集為程式碼內容內加上行號,爾後要從 Word/轉PDF 文件內複製程式碼會相當不方便,所以最好的作法是為該段程式碼在 Word 內加上行號,但不能使用編號方式,會把整個文件搞亂掉。

{筆記} Word 文件插入程式碼高亮顯示與列出行號
閱讀全文 »

微服務總體系統部署架構

** 本文同步發表於 FB社群-軟體設計鮮思維 **

微服務總體系統部署架構

Client (用戶端)

  • 通常爲使用者界面 (User Interface),例如網頁 (Web Page) 。
  • 用戶端可以透過 API Gateway 取得系統提供的服務。
  • 除了使用者介面外,也可以是其它裝置,例如 Mobile App,以及來自外部系統的 Request。

Identity Provider (身份辨識提供者)

  • 將來自用戶端的請求 (request) 傳遞給身份提供者,身份提供者對客戶端的請求進行身份驗證並將請求傳達給 API Gateway。
  • 通過定義良好 (well defined) 的 API Gateway,將請求轉派 (delegate) 至系統內部的微服務。

API Gateway

  • 用戶端不直接調用 (invoke) 服務,而是透過 API Gateway (閘道) 擔任進入點 (entry point),將請求轉發至適當的微服務。
  • 收到用戶端的請求後,內部架構由微服務組成,微服務通過訊息的相互傳遞,以處理用戶端請求。

使用 API Gateway 的好處

  • 對所有的微服務形成良好的封裝 (encapsulation),內部微服務的變動不會影響到用戶端。
  • 可以將外部通用的協定 (protocol),轉換為 Intranet 內部所使用特定的通訊協定。
  • 可以提供系統橫切 (cross-cut) 的非功能性需求,例如安全性 (security)、負載平衡 (load balance) 等。

Static Content (靜態內容)

將微服務處理後的靜態內容,部署至雲端平台的存儲機制,該機制可以經由內容傳遞網絡 (CDN, Content Delivery Network) 傳回給用戶端,進而可以提供效能、可擴展與較低成本網路傳遞。

Service Discovery (服務檢索)

提供一種目錄服務 (directory service) 的方式,而可以透過多樣化的檢索方式來取得所對應的微服務。

System Management (系統管理)

負責系統節點 (node) 的負載平衡,以及檢測故障 (failures)。

微服務 (Microservices) vs 單體式 (Monolithic) 系統比較

MicroservicesMonolithic
部署 (Deployment)應用程式基於特定的業務能力界定多個微服務,每個微服務爲獨立可各別被部署應用程式只有一個單元的主體
耦合性 (Coupling)每個微服務已元件化,彼此間的溝通只透過 API 連結,因而形成良好的寬鬆耦合 (loose coupling)功能模組之間沒有良好的隔離而造成緊密耦合 (tight coupling)
延展性 (Scalability)可以視微服務的負載情形而各別擴展系統資源只能對系統整體採以複製 (clone) 的方式擴展
開發 (Development)可以依微服務的性質採不同的實現技術;每個微服務的實作團隊可以並行分工開發只能選擇一種特定的實作技術;團隊的分工大都採以模組的切割,或依據分層的技術,需要較高的專案管理 Effort
維護性 (Maintenance)每個微服務可以個別獨立建置、部署與維護由於只有單體式的系統,所以管理與維護會依系統規模度而有着等比複雜度的提昇
適用系統性質平台 (Platform)、產品 (Product)專案 (Project)
適合系統規模大型涵蓋多個業務範疇 (如 ERP) 的系統小型團隊建構規模較小的系統
適合雲端服務非常適合系統規模越大,就越難以部署至雲端平台上
系統開發難易度• 需有總體架構規劃,架構師 (Architect) 或架構團隊需有效界定微服務的邊界 (Bounded Context),以及制定微服務間的 API 協定
• 微服務平行分工的開發團隊需高度正向的密切溝通,持續整合不僅涵蓋技術,也包括人
因大都採以資料導向 (data oriented) 的開發模式,所以初期開發容易;但隨着系統規模度與變動性的議題,很容易導致複雜度的提昇,系統易淪於僵化而難以維護

升級桌機電腦 (Ryzen 3700x + 64Gb DDR4 DRAM) 後的效能比較 (原 i7-2600 + 32Gb DDR3 DRAM)

參考原來寫的這篇:「升級桌機電腦 – Ryzen 3700x + 64Gb Ram + Noctua NH-U12A + M.2 512Gb PCIe3」。升級之後,同時可以暢跑多個 Docker 容器與給予共 24Gb 的 Primo RamdiskPrimoCache,系統資源仍頗為充裕。

在升級前,也同時記錄了老主機 (Intel i7-2600) 的系統效能,然後再對比升級後 (AMD Ryzen 3700x) 的系統效能,看看差距了多少。

首先看 CINEBENCH R20 的跑分,CPU 效能差了有4倍以上之多!

升級桌機電腦 (Ryzen 3700x + 64Gb DDR4 DRAM) 後的效能比較 (原 i7-2600 + 32Gb DDR3 DRAM)
閱讀全文 »

使用 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」後的程式碼展現效果對比如下:

閱讀全文 »
軟體思維顧問

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

Personal