kubernetes之部署nginx+vue前端（一）

kubernetes之部署nginx+vue前端（一）

k8s系列项目的部署方式之一使用了kubernetes部署nginx+vue前端。

一、打包前端

将dist与Dockerfile放到同一目录下，Dockerfile内容如下：

FROM harbor.k8s/nginx:1.16
COPY nginx.conf /etc/nginx/nginx.conf
COPY dist/ /www/

构建镜像

docker build -t harbor.k8s/frontend:2021101401 .

# 推送到私服
docker push harbor.k8s/frontend:2021101401 

# 导出镜像
docker save harbor.k8s/frontend:2021101401  | gzip > frontend-2021101401.tar.gz

# 导入镜像
docker load < frontend-2021101401.tar.gz

二、k8s部署

执行部署命令

kubectl create -f frontend.yaml

下面是部署的 frontend.yaml：

apiVersion: v1
kind: Service
metadata:
  labels:
    app: frontend
  name: frontend-service
spec:
  ports:
  - port: 80
    protocol: TCP
    # dockerfile暴露的端口
    targetPort: 80
  selector:
    app: frontend
  type: NodePort
---
apiVersion: apps/v1
kind: Deployment
metadata:
  labels:
    app: frontend
  managedFields:
  name: frontend-deployment
spec:
  progressDeadlineSeconds: 600
  replicas: 1
  revisionHistoryLimit: 10
  selector:
    matchLabels:
      app: frontend
  strategy:
    rollingUpdate:
      maxSurge: 25%
      maxUnavailable: 25%
    type: RollingUpdate
  template:
    metadata:
      creationTimestamp: null
      labels:
        app: frontend
    spec:
      containers:
      # 需要注意修改对应的镜像
      - image: harbor.k8s/my-frontend:v1.0.0
        imagePullPolicy: IfNotPresent
        name: frontend
        ports:
        - containerPort: 80
          protocol: TCP
        resources:
          limits:
            cpu: '2'
            memory: 1024Mi
          requests:
            cpu: '1'
            memory: 10Mi
        terminationMessagePath: /dev/termination-log
        terminationMessagePolicy: File
        volumeMounts:
        - mountPath: /etc/nginx/nginx.conf
          name: nginx-conf
          subPath: nginx.conf
      dnsPolicy: ClusterFirst
      restartPolicy: Always
      schedulerName: default-scheduler
      securityContext: {}
      serviceAccount: default
      serviceAccountName: default
      terminationGracePeriodSeconds: 30
      volumes:
      - configMap:
          defaultMode: 420
          name: frontend-configmap
        name: nginx-conf
---
apiVersion: v1
kind: ConfigMap
metadata:
  labels:
    app: frontend-configmap
  name: frontend-configmap
# 配置nginx.conf，注意根据实际情况修改数据DNS库域名、端口和数据库的名称
data:
  nginx.conf: |
    events {
        worker_connections  1024;  ## Default: 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;
        #tcp_nopush     on;

        keepalive_timeout  65;

        #gzip  on;
        gzip on;
        gzip_min_length 1k;
        gzip_buffers 4 16k;
        gzip_http_version 1.0;
        gzip_comp_level 2;
        gzip_types text/plain application/javascript application/x-javascript application/json text/css font/ttf font/otf font/woff application/vnd.ms-fontobject image/vnd.microsoft.icon  image/svg+xml
     application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        gzip_vary on;

        client_max_body_size 300M;

        server {
            listen       80;
            server_name  localhost;
            resolver 10.96.0.10 valid=60s;

            location  / {
                    root /www/;
            }
            location /index.html {
                    root /www/;
            }
            location /favicon.ico {
                    root /www/;
            }
            location /*.js {
                    root /www/;
            }
            location /fonts/ {
                    root /www/;
            }
            location /img/ {
                    root /www/;
            }
            location /js/ {
                    root /www/;
            }
            # tomcat
            location /my-app/ {
                    proxy_pass http://my-app-service/my-app:8080/;
            }
            # springboot
            location /auth-center/ {
                    proxy_pass http://auth-center-service/;
            }
            location /websocket/ {
                    proxy_set_header   X-Real-IP $remote_addr;
                    proxy_set_header   Host      $http_host;
                    proxy_set_header   Cookie $http_cookie;
                    proxy_set_header   X-Real-IP   $remote_addr;
                    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
                    proxy_http_version 1.1;
                    proxy_set_header X-Client-IP $remote_addr;
                    proxy_set_header Upgrade $http_upgrade;
                    proxy_set_header Connection "upgrade";
                    proxy_read_timeout 300s;
                    proxy_pass  http://auth-center-service/;
            }
        }
    }

前提条件：k8s已经部署好my-app、auth-center-service、准备好了私服镜像：harbor.k8s/my-frontend:v1.0.0

# 获取service对外端口
kubectl get svc

效果：