嗨各位讀者，最近好嗎？
今天讓筆者來分享一下天罰貓網頁的後台技術。

在 Node-RED 上建立 Web Server

後台最基本的需求，當然是「靜態資源伺服器」。

在基於 NodeJS 的 Node-RED 上開發一個 HTTP web 伺服器，是再自然不過的應用了。作法就是從內建的 http node 出發，根據需求，將資料一路向右接到 http response node。

例如，你可以在其中串接 file node，Node-RED 就變成了靜態資源服務器（static file server）。一條 flow 代表著一個請求路徑，會對應回應的檔案。

聰明的服務器：根據路徑回應靜態資源

進階一點，你可能會想要靜態資源服務器更聰明，能夠根據請求路徑，動態的回應某個資料夾上的檔案。但你又不想要建立太多條 http node 到 http response node 的 flow。

這時，第三方套件 node-red-contrib-uibuilder (以下簡稱 uibuilder) 可以幫助你實現這個功能。

uibuilder 簡介

uibuilder 提供了一個 node 讓你可以靠它實現一個根據路徑的靜態資源服務器。它預設的靜態資源路徑是 ~/.node-red/uibuilder/uibuilder。也就是說你可以將所有 Web 專案資源放在這裏，你就可以用 Node-RED 建立一個單頁式網頁應用（Single Page Application）。如果想要客製化其他路徑，可以在 uibuilder node 的 URL 欄位設定。

連接網址 localhost:1880/uibuilder 可以看到歡迎畫面

而天罰貓網頁應用也是個 SPA，筆者會將打包好的 React 專案資源放在預設路徑 ~/.node-red/uibuilder/uibuilder。

我們已經看完了天罰貓網頁端應用後台的第一部分（靜態資源回應）。接下來我們會來看看天罰貓後台的其他功能。