Line 點餐系統 (Eatsy) 系統架構紀錄

說到點餐系統開發，這次的專案算是做了一次徹底的「大換血」。我們決定拋棄過去的歷史包袱，改採前後端分離與服務解耦的現代化設計架構，把系統乾淨俐落地解耦為「對外服務的前台 Web App」、「內部管理的後台系統」，以及「核心後端 API 服務與背景任務執行器」。

透過這樣清晰的邊界劃分，讓不同的服務能各自選擇最適合的技術棧與部署環境，這陣子維護起來真的覺得清爽多了！這篇就簡單紀錄一下這次架構升級的心得與各項技術決策。

架構總覽

系統架構總覽

1. 後端 API 服務 (.NET 10)

做為系統的核心大腦，後端統一負責處理所有業務邏輯、資料存取與外部系統的整合溝通。這部分我們算是下足了重本：

  • 核心框架：基於最新的 .NET 10 構建，透過 Docker 容器化部署以提供穩定的 API 服務。
  • 資料庫與 ORM：捨棄傳統龐大的 Entity Framework，選用了輕量、靈活且性能極佳的 SqlSugarCore 作為 ORM 框架，兼顧了開發效率與執行效能。
  • 快取與基礎設施儲存：
    • Redis：不只用做分散式快取，也用於管理 LINE 登入 state、短效 token（如註冊與綁定 token）以及非同步任務佇列，提升跨流程的狀態管理能力，並改善尖峰流量下的讀取壓力。
    • 物件儲存：整合與 S3 相容的 Cloudflare R2 做為圖片與靜態資產儲存，降低伺服器端檔案管理的負擔與流量成本。
  • 日誌與監控：使用 NLog 收集系統日誌，並對接到 Seq 集中化結構化日誌（Structured Logging）服務，提升 API 錯誤追蹤與問題定位效率。
  • 通訊與第三方整合：
    • LINE 與外部通知整合：深度串接 LineBotSDK（處理 LINE Login、LIFF 互動與推播訊息）與 Telegram Bot API，讓店家可綁定並即時接收新訂單與系統事件通知。
    • 統一金流閘道 (Payment Gateway)：建立統一金流介面，整合 LINE Pay、PAYUNi 與 ezPay 等支付服務，利用 PaymentGatewayFactory 抽象不同服務商，處理付款重導向、Webhook Callback 驗證、金額比對與防重複通知機制。
    • 雲端出單機服務 (Cloud Printer)：整合飛鵝與 Xpyun / XPrinter 雲端出單機，透過 PrinterProviderFactory 抽象不同品牌 API，支援訂單自動列印、測試列印、印表機狀態健康檢查與列印日誌追蹤。
    • 基礎庫支援：影像處理底層採用高效的 SkiaSharp，複雜 Excel 報表匯出入則依賴於 NPOI。
  • 部署彈性與非同步任務（API / Worker 模式切換）：
    • 容器多用途切換：同一份後端 Docker 映像檔可依據環境變數（如 ENABLE_JOB_REGISTRATION）切換為 API 模式或 Job 執行模式，藉此將背景排程與大量資源消耗任務從 API 主流量隔離，降低部署複雜度。
    • 非同步 AI 菜單解析：提供 AI 菜單圖片解析功能，整合 SiliconFlow OpenAI 相容服務，將解析任務丟入 Redis Queue，由背景 Worker 進行非同步處理，降低大量菜單匯入時對 API 造成的即時運算壓力。

2. 前台 Web App (Next.js)

