前後端開發

公司舊系統是 Vue，新功能想用 React，又不能一次重寫。Module Federation 確實能讓兩套前端在執行時組合，但「載得到遠端 JavaScript」和「React 能渲染 Vue 組件」中間還差一層框架邊界。 這篇原本直接暴露 .vue 檔，再讓 React host 匯入，設定裡還混用了兩套 Vite federation 外掛的選項。那種範例看起來完整，複製後卻會卡在 runtime、型別與生命週期。我把它改成一條比較老實的路：Vue remote 對外暴露 mount()／unmount() 介面，React 只提供 DOM 容器。 Module Federation 只負責載入模組Module Federation讓不同建置產物在執行時載入彼此暴露的 JavaScript 模組。它處理 remote entry、模組解析和 shared dependency 協商，但不會把 Vue component 自動轉成 React component。 跨框架時我會把責任切成這樣： 12345React Host └─ 建立一個空 DOM 節點 └...

半夜接到電話說網站掛了的感覺，過一次就不想再有第二次。Cloudflare 不是什麼魔法，但它確實解決了大部分小網站會遇到的問題：DDoS、SSL 憑證、DNS 緩慢、靜態資源重複傳輸。 什麼是 Cloudflare？它站在你和流量之間Cloudflare 是一個反向代理網路，全球超過 330 個資料中心，當使用者連到你的網域時，流量先經過 Cloudflare 的節點，再轉發到你的伺服器。這個架構帶來三件事： 流量過濾：惡意請求在邊緣節點就被攔下，DDoS 流量能降低到達源站的機率，但沒有任何系統能保證攔下所有入侵手法。 靜態快取：Cloudflare 預設快取 CSS、JavaScript、圖片等特定靜態副檔名；HTML 預設不快取，要另外設 Cache Rules，且登入與個人化頁面通常不該快取。 邊緣 SSL：訪客到 Cloudflare 邊緣的連線自動加密，但端到端安全還取決於你選擇的 SSL/TLS 模式與源站憑證狀態（後面細說）。 根據 Cloudflare 2025 年第一季報告，Q1 阻擋了 2,050 萬次 DDoS 攻擊，較去年同期增長 358%。截至本...

當你的網站顯示 401.3 錯誤IIS 網站部署後出現： HTTP 錯誤 401.3 - Unauthorized因為網頁伺服器上此資源的存取控制清單 (ACL) 設定或加密設定的緣故，您沒有檢視此目錄或網頁的權限。 HTTP 401.3 是什麼HTTP 401.3 是 IIS 特有的狀態碼，表示「由於 ACL 限制，請求被拒絕」。與一般的 401（認證失敗）不同，401.3 明確指出這是檔案系統權限問題，不是網站認證設定的問題。 IIS 想提供你請求的資源，但它持有的身分沒有足夠的 NTFS 權限來讀取那些檔案。 IUSR 是什麼IUSR（Internet User）是 IIS 的預設匿名存取帳戶。每當訪客在未登入的狀態下存取網站，IIS 就以 IUSR 的身分去讀取網站資源。如果網站資料夾的 NTFS ACL 沒有賦予 IUSR 讀取權限，就會觸發 401.3。 授予 IUSR 適當的權限1. 找到你的網站根目錄首先，找到你的網站檔案所在的實體路徑。通常是在： C:\inetpub\wwwroot\你的網站名稱 或是你自訂的其他位置 2. 設定資料夾權限 在檔案總管中...

前言排程任務在後端開發裡幾乎無所不在：定期備份資料、產生報表、發送郵件、執行系統維護。Quartz.NET 是 .NET 生態裡最成熟的開源排程框架，提供豐富的功能，也有足夠的彈性應對各種場景。 Scheduler Job Store Thread Pool Jobs Triggers Listeners Plugins Quartz.NET 是什麼?Quartz.NET 是 Java Quartz 排程框架的 .NET 移植版，提供企業級的排程功能： 支援複雜的排程模式（Cron 表達式） 具備叢集功能，可確保高可用性 提供任務持久化 彈性的錯誤處理機制 豐富的監控與管理功能 基本概念Quartz.NET 有三個核心元件： J...

