直接用 nginx:alpine 镜像挂载 dist 目录最省事，无需构建镜像或使用轻量服务；需确保 dist 已构建完成，并将 dist 挂载至 root 指定路径（如 /usr/share/nginx/html），配置通过 ConfigMap 管理，history 模式需在 location / 块中添加 try_files $uri $uri/ /index.html; 实现 fallback。
直接用 Nginx 镜像挂载 dist 目录最省事
不需要自己写 Dockerfile 构建镜像，也不用折腾 serve、http-server 这类轻量服务——nginx:alpine 镜像开箱即用，只需把打包好的 dist 目录挂进去就行。前提是你的前端项目已执行过 npm run build 或 yarn build，生成了静态文件。
常见错误是直接 COPY 本地 dist 到镜像里再推送到私有仓库，结果每次更新都要 rebuild + push，CI/CD 流水线变长、镜像层冗余。更合理的方式是：用空 nginx 镜像 + 挂载外部存储（如 NFS PVC）或 ConfigMap/Secret（小文件），让镜像不变、内容可换。
- 若用
hostPath或emptyDir，只适合单节点测试，Pod 重建后内容丢失 - 生产必须用
PersistentVolume+PersistentVolumeClaim，推荐 NFS 或云厂商提供的 NAS - 挂载路径必须和 nginx.conf 中的
root指向一致，比如root /usr/share/nginx/html;，那就要把 dist 挂到/usr/share/nginx/html
ConfigMap 存 nginx.conf，别硬编码进镜像
把 Nginx 配置抽成 ConfigMap，能解耦配置与镜像生命周期。比如路由重写、gzip 开关、CORS 头、history 模式 fallback，全靠它控制。一旦改配置，只需 kubectl apply -f nginx-configmap.yaml，Nginx Pod 会自动 reload（前提是容器内有 reload 逻辑，或用了 subPath + volumeMounts 触发 inotify）。
注意几个坑：
立即学习“前端免费学习笔记（深入）”；
-
data字段下键名就是文件名，比如nginx.conf，挂载时subPath必须严格匹配，否则 404 - ConfigMap 容量上限约 1MB，不适合放大文件（如证书、字体），证书必须走
Secret - 修改 ConfigMap 后，已有 Pod 不会自动更新挂载内容；需滚动重启或加
restartPolicy: Always配合 livenessProbe 触发
Ingress + TLS 要配 Secret，不是直接扔证书文件
用 Ingress 暴露前端服务时，HTTPS 证书不能放在 ConfigMap 里，必须存为 Secret 类型，且 key 固定为 tls.crt 和 tls.key。否则 Ingress Controller（如 nginx-ingress 或 ingress-nginx）压根不认。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
正确做法：
- 用
kubectl create secret tls frontend-tls --cert=fullchain.pem --key=privkey.pem -n default - Ingress resource 的
spec.tls块中，secretName必须和上面创建的 Secret 名字完全一致 - 如果用 Let’s Encrypt，建议直接上
cert-manager，它会自动申请、续期并注入 Secret，不用手动维护 PEM 文件
容易忽略的是：Ingress 的 host 必须和证书的 SAN 匹配，否则浏览器报 NET::ERR_CERT_COMMON_NAME_INVALID。
Vue/React history 模式必须配 location fallback
前端路由用 history 模式时，刷新页面 404 是常态——因为 Nginx 根本不知道 /user/profile 是前端路由，它只找物理文件。解决方法是在 nginx.conf 里加 try_files $uri $uri/ /index.html;。
但要注意位置：
- 必须写在
location /块里，不能只写在server级；否则子路径（如/static/js/xxx.js）也会被 fallback，导致资源加载失败 - 如果用了子路径部署（如
publicPath: "/my-app/"），则 fallback 应该是/my-app/index.html，而不是/index.html - 某些 Ingress Controller（如阿里云 ALB）支持
alb.ingress.kubernetes.io/rewrite-to注解做路径重写，但 fallback 逻辑仍得由后端 Nginx 承担
这个配置点不在 Kubernetes 层，而在 Nginx 配置本身，但一旦漏掉，整个前端路由就不可用，而且错误现象隐蔽——只有刷新或直连子路径才暴露。
