2026西湖龙井茶官网DTC发售：茶农直供，政府溯源防伪到农户家
系列：从零开始掌握 Kubernetes — 第一部分 · 第二部分 · 第三部分 · 第四部分 · 第五部分
你已经来到了最后一部分。现在，你拥有一个真实的 Kubernetes 集群、自动化的传输层安全协议（TLS）、基于 ArgoCD 的 GitOps 工作流、PostgreSQL 数据库，以及一个运行着两个副本的 FastAPI 后端服务。唯一缺失的就是用户实际看到的内容：前端应用。
我们将部署两个独立的应用程序，它们消费同一个应用程序编程接口（API）。一个是管理仪表板（使用 React 和 Vite 构建）。另一个是公共应用（使用 Vue 3 构建）。两者都使用 Docker 进行打包，在生产环境中通过 nginx 提供服务，并通过入口控制器（Ingress）结合传输层安全协议（TLS）对外暴露。最后，我们将运行一次完整的集成测试。
最终架构
┌────────────────────────────────────────────────────────────┐
│ 互联网 │
│ │ │
│ ┌────────────────────┼────────────────────┐ │
│ │ │ │ │
│ ▼ ▼ ▼ │
│ ┌──────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ admin. │ │ api. │ │ app. │ │
│ │你的域名 │ │你的域名.com │ │你的域名.com │ │
│ └────┬─────┘ └──────┬───────┘ └──────┬───────┘ │
│ │ │ │ │
│ ▼ ▼ ▼ │
│ ┌──────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ React │ │ FastAPI │ │ Vue 3 │ │
│ │ 管理面板 │───▶│ 后端服务 │◀───│ 着陆页 │ │
│ │ (Vite) │ │ (2个副本) │ │ (Vite) │ │
│ └──────────┘ └──────┬───────┘ └──────────────┘ │
│ │ │
│ ▼ │
│ ┌────────────────┐ │
│ │ PostgreSQL 16 │ │
│ │ (CloudNativePG)│ │
│ └────────────────┘ │
│ │
│ ☸️ Kubernetes (kubeadm + containerd + Calico) │
│ 🌐 nginx 入口控制器 + cert-manager (Let's Encrypt TLS) │
│ 🔄 ArgoCD — 所有内容从 GitHub 同步 │
└────────────────────────────────────────────────────────────┘
A 部分：前端 #1 — 管理仪表板 (React + Vite)
npm create vite@latest frontend-admin -- --template react-ts
cd frontend-admin && npm install
src/App.tsx（简化版）：
免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。
