經過前面三篇文章的介紹，我們已經知道如何安裝設定 HealthChecks、監控多個相依服務 與 自訂 HealthChecks 呈現結果(呈現每個相依服務)。在這一篇，我們將簡單介紹如何透過相關套件，讓相依服務運作狀態以圖形化介面呈現。


本系列實作的範例程式：HealthCheckDemo






整個 HealthChecks UI 的設定整體流程如下圖，其簡易說明如下：

  1.  ui 網頁預設網址為 /healthcheck-ui，可以透過設定改變 (後面會提)
  2. 需要設定 記憶體 (InMemory) 或 資料庫 來儲存狀態變更紀錄
  3. 需要自訂一個 response，其 ResponseWriter 使用 UIResponseWriter.WriteHealthCheckUIResponse
  4. 依據需求，設定多久更新資料 與 儲存多少歷史紀錄...等。





Step 1. 首先我們必須先下載 AspNetCore.HealthChecks.UI、AspNetCore.HealthChecks.UI.Client  與 AspNetCore.HealthChecks.InMemory.Storage 套件。點選工具 > NuGet 套件管理員 > 管理方案的 NuGet 套件 





Step 2. 搜尋 AspNetCore.HealthChecks.UI 與 AspNetCore.HealthChecks.UI.Client，勾選專案點選安裝





Step 3. 搜尋 AspNetCore.HealthChecks.InMemory.Storage，勾選專案後進行安裝




Step 4. 在 Startup.cs 的 ConfigureServices 方法內加上下列程式碼，設定更新時間與歷史紀錄數量



加入內容會長的像下圖紅色框區塊





Step 5. 在 Startup.cs 的 Configure方法內加上下列程式碼進行設定，包含取得資料的位置為 /healthui、使用 UIResponseWriter.WriteHealthCheckUIResponse 格式。




加入內容會長的像下圖紅色框區塊





Step 6. 接下來我們要告知 HealthCheck UI 從哪邊取得資料。我們選擇從 appsetting.json 取得設定資料，而不寫在 Startup.cs。 開啟 appsetting.json，加入下列設定。Name 可以自訂，Uri 則設定與上一步資料位址與格式設定相同，使用 /healthui




appsetting.json 長相應該如下圖紅色框區塊





Step 7. 啟動程式，輸入預設 /healthcheck_ui 即可看見漂亮的 UI 畫面 





Step 8. 我們嘗試將資料庫關閉一陣子後再開啟。再點選 旁邊 Detail，即可看建服務歷史紀錄，確認資料庫曾經有段時間無法運作。







如此一來，我們即完成 HealthCheck UI 功能，倘若你不想使用預設路徑，你可以透過下列設定變更路徑：

app.UseHealthChecksUI(options =>

 {

     options.UIPath = "/healthui";

 });