前言身為後端工程師，你是否遇過這樣的情況： 系統突然變得超級慢 網頁一直轉圈圈 收到「已超過連線逾時的設定」錯誤訊息 如果有，很可能就是連線池爆掉了。以下分享一個真實案例，從診斷、緊急處理到根治。 問題診斷當你遇到以下錯誤訊息時，很可能是連線池出問題了： 1System.InvalidOperationException: '已超過連線逾時的設定。在取得集區連線之前超過逾時等待的時間，可能的原因為所有的共用連線已在使用中，並已達共用集區大小的最大值。' 先看 SQL Server session，再回應用程式確認 pool首先，用以下 SQL 查看 SQL Server 目前的 session 狀況。這只能協助排除阻塞、慢查詢與異常連線來源，不能單靠它證明某個 ADO.NET pool 已耗盡；後面還要對照應用程式的 pool timeout、程序、完整連線字串與併發監控。sys.sysprocesses 是已棄用的相容性視圖，這裡改用 DMV： 123456789101112-- 各資料庫連線數摘要（依登入帳號、狀態分組）SELECT DB_N...

專案用 httpVueLoader 在瀏覽器直接載入 .vue 檔，沒有 webpack、沒有建置步驟，改完存檔重新整理就看得到結果。方便是方便，但我很快撞到一個惱人的狀況：明明改了 SurveyPit.vue，按 F5 畫面還是舊的，連改了三次都一樣。 第一個念頭是去包 keep-alive，結果越包越糟。後來才弄懂，「快取」這個詞在 Vue 裡指兩種完全不同的東西，方向搞錯就會像我那樣白忙。所以先把這兩件事拆開講。 兩種「快取」 瀏覽器檔案快取（這篇要解的）：瀏覽器為了省流量，會把抓過的 .vue、.js 暫存起來。你改了檔案、重新整理，瀏覽器拿出暫存的舊檔，於是看到舊內容。這是 HTTP 層的事。 元件實例快取：keep-alive 在做的事。它把元件實例留在記憶體裡，切走再切回來時不重建，保留表單輸入跟捲動位置。這是記憶體層的狀態保留，跟「檔案有沒有更新」沒關係。 把這兩者搞混的代價很實際。我當初想解「改完 .vue 不更新」卻跑去包 keep-alive，不但沒效，反而把舊實例牢牢釘在記憶體裡，新內容更難冒出來。 問題情境當時專案有這幾個用 httpVueLoader...

問題情境專案部署到 IIS 的虛擬目錄，URL 結構如下： 本機：http://localhost:56961/Project/ 正式環境：https://www.project.com.tw/Project/ HTML 裡的圖片路徑寫 ./Content/images/image.png，本機跑得好好的，上正式就全破圖。 實際原因：./ 是相對路徑，參考點是「解析該路徑的檔案位置」，不是 HTML 頁面。若圖片路徑寫在外部 .css 檔（例如放在 /Project/styles/main.css），瀏覽器會以 CSS 檔的目錄為基準，把 ./Content/images/image.png 解析成 /Project/styles/Content/images/image.png，而非你預期的 /Project/Content/images/image.png。 換部署位置（從本機 localhost 換到子目錄或反向代理後方）時，CSS 檔的實際 URL 路徑可能跟著變，就會踩到這個問題。 三種解法方案一：硬寫絕對路徑1background: url("/Proj...

這篇舊稿原本把 Pinia 寫成「也支援 Vue 2」，還用 tree-shaking 和一組沒有來源的體積數字來分勝負。到了 2026 年，前一句已經過時，後一句也把幾個不同概念混在一起。 先講我的選擇：新開的 Vue 3 專案直接用 Pinia。既有 Vuex 專案是否搬遷，則看 Vue 版本、外掛依賴與測試覆蓋率，沒必要為了跟上推薦名單就整批重寫。 官方定位已經很清楚Pinia 官方介紹說明，它在 2019 年從 Composition API 的 store 實驗開始，後來吸收 Vuex 5 討論中的想法，最後成為 Vue 官方推薦的狀態管理方案。 Vuex 沒有因此突然失效。Vuex 3 對應 Vue 2，Vuex 4 對應 Vue 3，既有系統仍可以維護；只是新專案沒有太多理由再背 mutation、巢狀 module 與額外的 TypeScript 包裝。 還有一個版本陷阱：Pinia 最新主線只支援 Vue 3。需要 Vue 2 的專案得留在 Pinia v2 分支，不能把「Pinia 曾支援 Vue 2」寫成「最新版仍支援」。 mutation 為什麼消失了？V...