k8s部署vue项目

1、准备工作

kubectl version
Client Version: v1.28.2

首先制作vue项目的docker image，然后上传至仓库
没有docker镜像仓库的可以参考教程 https://blog.csdn.net/qq_41076892/article/details/139692963

2、运行yaml

# accumulation-ui.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: accumulation-ui
  namespace: dev
spec:
  replicas: 1
  selector:
    matchLabels:
      app: accumulation-ui
  template:
    metadata:
      labels:
        app: accumulation-ui
    spec:
      containers:
        - name: accumulation-ui
          image: 192.168.255.132/library/accumulation-ui:202406130100
          imagePullPolicy: IfNotPresent
          ports:
            - name: rest
              containerPort: 80
              protocol: TCP

kubectl apply -f accumulation-ui.yaml

# 查看是否成功运行
[root@k8s-master vue]# kubectl get pod -n dev |grep accumulation-ui
accumulation-ui-58557f496-hbv6d                                   1/1     Running   0                49m

3、创建service和ingress

# accumulation-svc-ingress.yaml
---
apiVersion: v1
kind: Service
metadata:
  name: accumulation-ui-svc
  namespace: dev
spec:
  selector:
    app: accumulation-ui
  ports:
    - protocol: TCP
      port: 80
      targetPort: 80
  clusterIP: None
  type: ClusterIP

---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: accumulation-ingress
  namespace: dev
spec:
  ingressClassName: nginx
  rules:
    - host: nginx.demo.com
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: accumulation-ui-svc
                port:
                  number: 80

kubectl apply -f accumulation-svc-ingress.yaml

[root@k8s-master vue]# kubectl get svc,ingress -n dev | grep accumulation
service/accumulation-ui-svc   ClusterIP   None            <none>        80/TCP         93m
ingress.networking.k8s.io/accumulation-ingress   nginx   nginx.demo.com,tomcat.demo.com             192.168.255.143   80      93m

验证：在Windows，hosts文件添加
192.168.255.143 nginx.demo.com
浏览器输入域名，nginx.demo.com，正常加载，说明成功。