Antd篇-如何antd前端运行在k8s集群中

1- 构建镜像

• nginx配置文件

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  /var/log/nginx/access.log  main;
  sendfile        on;
  keepalive_timeout  65;
  gzip on;
  gzip_buffers 32 4k;
  gzip_comp_level 6;
  gzip_min_length 10;
  gzip_types text/css text/plain text/xml application/javascript application/xml;
  gzip_vary on;
  server {
    listen       8000; # 这个要和antd环境配置(.env文件中)里面的参数一致
    server_name  localhost;
    location / {
      root   /app;
      index  index.html;
      try_files $uri $uri/ /index.html;
      add_header Cache-Control "no-cache";   # 不启用缓存，每次发版之后页面自动刷新
    }
    location ^~ /api/ {
      proxy_pass http://172.0.0.11:8088;
    }
    location ^~ /server {
      proxy_pass http://172.0.0.11:8099;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}

• Dockerfile

FROM node:10
COPY ./ /app
WORKDIR /app
RUN npm install --registry https://registry.npm.taobao.org && npm run build

FROM nginx
RUN mkdir /app
COPY --from=0 /app/dist /app
COPY nginx.conf /etc/nginx/nginx.conf

2- 准备部署脚本

• deployment.yml

apiVersion: apps/v1
kind: Deployment
metadata:
  name:  myAntd
  namespace: default
  labels:
    name:  myAntd
spec:
  selector:
    matchLabels:
      name: myAntd
  replicas: 1
  strategy:
    rollingUpdate:
      maxSurge: 25%
      maxUnavailable: 25%
    type: RollingUpdate
  template:
    metadata:
      labels:
        name:  myAntd
    spec:
      containers:
      - name:  myAntd
        image:  harbor.test.com/web/myAntd:v1
        resources:
          requests:
            cpu: 100m
            memory: 100Mi
          limits:
            cpu: 1G
            memory: 1Gi
        livenessProbe:
          tcpSocket:
            port: 8000 # 这个要和antd环境配置(.env文件中)里面的参数一致
          initialDelaySeconds: 5
          timeoutSeconds: 5
          successThreshold: 1
          failureThreshold: 3
          periodSeconds: 30
        readinessProbe:
          tcpSocket:
            port: 8000 # 这个要和antd环境配置(.env文件中)里面的参数一致
          initialDelaySeconds: 5
          timeoutSeconds: 5
          successThreshold: 1
          failureThreshold: 3
          periodSeconds: 30
        env:
        - name: POD_NAME
          valueFrom:
            fieldRef:
              fieldPath: metadata.name
        - name: POD_NAMESPACE
          valueFrom:
            fieldRef:
              fieldPath: metadata.namespace
        ports:
        - containerPort:  8000 # 这个要和antd环境配置(.env文件中)里面的参数一致
          name:  myAntd
        volumeMounts:
        - name: localtime
          mountPath: /etc/localtime
        - name: serverlogs
          mountPath: /app/logs
      imagePullSecrets:
      - name: harbor-admin
      volumes:
        - name: localtime
          hostPath:
            path: /usr/share/zoneinfo/Asia/Shanghai
        - name: serverlogs
          hostPath:
              path: /app/logs
      restartPolicy: Always

• service.yml

这是通过nodePort的方式暴露服务，生产不建议使用这种方式，生产可以用traefik！
traefik安装配置详解: https://blog.csdn.net/qq_35550345/article/details/107061942
traefik配置ingress : https://blog.csdn.net/qq_35550345/article/details/104686325

apiVersion: v1
kind: Service
metadata:
  name: myAntd
  namespace: default
  labels:
    name: myAntd
spec:
  type: NodePort
  ports:
  - port: 8077
    targetPort: 8000	# 这个要和antd环境配置(.env文件中)里面的参数一致
    nodePort: 8077
  selector:
    name: myAntd

3- jenkinsfile配置

def GitUrl='[email protected]:web/myAntd.git'
def HarborHost="harbor.test.com"
def BuildStage="${params.STAGE}"
def GitBranch="${params.BRANCH}".replace('origin/', '')
def ImageTag="${BuildStage}_${GitBranch}_${BUILD_TIMESTAMP}".replace('/', '_')

node("master"){
    stage("GitClone"){
        git url: "${GitUrl}", branch: "${GitBranch}"
    }
    stage("Build Image"){
        sh "docker build -t harbor.test.com/web/myAntd:${ImageTag} -f Dockerfile-${BuildStage} ."
        sh "docker tag harbor.test.com/web/myAntd:${ImageTag} harbor.test.com/web/myAntd:latest"
        sh "docker image prune -f"
    }
    stage("Push Image"){
        sh "docker push harbor.test.com/web/myAntd:${ImageTag} &>/dev/null"
        sh "docker push harbor.test.com/web/myAntd:latest &>/dev/null"
    }
    stage("Update"){
        if (BuildStage == 'dev') {
            println """
                开发环境需手动执行!
                kubectl set image -n default deployment/myAntd myAntd=${HarborHost}/web/myAntd:${ImageTag}
            """
        } else {
            def KUBECTL="/usr/local/bin/kubectl"
            def KUBE_CONFIG="--kubeconfig=/home/root/.kube/config_${BuildStage}"
            sh "${KUBECTL} ${KUBE_CONFIG} set image -n default deployment/myAntd myAntd=${HarborHost}/web/myAntd:${ImageTag}"
        }
    }
}

4- 部署

# k8s添加deployment 和 service
kubectl apply -f deployment.yml
kubectl apply -f service.yml

# jenkins上添加流水线，其中jenkinsfile内容见上文
# 发布流参数有 STAGE（环境参数） 和 BRANCH（分支参数，默认为 origin/master）
# 然后运行流水线即可！