這是直接面對消費者的第一線，所以我們更是把載入效能、SEO 優化、以及流暢的動畫體驗給「拉滿」。更別提與 LINE 生態圈的深度結合了，基本上就是要把最絲滑的體驗留在這裡：

  • 核心框架：採用極度前滿的 Next.js 16.1.0 (搭配 React 19) 打造。
  • 樣式與 UI 系統：
    • 採用最新的 Tailwind CSS v4 引擎進行原子化 CSS 開發，避免樣式衝突。
    • 基於無頭組件庫 Radix UI 構建高品質、且具備高無障礙性 (A11y) 的互動元件。
  • 狀態管理與視覺動畫：
    • 放棄笨重的 Redux，改採輕量、簡潔的 Zustand 作為全域狀態管理。
    • 大量應用 Framer Motion 實作細膩流暢的互動與轉場動畫效果，提升使用者體驗。
  • 特定業務與邊緣部署整合：
    • 深度整合 @line/liff 套件，打造在 LINE 內部即可無縫開啟的微應用，實現「加好友即會員」的 O2O 流暢轉換體驗。
    • 容器化與 CDN 加速：前台採用 Docker 容器化部署於 VPS，外層搭配 Cloudflare CDN 進行靜態資源快取與網路加速，優化首屏載入速度與行動裝置上的讀取體驗。

3. 後台管理系統 (Vue 3)

專為內部營運人員打造的管理介面。這裡跟前台「效能至上」的出發點不太一樣，後台的需求通常很直接：要有豐富的元件庫、能扛住龐大表單與複雜的報表視覺化，說白了就是「開發效率優先」：

  • 核心框架：基於 Vue 3 + Vite 4 的標準現代化配置（整合 TypeScript），確保極快的開發冷啟動速度與熱更新體驗。
  • UI 框架與動態路由：
    • 介面採用基於 Material Design 規範的巨型組件庫 Vuetify 3 為基礎設計。
    • 採用了前端開發者熱愛的 vite-plugin-pages 與 vite-plugin-vue-layouts 插件，實現了「基於文件目錄的自動化路由 (File-based routing)」。
  • 狀態管理與權限控制：
    • 使用 Vue 生態當紅的 Pinia 取代 Vuex 進行狀態管理，結構更清晰。
  • 實用工具與資料展現：
    • 營運報表視覺化搭載了 ApexCharts 與 Chart.js 兩種圖表引擎。
    • 富文本編輯器同時準備了高度可客製化的 Tiptap（搭配 vue-quill），而全域狀態/工具函式更是大量依靠開源神庫 VueUse 以降低開發成本。

4. 題外話：全自動化 AI 重構體驗 (Next-Gen Dev)

值得一提的是，這次能把這個龐大的系統「大換血」，有一大部分要歸功於 AI 的輔助。

在 2025 年 12 月，我就乾脆把整個重構過程交給了 Antigravity 與 Codex CLI 這些 AI Agent 工具。剛好那陣子運氣不錯，Antigravity 的 Opus 4.6 模型額度多到幾乎用不完，我就順水推舟，在那個月裡讓 AI 幫我高速產出、重構、爬坑，最後把整個點餐系統完整重構上線了！不得不說，有了 AI 加持，這種「單人輾壓全端」的開發體驗真的非常爽快。

總結：架構亮點與決策考量

回顧這次的重構與技術選型，其實重構重點不是單純換框架，而是把舊單體中耦合的前台、後台、API 與背景任務拆出清楚的部署邊界。以下幾點是覺得特別值得紀錄的決策：

  1. 依據場景的漸進式架構：前台採用 Next.js App Router 搭配 Cloudflare CDN 進行靜態資源快取，優化行動端消費者體驗；後台則採 Vite SPA 與成熟元件庫以開發效率優先；核心商業邏輯與背景任務則利用同一份 Docker 映像檔並透過環境變數隔離負載，三者各司其職。
  2. 輕量極速的後端資料層：選擇了 SqlSugarCore 搭配 .NET 10，拋開傳統笨重的 ORM 框架，在保證執行效能的同時提升開發迭代速度。
  3. 更完整的 LINE O2O 體驗：透過 LIFF 登入、LINE Pay 支付串接與 LINE 官方帳號即時互動，為消費者打造無摩擦的行動點餐流程。
  4. 因地制宜的前端「雙刀流」：「重展示、重網速觸及」的前端用生態最廣的 React/Next.js；「重表單處理、重成套 UI 基礎」的管理後台則挑選適合團隊快速建構的 Vue 3 / Vuetify。不為了技術單一化而妥協業務需求。

相關連結