k8s离线部署芋道源码前端

概述

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

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

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

编译

先将前端源码进行编译

npm run build:prod 1

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;"] 12345678910111213

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; } } 12345678910111213141516171819202122232425

构建

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

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 123

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 123456789101112131415161718192021222324252627282930313233343536373839404142

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 1234567891011121314151617181920212223