全端開發2025

綠芬芳手工皂品牌形象網站

完整的品牌形象平台,從 PM2 遷移至 k3s/ArgoCD GitOps 架構,整合 Drizzle ORM、PostgreSQL 與 MinIO 儲存。

綠芬芳手工皂品牌形象網站

專案概述

綠芬芳原本是簡易的形象網站,現已演進為生產級的雲原生平台。包含 Nuxt 3 SSG 前台、Vue 3 管理後台及 Node.js Express 後端。整個基礎設施從單機 PM2 遷移至由 ArgoCD (GitOps) 管理的 k3s 叢集。資料存取從 MySQL 遷移至 PostgreSQL,並採用 Drizzle ORM 提供型別安全;所有媒體資源均改存於 S3 相容的 MinIO 中。系統同時整合了 Prometheus/Grafana 監控,追蹤 HTTP 指標與資料庫效能。

技術挑戰與解決方案

零停機基礎設施遷移

在不中斷生產環境的情況下,將傳統 VM 上的 PM2 程序管理遷移至容器化的 k3s 叢集。

解決方案:
實作 ArgoCD GitOps 工作流,利用 K8s Jobs 處理資料庫 Migration。自動化 CI/CD 流程:構建 Docker 映像後,同步更新「Side Project Ops」倉儲中的部署 manifest,確保更新過程可預測且可回滾。

儲存與資料庫現化代

原有的 MySQL 搭配本地硬碟儲存不具備擴展性,且多節點備份困難。

解決方案:
遷移至 PostgreSQL 以獲得更好的效能與 ACID 遵循,並採用 Drizzle ORM 簡化 Schema 管理。將本地檔案上傳替換為中心化的 MinIO S3 服務,讓儲存層與應用層完全解耦。

可觀測性整合

缺乏對後端效能的監控,特別是 S3 存取延遲和資料庫查詢瓶頸。

解決方案:
在 Express 後端整合 prom-client 暴露 /metrics 端點。在 Grafana 建立自定義儀表板,即時監控 HTTP 請求量、錯誤率,以及精確追蹤 S3/DB 的操作耗時。

系統架構

系統架構圖

前台:Nuxt 3 (SSG) + Tailwind CSS。後端:Node.js (ESM) + Express + Drizzle ORM + PostgreSQL。儲存:MinIO (S3 相容,透過 aws-sdk client-s3)。基礎設施:k3s (Kubernetes) + ArgoCD (GitOps) + GitHub Actions CI/CD。可觀測性:Prometheus (prom-client) + Grafana,包含請求延遲與 S3 操作自定義指標。安全:Helmet、Express Rate Limit 與 CSRF 防護。

學習與心得

這個專案是一場基礎設施現代化的實戰課。將運行中的系統從 PM2 遷移到 Kubernetes,讓我學會處理容器化、Secret 管理,以及利用 ArgoCD Hooks 執行零停機資料庫遷移。我也獲得了 S3 相容儲存及 Drizzle ORM 型別安全資料存取的深部經驗,取代了舊有的 MySQL 模式。

技術棧

前台

Nuxt 3Tailwind CSSTypeScript

後端

Node.js (ESM)ExpressDrizzle ORMPostgreSQLMinIO (S3)

部署管理

Kubernetes (k3s)ArgoCD (GitOps)GitHub Actions

監控與可觀測性

PrometheusGrafana