k8s离线部署芋道源码前端

概述

   本篇将对 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: 1selector:matchLabels:app: vuetemplate:metadata:labels:app: vuespec:containers:- name: vueimage: harbor.easzlab.io.local:8443/library/fun-vue:1.0.0imagePullPolicy: Alwaysports:- containerPort: 80name: http- containerPort: 443name: https---
# 创建Pod的Service
apiVersion: v1
kind: Service
metadata:name: vue-svcnamespace: default
spec:ports:- port: 80protocol: TCPtargetPort: 80selector:app: vue

ingress

#ingress
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:name: ingress-allnamespace: defaultannotations:nginx.ingress.kubernetes.io/rewrite-target: /
#    kubernetes.io/ingress.class: nginx
spec:ingressClassName: nginxrules:- host: "all.fun.com"http:paths:- pathType: Prefixpath: /backend:service:name: openresty-svcport:number: 80