Take you through k8S - One-click deployment of VUE projects

preface

There is a missing section in the Rapid Development Framework – The Front End, which is about the one-click release script design and implementation of the VUE project. This article expands here and is deployed to a K8S environment.

The traditional deployment is different from the K8S deployment

Prior to k8S, the deployment of the front and back separated projects was typically based on nGINx on the host. Front-end static resources use Nginx, and back-end interfaces use Nginx as proxies. At this point, Nginx is installed ahead of time, so the one-click script doesn’t take into account the installation and running of Nginx, just putting the packed static resources in the specified directory. With K8S, one-click scripts are different, in addition to packaging static resources in a specified directory, and considering the running of nginx instances.

Traditional separated front – and back-end deployment architectures

The front-end and back-end separated deployment architecture after USING K8S

Release process Design

Pull the code

There is no code to clone, there is code can be directly updated
```
git clone / git pull
Copy the code
```

Install dependencies

Specify the source address here

npm install --registry=http://registry.npm.taobao.org
Copy the code

packaging

A simple distinction can be made between production and testing

Play test package
```
npm run build:test
Copy the code
```
The production package
```
npm run build:prod
Copy the code
```
Copies a static resource to a specified directory

How can I ensure that normal access is not affected during replication?
1. Index. HTML is never cached
2. Package files are named using hash
3. Copy, not delete
4. Copy other files first and index.html last
Publish or update the Nginx service

Instead of using a template, separate yamL files, one for production and one for test.
```
kubectl apply -f k8s-test.yaml
Copy the code
```

Start coding

The directory structure

├─ / Exercises for new exercises. ├─ new Exercises for new exercises, new Exercises for new exercises, new Exercises for new exercises  package.jsonCopy the code

File,

/java_projects/mldong-vue/buildAndPublish.sh

One-click package publishing to K8S cluster scripts

#! /bin/bashsource_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" ]; ${source_dir} ${source_dir} ${source_dir} ${source_dir}" cp -p $source_dir fi if [-d "$source_dir/$project_name"]; 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 "failed to pack" else  #Move out of index.html, save for last copy
  mv dist/index.html ./
  #Create a directory
  mkdir -p $nfs_project_dir/$project_name
  #Copy the file
  cp -r dist/* $nfs_project_dir/$project_name
  #Duplicate index. HTML
  cp index.html $nfs_project_dir/$project_name
  #Reduction index. HTML
  mv index.html dist/index.html
  kubectl apply -f $k8s_yaml
fi
Copy the code

/java_projects/mldong-vue/k8s-test.yaml

K8s definition file for static resource service

Note: The namespace must be consistent with the backend interface.

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

Copy the code

On other clusters, all/APIS are redirected to /, and rewriting rules can look like this:

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
       
Copy the code

Aliyun looks like this:

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(/|$)(.*)
Copy the code

It doesn’t matter if you make a mistake, go to the official documentation, see the sample, and know how to fix it.

The final result

summary

The most important thing about one-click deployment scripts is to comb through the process and then implement it in code step by step. Publishing with K8S is just a matter of changing the YAML template and executing kubectl apply-f xxx.yaml to publish. Of course, this may involve a little more knowledge points, but calm down to learn, in fact, can quickly get out.

The source code

Gitee.com/mldong/mldo…

Walk you through K8S – cluster creation and Hello World

Take you through K8S-ConfigMap and persistent storage

Take you hand in hand to play K8S – complete release of an externally accessible service

Docker-compose k8S-docker advanced Dockerfile and docker-compose

K8s – One click deployment of springboot project

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Take you through k8S – One-click deployment of VUE projects

preface

The traditional deployment is different from the K8S deployment

Release process Design

Start coding

The directory structure

File,

The final result

summary

The source code

Related articles

Take you through k8S – One-click deployment of VUE projects

preface

The traditional deployment is different from the K8S deployment

Release process Design

Start coding

The directory structure

File,

The final result

summary

The source code

Related articles

Related Posts

Is spring@Autowired a byType injection?

Li Feifei: Database industry in the era of new technological change

“SpringSecurity” (9) SpringSecurity is integrated with WebFlux