10分钟上手vue-admin-template容器化部署：从0到1的Kubernetes实践指南
项目地址: https://gitcode.com/gh_mirrors/vu/vue-admin-template 你是否还在为前端项目部署繁琐、环境不一致而头疼？本文将带你通过Docker+Kubernetes实现vue-admin-template的容器化部署，解决"开发时正常，部署后出错"的经典难题。读完本文你将掌握：容器镜像构建、K8s资源配置、滚动更新全流程，让后台管理系统部署像喝水一样简单。
为什么选择容器化部署？
传统部署方式需要在服务器手动配置Node环境、解决依赖冲突，而容器化具有以下优势：
- 环境一致性：开发/测试/生产环境完全一致
- 资源隔离：应用间互不干扰，避免"一个应用崩溃影响所有服务"
- 弹性伸缩：基于K8s可实现流量高峰自动扩容
- 版本控制：支持镜像版本回滚，故障恢复更可靠
准备工作：环境与工具
开始前请确保已安装：
- Docker Engine (20.10+)
- Kubernetes集群 (1.20+)
- kubectl命令行工具
第一步：构建Docker镜像
1. 创建Dockerfile
在项目根目录创建Dockerfile（项目路径：gh_mirrors/vu/vue-admin-template）：
# 构建阶段
FROM node:16-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install --registry=https://registry.npmmirror.com
COPY . .
RUN npm run build:prod # 对应package.json中的构建命令
# 生产阶段
FROM nginx:alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
2. 配置Nginx
创建nginx.conf文件解决前端路由问题：
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
# 支持history模式路由
location / {
try_files $uri $uri/ /index.html;
}
# 静态资源缓存配置
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 1y;
add_header Cache-Control "public, max-age=31536000";
}
}
3. 构建并测试镜像
# 构建镜像
docker build -t vue-admin-template:v1.0 .
# 本地测试
docker run -d -p 8080:80 --name admin-test vue-admin-template:v1.0
访问http://localhost:8080验证应用是否正常运行，登录界面应如下所示：
注：实际部署时建议使用私有镜像仓库，如Harbor或阿里云ACR
第二步：Kubernetes部署配置
1. 创建Deployment
创建deployment.yaml文件（项目路径：gh_mirrors/vu/vue-admin-template）：
apiVersion: apps/v1
kind: Deployment
metadata:
name: vue-admin
namespace: default
spec:
replicas: 2 # 初始2个副本，保证高可用
selector:
matchLabels:
app: vue-admin
template:
metadata:
labels:
app: vue-admin
spec:
containers:
- name: vue-admin
image: vue-admin-template:v1.0 # 替换为你的镜像地址
ports:
- containerPort: 80
resources:
requests:
cpu: 100m
memory: 128Mi
limits:
cpu: 500m
memory: 256Mi
livenessProbe: # 存活探针
httpGet:
path: /
port: 80
initialDelaySeconds: 30
periodSeconds: 10
readinessProbe: # 就绪探针
httpGet:
path: /
port: 80
initialDelaySeconds: 5
periodSeconds: 5
2. 创建Service
创建service.yaml文件暴露服务：
apiVersion: v1
kind: Service
metadata:
name: vue-admin-service
namespace: default
spec:
selector:
app: vue-admin
ports:
- port: 80
targetPort: 80
type: ClusterIP # 内部服务，如需外部访问可使用NodePort或Ingress
3. 配置Ingress（可选）
如需从外部访问，创建ingress.yaml：
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
name: vue-admin-ingress
namespace: default
annotations:
nginx.ingress.kubernetes.io/rewrite-target: /
spec:
rules:
- host: admin.example.com # 替换为你的域名
http:
paths:
- path: /
pathType: Prefix
backend:
service:
name: vue-admin-service
port:
number: 80
第三步：执行部署与验证
1. 应用K8s配置
# 部署应用
kubectl apply -f deployment.yaml
kubectl apply -f service.yaml
# 如配置了Ingress
kubectl apply -f ingress.yaml
2. 验证部署状态
# 查看Pod状态
kubectl get pods -l app=vue-admin
# 查看部署状态
kubectl rollout status deployment/vue-admin
# 查看服务
kubectl get svc vue-admin-service
正常输出应类似：
NAME READY STATUS RESTARTS AGE
vue-admin-7f9658b8c-2xq7m 1/1 Running 0 5m
vue-admin-7f9658b8c-9zlkj 1/1 Running 0 5m
3. 访问应用
通过Service IP或Ingress域名访问应用，成功登录后可看到系统仪表盘：
第四步：实现CI/CD自动化（进阶）
为实现代码提交后自动构建部署，可配置GitLab CI/CD，在项目根目录创建.gitlab-ci.yml：
stages:
- build
- deploy
build-image:
stage: build
script:
- docker build -t $REGISTRY_URL/vue-admin-template:$CI_COMMIT_SHORT_SHA .
- docker push $REGISTRY_URL/vue-admin-template:$CI_COMMIT_SHORT_SHA
only:
- main
deploy-k8s:
stage: deploy
script:
- kubectl set image deployment/vue-admin vue-admin=$REGISTRY_URL/vue-admin-template:$CI_COMMIT_SHORT_SHA
only:
- main
常见问题解决方案
| 问题现象 | 可能原因 | 解决方案 |
|---|---|---|
| 页面空白，控制台报404 | 路由模式与Nginx配置不匹配 | 检查Nginx的try_files配置 |
| 镜像拉取失败 | 镜像地址错误或私有仓库认证问题 | 使用kubectl create secret docker-registry配置凭证 |
| Pod反复重启 | 资源限制过低或健康检查失败 | 调整resources.limits或修正探针配置 |
| 样式错乱 | 构建时静态资源路径错误 | 检查vue.config.js中的publicPath配置 |
总结与后续优化
通过本文步骤，你已成功将vue-admin-template部署到Kubernetes集群。建议进一步优化：
- 监控告警：集成Prometheus+Grafana监控应用健康状态
- 日志收集：使用ELK或Loki收集前端错误日志
- 自动扩缩容：配置HPA实现基于CPU/内存的自动扩缩容
- 金丝雀发布：结合Istio实现流量灰度发布
收藏本文，下次部署前端项目时直接套用这套流程，让你的部署效率提升10倍！关注我，下期带来《K8s资源优化实战：从1核2G到512M的极限压榨》。
官方文档：README.md
项目源码：gh_mirrors/vu/vue-admin-template
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
