首页 / K8S / 手把手带你玩转k8s-一键部署vue项目

手把手带你玩转k8s-一键部署vue项目

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了手把手带你玩转k8s-一键部署vue项目，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5998字，纯文字阅读大概需要9分钟。

内容图文

前言

在快速开发框架-前端篇中少了一个章节，就是关于vue工程的一键发布脚本设计和实现。本文就在此展开，并部署到k8s环境中。

手把手带你玩转k8s-一键部署vue项目 - 文章图片

传统部署方式与k8s部署区别

在没有使用k8s之前的前后端分离项目部署，一般是依托于宿主机上的nginx。前端静态资源走nginx,后端接口会使用nginx做代理。而此时，nginx是提前安装的，所以一键脚本并不会考虑nginx的安装与运行，只会将打包好静态资源放在指定目录。使用k8s之后，一键脚本会有的区别，除了打包静态资源放在指定目录上，还要考虑nginx实例的运行。

  • 传统的前后端分离部署架构

手把手带你玩转k8s-一键部署vue项目 - 文章图片

  • 使用k8s后的前后端分离部署架构

手把手带你玩转k8s-一键部署vue项目 - 文章图片

发布流程设计

  1. 拉取代码

    没有代码就克隆，有代码了可以直接更新

    git clone / git pull

  2. 安装依赖

    这里指定一下源地址

    npm install --registry=http://registry.npm.taobao.org

  3. 打包

    可以简单区分一下生产与测试

    打测试包

    npm run build:test

    打生产包

    npm run build:prod

  4. 将静态资源复制到指定目录

    如何保证复制过程中不影响正常访问？

    1. index.html设置永不缓存
    2. 打包文件使用hash命名
    3. 只复制，不删除
    4. 先复制其他文件，最后复制index.html

  5. 发布或更新nginx服务

    这里不建议使用模板了，直接分两个yaml文件，一个生产，一个测试。

    kubectl apply -f k8s-test.yaml

开始编码

目录结构

├── /java_projects
    ├── mldong-vue
        ├── buildAndPublish.sh
        └── k8s-test.yaml
     └── source
		├── front
            ├── mldong-vue			源码根目录
            	└── package.json

文件详解

  • /java_projects/mldong-vue/buildAndPublish.sh

一键打包发布到k8s集群脚本

#!/bin/bash
source_dir=/java_projects/source/front
project_name=mldong-vue
nfs_project_dir=/mnt/
profile=test
k8s_yaml=/java_projects/$project_name/k8s-$profile.yaml
registry_url=https://registry.npm.taobao.org
if [ -d "$source_dir" ]; then
  echo "源码存放根目录${source_dir}已存在"
else
  echo "源码存放根目录不存在，创建${source_dir}"
  cp -p $source_dir
fi

if [ -d "$source_dir/$project_name" ]; then
  echo "源码已存在，git pull"
  cd $source_dir/$project_name
  git pull
else
  echo "源码不存在，git clone"
  git clone $git_url $source_dir/$project_name
fi
cd $source_dir/$project_name
git pull
git_tag=$(git describe --tags --always)
echo "当前版本：$git_tag"
npm --registry=${registry_url} install --unsafe-perm
npm run build:$profile

if [ $? -ne 0 ]; then
  echo "打包失败"
