(二十七)、k8s 部署前端项目

文章目录

1、页面展示

效果演示

1.1、卡片展示

1.2、时间效果

1.3、反转效果

2、deployment.yaml

复制代码
apiVersion: apps/v1
kind: Deployment
metadata:
  name: xxx-frontend
  namespace: xxx
  labels:
    app: xxx-frontend
    version: v1
spec:
  replicas: 2
  strategy:
    type: RollingUpdate
    rollingUpdate:
      maxUnavailable: 1
      maxSurge: 1
  selector:
    matchLabels:
      app: xxx-frontend
  template:
    metadata:
      labels:
        app: xxx-frontend
        version: v1
    spec:
      imagePullSecrets:
      - name: registry-secret
      containers:
      - name: frontend
        image: xxx/frontend:${IMAGE_TAG}
        imagePullPolicy: IfNotPresent
        ports:
        - containerPort: 80
          name: http
        volumeMounts:
        - name: nginx-config
          mountPath: /etc/nginx/nginx.conf
          subPath: nginx.conf
        resources:
          requests:
            memory: "128Mi"
            cpu: "100m"
          limits:
            memory: "256Mi"
            cpu: "200m"
        readinessProbe:
          httpGet:
            path: /
            port: 80
          initialDelaySeconds: 5
          periodSeconds: 5
          timeoutSeconds: 3
          failureThreshold: 3
        livenessProbe:
          httpGet:
            path: /
            port: 80
          initialDelaySeconds: 10
          periodSeconds: 30
          timeoutSeconds: 5
          failureThreshold: 3
      volumes:
      - name: nginx-config
        configMap:
          name: nginx-config
      restartPolicy: Always

3、执行 yaml 文件

kubectl apply -f deployment.yaml

4、效果演示

效果演示

相关推荐
白白白白熊爱吃麦当劳2 小时前
k8s知识点总结5
docker·容器·kubernetes
鲸落落丶2 小时前
webpack学习
前端·学习·webpack
excel3 小时前
深入理解 3D 火焰着色器:从 Shadertoy 到 Three.js 的完整实现解析
前端
光影少年3 小时前
vue打包优化方案都有哪些?
前端·javascript·vue.js
硅谷工具人4 小时前
vue3边学边做系列(3)-路由缓存接口封装
前端·缓存·前端框架·vue
β添砖java5 小时前
CSS网格布局
前端·css·html
K_i1345 小时前
Kubernetes HTTPS迁移:Ingress到GatewayAPI实战
容器·https·kubernetes
木易 士心7 小时前
Ref 和 Reactive 响应式原理剖析与代码实现
前端·javascript·vue.js