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

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

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

架構總覽

系統架構總覽

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

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

  • 核心框架：基於最新的 .NET 10 構建，透過 Docker 容器化部署以提供高併發、極其穩定的 API 微服務。
  • 資料庫與 ORM：捨棄傳統龐大的 Entity Framework，選用了輕量、靈活且性能極佳的 SqlSugarCore 作為 ORM 框架，大幅兼顧了開發效率與執行效能。
  • 快取與基礎設施儲存：
    • Redis：用做分散式快取與狀態管理 (StackExchangeRedis)，有效減輕資料庫的讀取負擔並提昇前端 API 的回應速度。
    • 物件儲存：採用與 S3 相容的 Cloudflare R2 處理所有靜態檔案與會員上傳圖檔，享有免流量費與全球邊緣節點加速的優勢。
  • 日誌與監控：使用 NLog 收集系統日誌，並對接到 Seq 服務，實現強大的「結構化日誌（Structured Logging）」即時查詢與異常監控能力。
  • 通訊與第三方整合：
    • 深度串接了 LineBotSDK，用來處理複雜的 LINE Login 以及推播訊息。
    • 核心使用了 Polly 來建立起微服務容錯與自動重試機制（Resilience），有效提升系統韌性。
    • 影像處理底層採用高效的 SkiaSharp，複雜 Excel 報表匯出入則依賴於 NPOI。

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 流暢轉換體驗。
    • 結合 Cloudflare 邊緣運算：使用了 @cloudflare/next-on-pages 與 wrangler，將網頁打包部署至全球邊緣節點 (Edge Node)，讓消費者存取網頁時能擁有極致載入速度。

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 加持，這種「單人輾壓全端」的開發體驗真的非常爽快。

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

回顧這次的重構與技術選型，其實有不少踩坑後的體悟，以下幾點是覺得特別值得紀錄的決策：

  1. **依據場景的漸進式架構 (Edge Computing)**：前台直接面對客戶存取，因此採用 Next.js 針對 Cloudflare Pages 把靜態資源推至邊緣節點加速；後台是管理用，採 Vite SPA 減輕伺服器負擔；核心商業邏輯 .NET API 則依賴 Docker 容器化提供穩健服務，三者各司其職。
  2. 輕量極速的後端資料層：選擇了 SqlSugarCore 搭配 .NET 10，完全拋開了傳統龐大笨重的 ORM 框架，在保證執行效能的同時大幅提升開發迭代速度。
  3. 消除摩擦的 LINE O2O 體驗：由前後端分別利用 LIFF 與 LineBotSDK 來包辦 LINE 登入與資料綁定，替消費者省去下載 App 與繁瑣表單註冊過程，是最符合現代餐飲服務的最佳解。
  4. 因地制宜的前端「雙刀流」：「重展示、重網速觸及」的前端用生態最廣的 React/Next.js；「重表單處理、重成套 UI 基礎」的管理後台則挑選適合團隊快速建構的 Vue 3 / Vuetify。不為了技術單一化而妥協業務需求。

相關連結