else
  # 移出index.html,留最后复制
  mv dist/index.html ./
  # 创建目录
  mkdir -p $nfs_project_dir/$project_name
  # 复制文件
  cp -r dist/* $nfs_project_dir/$project_name
  # 复制index.html
  cp index.html $nfs_project_dir/$project_name
  # 还原index.html
  mv index.html dist/index.html
  kubectl apply -f $k8s_yaml
fi
  • /java_projects/mldong-vue/k8s-test.yaml

静态资源服务的k8s定义文件

注意：命名空间要和后端接口的一致。

cat <<EOF > /java_projects/mldong-vue/k8s-test.yaml
apiVersion: v1
kind: ConfigMap
metadata:
  name: nginx-cm
  namespace: mldong-admin-test
data:
  a.conf: |-
    server {
      listen       80;
      server_name  a.mldong.com;
      location / {
        root   /usr/share/nginx/html/mldong-vue;
        index  index.html index.htm;
      }
      error_page   500 502 503 504  /50x.html;
      location = /50x.html {
        root   /usr/share/nginx/html;
      }
    }
---
apiVersion: v1
kind: PersistentVolume
metadata:
  name: mldong-vue-test-pv
  labels:
    alicloud-pvname: mldong-vue-test-pv
spec:
  capacity:
    storage: 5Gi
  accessModes:
    - ReadWriteMany
  csi:
    driver: nasplugin.csi.alibabacloud.com
    volumeHandle: mldong-vue-test-pv
    volumeAttributes:
      server: "9fdd94bf87-wfq66.cn-zhangjiakou.nas.aliyuncs.com"
      path: "/"
      vers: "3"
  storageClassName: nas
---
apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  annotations:
    pv.kubernetes.io/bind-completed: 'yes'
    pv.kubernetes.io/bound-by-controller: 'yes'
  finalizers:
    - kubernetes.io/pvc-protection
  name: mldong-vue-test-pvc
  namespace: mldong-admin-test
spec:
  accessModes:
    - ReadWriteMany
  resources:
    requests:
      storage: 1Gi
  selector:
    matchLabels:
      alicloud-pvname: mldong-vue-test-pv
  storageClassName: nas
  volumeMode: Filesystem
  volumeName: mldong-vue-test-pv
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: nginx
  namespace: mldong-admin-test
spec:
  selector:
    matchLabels:
      app: nginx
  replicas: 1
  template:
    metadata:
      labels:
        app: nginx
    spec:
      containers:
        - name: nginx
          image: registry-vpc.cn-zhangjiakou.aliyuncs.com/mldong/java/nginx:latest
          imagePullPolicy: IfNotPresent
          ports:
            - containerPort: 80
              name: port
              protocol: TCP
          volumeMounts:
            - name: mldong-vue-test-pvc
              mountPath: "/usr/share/nginx/html"
            - name: nginx-cm
              mountPath: "/etc/nginx/conf.d"
      volumes:
        - name: mldong-vue-test-pvc
          persistentVolumeClaim: 
            claimName: mldong-vue-test-pvc
        - name: nginx-cm
          configMap:
            name: nginx-cm
---
apiVersion: v1
kind: Service
metadata:
  name: nginx-nodeport
  namespace: mldong-admin-test
spec:
  type: NodePort
  ports:
  - port: 80
    targetPort: 80
  selector:
    app: nginx
---
apiVersion: v1
kind: Service
metadata:
  name: nginx
  namespace: mldong-admin-test
spec:
  type: ClusterIP
  ports:
  - port: 80
    protocol: TCP
    targetPort: 80
  selector:
    app: nginx
---
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  annotations:
  name: nginx-ingress
  namespace: mldong-admin-test
spec:
  rules:
    - host: a.mldong.com
      http:
        paths:
          - backend:
              serviceName: nginx
              servicePort: 80
            path: /
---
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /$2
  name: mldong-admin-api
  namespace: mldong-admin-test
spec:
  rules:
  - host: a.mldong.com
    http:
      paths:
      - backend:
          serviceName: mldong-admin
          servicePort: 8080
        path: /api(/|$)(.*)
       
EOF

这里踩了个小坑，在别的集群上，所有/api开头重定向到/，重写规则可以是这样：

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /
  name: mldong-admin-api
  namespace: mldong-admin-test
spec:
  rules:
  - host: a.mldong.com
    http:
      paths:
      - backend:
          serviceName: mldong-admin
          servicePort: 8080
        path: /api

阿里云的是这样：

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /$2
  name: mldong-admin-api
  namespace: mldong-admin-test
spec:
  rules:
  - host: a.mldong.com
    http:
      paths:
      - backend:
          serviceName: mldong-admin
          servicePort: 8080
        path: /api(/|$)(.*)

遇到错不要紧，去翻一翻官方文档，看其样例，就知道如何修改了。

最终效果

手把手带你玩转k8s-一键部署vue项目 - 文章图片

手把手带你玩转k8s-一键部署vue项目 - 文章图片

手把手带你玩转k8s-一键部署vue项目 - 文章图片

源码

https://gitee.com/mldong/mldong/tree/master/doc/k8s/v2

小结

做一键部署脚本最重要的就是梳理流程，梳理完流程后再一步步用代码实现。而使用k8s发布只是更换一下yaml模板，最后执行kubectl apply -f xxx.yaml进行发布而已。当然，这中间可能涉及到的知识点略多，但是静下心来学，其实也是能很快弄出来。

内容总结

以上是互联网集市为您收集整理的手把手带你玩转k8s-一键部署vue项目全部内容，希望文章能够帮你解决手把手带你玩转k8s-一键部署vue项目所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/984154.html

来源：【匿名】