Headless CMS 選型與 K3s 部署架構：Strapi vs. Storyblok

傳統 CMS（如 WordPress）把前台畫面和後台資料庫綁在一起；Headless CMS 則是把負責畫面的「頭」拿掉，後台只專注於資料與內容管理，並提供 API。開發者保留自己撰寫的前台（例如 Vue），讓前台透過 fetch 或 axios 向後台拿 JSON 資料來渲染畫面。

---

工具選型：Strapi vs. Storyblok

選擇的關鍵在於內容更新的方式是表單式還是視覺化拖拉。

	Strapi	Storyblok
類型	開源自託管	SaaS 託管
適合情境	表單式內容管理（替換文字、上傳圖片）	視覺化拖拉編輯（WYSIWYG）
後台介面	直覺乾淨的表單	Visual Editor，可直接在預覽畫面拖拉區塊
費用	軟體免費，需自建伺服器或雲端環境	免費 Starter 方案：1 個專案、每月 100GB 流量、10 萬次 API 請求
維運成本	高（資料庫備份、升級、擴容）	低（後台與 DB 由 Storyblok 負責）

---

K3s 部署架構

兩套工具在 Kubernetes 上的資源需求差異很大。

Strapi 架構（3 個 Pod）

┌─────────────┐    ┌─────────────┐    ┌─────────────┐
│ frontend-pod│◄───│  strapi-pod │◄───│   db-pod    │
│  Vue + Nginx│    │  API :1337  │    │  PostgreSQL │
└─────────────┘    └─────────────┘    └──────┬──────┘
                                             │ PVC
                                       (資料持久化)

• db-pod：PostgreSQL，必須設定 PersistentVolumeClaim（PVC），否則容器重啟後資料會消失
• strapi-pod：提供圖形化後台與 API，預設 port 1337
• frontend-pod：Vue 專案打包進 Nginx 映像檔

Storyblok 架構（1 個 Pod）

┌─────────────┐         Storyblok Cloud
│ frontend-pod│◄────── API + CDN + 後台 + DB
│  Vue + Nginx│         （全部託管）
└─────────────┘

只需部署前台 Pod，後台、資料庫、CDN 全由 Storyblok 負責，大幅降低維護成本。

---

Prototype 階段：不花錢的對外連線方式

如果 K3s 機器有公開 IP，Prototype 測試完全不需要買網域：

魔法 DNS（最推薦）

使用 nip.io 或 sslip.io，將 Ingress host 設為 <服務名稱>.<IP>.nip.io，流量會自動解析回主機，零設定。

NodePort

繞過 Ingress，直接把 Service 設為 NodePort，透過 http://<公開IP>:<高埠號> 連線，適合快速驗證。

修改本機 hosts 檔

在 Ingress 設定假網域，請測試者在自己電腦的 /etc/hosts 加上對應關係。適合小範圍內部測試。

---

實作注意事項

Strapi：圖片儲存

在 K8s 環境中，建議安裝 AWS S3 或 GCS 插件來存放上傳的圖片，避免處理複雜的分散式 StorageClass。

Strapi：CORS 設定

Vue 呼叫 API 的網址（公開 IP 或 nip.io 網址）必須在 Strapi 後台加入 CORS 白名單，否則請求會被直接擋掉。

Storyblok：本地開發

Storyblok 的 Visual Editor 是透過 iframe 嵌入你的網站來實現拖拉編輯，在本地開發時需要用 ngrok 等工具把 localhost 暴露到外網，Storyblok 才能順利載入本機畫面。