k8s 部署 vue 项目

打包vue项目

npm run build

命令执行后，会产生dist文件夹，将dist文件夹通过xftp拷贝到服务器上自己新建的文件夹下

创建Nginx config配置文件

在同目录下新建 default.conf

server {
	listen       80;
	server_name  localhost;
	
	#charset koi8-r;
	access_log  /var/log/nginx/host.access.log  main;
	error_log  /var/log/nginx/error.log  error;
	
	location / {
	    root   /usr/share/nginx/html;
	    index  index.html index.htm;
	}
	
	#error_page  404              /404.html;
	
	# redirect server error pages to the static page /50x.html
	#
	error_page   500 502 503 504  /50x.html;
	location = /50x.html {
	    root   /usr/share/nginx/html;
	}
}

该配置文件定义了首页的指向为 /usr/share/nginx/html/index.html，所以我们可以一会把构建出来的 index.html 文件和相关的静态资源放到 /usr/share/nginx/html 目录下。

创建 Dockerfile文件

FROM 10.104.60.11/lib/nginx:1.18.0
MAINTAINER "lxc"
LABEL description="审计管理"
COPY dist/ /usr/share/nginx/html/
COPY default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

• 自定义构建镜像的时候基于 Dockerfile 来构建
• FROM nginx 命令的意思该镜像是基于 nginx:latest 镜像而构建的
• COPY dist/ /usr/share/nginx/html/ 命令的意思是将项目根目录下 dist 文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下
• COPY default.conf /etc/nginx/conf.d/default.conf 命令的意思是将 Nginx 目录下的 default.conf 复制到 etc/nginx/conf.d/default.conf，用本地的 default.conf 配置来替换 Nginx 镜像里的默认配置

制作镜像并上传

xxx 指的是服务器的ip地址

docker build -t web-audit:v1.1.0 .
docker tag web-audit:v1.1.0 xxx/k8s/web-audit:v1.1.0
docker push xxx/k8s/web-audit

编写 web-audit-cluster.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: web-audit
  namespace: wfw-test
  labels:
    app: web-audit
spec:
  replicas: 3
  selector:
    matchLabels:
      app: web-audit    # has to match .spec.template.metadata.labels
  template:
    metadata:
      labels:
        app: web-audit # has to match .spec.selector.matchLabels
    spec:
      imagePullSecrets:
        - name: harbor-secret
      containers:
        - name: web-audit
          image: xxx/k8s/web-audit:v1.1.0
          imagePullPolicy: Always
          #args: [--spring.profiles.active=cluster]
          ports:
            - containerPort: 80
              name: web-audit
          resources:
            requests:
              memory: 300Mi
              cpu: 200m
            limits:
              memory: 500Mi
              cpu: 400m

---
kind: Service
apiVersion: v1
metadata:
  name: web-audit
  namespace: wfw-test
  labels:
    app: web-audit
spec:
  ports:
    - name: web-audit
      port: 80
  selector:
    app: web-audit

---
#ingress
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: web-audit # Ingress 的名称
  namespace: wfw-test # 命名空间 接下来的部署都会使用这个命名空间
spec:
  rules:
    - host: audit.wyyy.com # 通过 Ingress 映射的地址 , 需要通过host去配置,下面讲解
      http:
        paths:
          - path: /
            backend:
              serviceName: web-audit # 这里对应着service 的 名字
              servicePort: 80 # 对应着需要映射的service的端口

kubectl create -f web-audit-cluster.yaml 

deployment.apps/web-audit created
service/web-audit created
ingress.extensions/web-audit created

# kubectl get pod -n wfw-test
NAME                              READY   STATUS    RESTARTS   AGE
web-audit-b7f58447d-d22qx         1/1     Running   0          13s
web-audit-b7f58447d-pw2rb         1/1     Running   0          13s
web-audit-b7f58447d-tv4pk         1/1     Running   0          13s

修改 C:\Windows\System32\drivers\etc hosts文件

新增如下：
xxx audit.wyyy.com

浏览器中输入 http://audit.wyyy.com/ 即可打开vue项目