概述

   本篇将对 k8s离线部署芋道源码前端 进行详细的说明，对如何构建 Dockerfile，如何整合 Nginx，如何整合 ingress 进行实践。

   相关文章：nacos在k8s上的集群安装实践

  效果如下(电脑只8G内存，所以演示较卡)：

编译

先将前端源码进行编译

npm run build:prod

Dockerfile 构建

结构目录如下：

Dockerfile

FROM harbor.easzlab.io.local:8443/library/nginx:stable-alpine3.19-perl

# 将 Vue 项目的打包文件复制到 Nginx 静态文件目录下
COPY dist/ /usr/share/nginx/html/

# 复制自定义的 Nginx 配置文件到容器中
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露容器的 80 端口
EXPOSE 80

# 容器启动时执行的命令
CMD ["nginx", "-g", "daemon off;"]

nginx.conf

server {
    listen 80;
    server_name localhost;

    location / {
        root   /usr/share/nginx/html/;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }
    location /prod-api/{
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://gateway.default.svc.cluster.local:48080/;
    }
    # 避免actuator暴露
    if ($request_uri ~ "/actuator") {
        return 403;
    }
    error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
    }
}

构建

先构建镜像，再上传至私服。

docker build -t fun-vue/fun-vue:1.0.0 .
docker tag fun-vue/fun-vue:1.0.0 harbor.easzlab.io.local:8443/library/fun-vue:1.0.0
docker push  harbor.easzlab.io.local:8443/library/fun-vue:1.0.0

k8s部署

前端镜像部署

vue-dp.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: vue
spec:
  # 根据需求设置副本数量
  replicas: 1
  selector:
    matchLabels:
      app: vue
  template:
    metadata:
      labels:
        app: vue
    spec:
      containers:
      - name: vue
        image: harbor.easzlab.io.local:8443/library/fun-vue:1.0.0
        imagePullPolicy: Always
        ports:
        - containerPort: 80
          name: http
        - containerPort: 443
          name: https


---
# 创建Pod的Service
apiVersion: v1
kind: Service
metadata:
  name: vue-svc
  namespace: default
spec:
  ports:
  - port: 80
    protocol: TCP
    targetPort: 80
  selector:
    app: vue

ingress

#ingress
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: ingress-all
  namespace: default
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /
#    kubernetes.io/ingress.class: nginx
spec:
  ingressClassName: nginx
  rules:
  - host: "all.fun.com"
    http:
      paths:
        - pathType: Prefix
          path: /
          backend:
            service:
              name: openresty-svc
              port:
                number: 80