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、效果演示

效果演示