k8s部署vue项目

2024-01-07 19:25:58

1、环境准备

提前搭建好的k8s集群准备：

192.168.56.30（master节点）

192.168.56.31（node节点）

harbor远程仓库准备：

192.168.56.14

2、创建nginx镜像

1）准备一个nginx安装包，我们这里的版本是1.18.0的

2）在同级目录下创建一个Dockerfile文件，内容如下
#基于centos基础镜像
FROM centos:7

#作者信息
MAINTAINER kgf

#安装环境依赖
RUN yum install -y pcre-devel wget net-tools gcc zlib zlib-devel make openssl-devel 


#将nginx安装包拷贝并且安装到/opt目录下
ADD nginx-1.18.0.tar.gz /opt/

#创建/usr/local/nginx目录
RUN mkdir -p /usr/local/nginx

#编译安装nginx
RUN cd /opt/nginx-1.18.0 && ./configure --prefix=/usr/local/nginx && make && make install


#暴露80端口
EXPOSE 80 

#启动nginx
ENTRYPOINT /usr/local/nginx/sbin/nginx && tail -f /etc/passwd
3）使用Dockerfile创建镜像

命令：docker build -t hub.harbor.com/library/kgf-nginx:v1 .

推送到harbor: docker push hub.harbor.com/library/kgf-nginx:v1

4）运行该镜像测试nginx是否正常运行

命令：docker run -d --name 自定义容器名称 -p 8080:80 镜像id /bin/bash

3、创建vue项目镜像

1）配置vue项目访问后端的配置文件

2）使用命令打包vue项目得到一个dist包

命令：npm run build

3）准备一个nginx.conf配置文件，配置我们的代理规则


worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;
	
    server {
        listen       80;
        server_name  localhost;

        location /gateway/ {
			proxy_pass http://192.168.56.30:32447;			
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Real-IP $remote_addr;
			add_header Content-Type "text/plain;charset=utf-8";
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST';
				
        }
   
        location / {
            root   /usr/local/nginx/html;
			try_files $uri $uri/ /index.html last;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }
}

4）创建Dockerfile文件，内容如下：

#基于centos基础镜像
FROM hub.harbor.com/library/kgf-nginx:v1

#作者信息
MAINTAINER kgf

COPY dist\
     /usr/local/nginx/html/

#删除默认的nginx.conf配置文件
RUN rm -rf /usr/local/nginx/conf/nginx.conf

#拷贝nginx.conf配置文件
COPY nginx.conf  /usr/local/nginx/conf/

#暴露80端口
EXPOSE 80 

#启动nginx
ENTRYPOINT /usr/local/nginx/sbin/nginx && tail -f /etc/passwd

5）执行Dockerfile文件生成镜像

命令：docker build -t hub.harbor.com/library/kgf-vue:v1 .

推送到harbor: docker push hub.harbor.com/library/kgf-vue:v1

6）创建vue项目的yaml文件，kgf-vue-deployment.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: kgf-vue
  namespace: kgf-dev
  labels:
    app: kgf-vue
spec:
  replicas: 1
  selector:
    matchLabels: { app: kgf-vue }
  strategy: 
    rollingUpdate:
      maxSurge: 1
      maxUnavailable: 1
    type: RollingUpdate  
  template:
    metadata:
      labels: { app: kgf-vue }
    spec:
      containers:
        - name: kgf-vue
          env:
            - name: kgf-vue
              valueFrom:
                fieldRef: { fieldPath: metadata.name }
          image: hub.harbor.com/library/kgf-vue:v1
          imagePullPolicy: IfNotPresent
          resources: 
            limits:
              cpu: 1
              memory: 512Mi
            requests:
              cpu: 0.4
              memory: 256Mi

7）创建vue项目的svc文件，kgf-vue-service.yaml

#service版本
apiVersion: v1
#这个表示资源类型我们创建的是Service
kind: Service
metadata: #这个里面定义的是Service中我们创建的对象信息
  #对象名称
  name: kgf-vue
  #元数据名称空间
  namespace: kgf-dev
  labels:
    app: kgf-vue
spec: #下面定义service的详细信息
  #类型为NodePort
  type: NodePort
  selector: #通过标签选择器去查询对应版本的pod，最后组成一个service
    app: kgf-vue
  ports: #指定容器需要用到的端口列表
    #指定端口名称 
    - name: http
      #服务对外的端口
      port: 8080
      protocol: TCP
      #容器的端口
      targetPort: 80

8)执行上面创建的yaml文件

命令：

kubectl apply -f kgf-vue-deployment.yaml

kubectl apply -f kgf-vue-service.yaml

4、浏览器访问效果

码农公寓

1、环境准备

2、创建nginx镜像

3、创建vue项目镜像

相关文章