如何用Kubernetes部署前端静态项目-Golang-PHP中文网

直接用 nginx:alpine 镜像挂载 dist 目录最省事，无需构建镜像或使用轻量服务；需确保 dist 已构建完成，并将 dist 挂载至 root 指定路径（如 /usr/share/nginx/html），配置通过 configmap 管理，history 模式需在 location / 块中添加 try_files $uri $uri/ /index.html; 实现 fallback。

如何用kubernetes部署前端静态项目

直接用 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 前端开发

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 配置本身，但一旦漏掉，整个前端路由就不可用，而且错误现象隐蔽——只有刷新或直连子路径才暴露。