Kubernetes部署微服务实战（二）：运行VUE前端

上文《Kubernetes部署微服务实战（一）打包VUE项目》我们介绍了打包VUE项目，并且把镜像上传到dockerhub中去，本文的话我们来演示下使用kubernetes部署前端的项目。

备注：

1、我认为作为一个高级运维，一定要擅长使用可视化的工具去做运维，这样子可以提高整个团队的服务运维管理的梳理，同时也可以减少部署等日常工作的时间，增加工作效率（仅个人意见）

所以这里的话我们使用kuboard来演示下部署这个VUE的前端示例项目，下面直接开始。

首先这里我们进入到kuboard的dashboard界面，选择创建工作负载。

1）首先填写基本信息

这里填写的信息有:

序号	选项	内容
1	工作负载类型	deployment
2	工作负载分层	展现层
3	工作负载名称	show-web
4	服务描述	show-web前端
5	副本数	1

2）填写容器信息

这里选择添加一个工作容器

这里填写的信息如下：

序号	选项	值
1	名称	show-web
2	容器镜像	a85791d9bf0b9ade/k8s-show:1.0
3	镜像拉取策略	始终拉去新镜像(这里如果团队规范比较标准的话，选择本地不存在时拉去镜像)
4	容器端口-容器名称	nginx
5	容器端口-容器端口	9000（前面nginx配置的端口）
6	容器端口-宿主机端口	39000

完整的配置信息如下：

然后我们点击这里的保存按钮：

kubernetes集群就会自动开始创建这个容器了，示例图如下：

整个过程就是：

拉取镜像
创建container
启动container

这里我们已经启动好了，然后我们使用宿主机的39000端口访问看看：

可以看到前端的项目已经成功的可以访问到了。

以上就是我们使用kuboard部署VUE前端项目的过程。最后如果不适用kuboard部署的话，我们提供一个完整的yml文件部署文件，内容如下：

---
apiVersion: apps/v1
kind: Deployment
metadata:
  annotations:
    k8s.kuboard.cn/displayName: 前端
  labels:
    k8s.kuboard.cn/layer: web
    k8s.kuboard.cn/name: show-web
  name: show-web
  namespace: default
  resourceVersion: '932319'
spec:
  progressDeadlineSeconds: 600
  replicas: 1
  revisionHistoryLimit: 10
  selector:
    matchLabels:
      k8s.kuboard.cn/layer: web
      k8s.kuboard.cn/name: show-web
  strategy:
    rollingUpdate:
      maxSurge: 25%
      maxUnavailable: 25%
    type: RollingUpdate
  template:
    metadata:
      creationTimestamp: null
      labels:
        k8s.kuboard.cn/layer: web
        k8s.kuboard.cn/name: show-web
    spec:
      containers:
        - image: 'a85791d9bf0b9ade/k8s-show:1.0'
          imagePullPolicy: IfNotPresent
          name: show-web
          ports:
            - containerPort: 9000
              hostPort: 39000
              name: nginx
              protocol: TCP
          resources: {}
          terminationMessagePath: /dev/termination-log
          terminationMessagePolicy: File
      dnsPolicy: ClusterFirst
      restartPolicy: Always
      schedulerName: default-scheduler
      securityContext: {}
      terminationGracePeriodSeconds: 30