Kubernetes部署微服务实战（四）部署VUE前端进阶之添加Ingress

在前面的文章我们演示了部署VUE的项目，并且实现了直接宿主机端口映射的方式访问，实现了nodeip的方式映射端口访问，在实际的环境中，对于这种直接供外部访问的应用其实最常用的还是配置Ingress来进行访问，因此这里的话，我们来演示下实际的访问演示。

在配置Ingress访问的话，一般主要分为两部：分别是创建IngressClass和创建Ingress，下面我们来演示下：

1）创建IngressClass

这里创建IngressClass主要是创建IngressNginxController，这个东西我们可以看作是统一的对外访问入口。相当于所有的访问是先进来这个IngressNginxControoler的。所以这个IngressNginxController比较重要，创建的话，我们可以直接在kuboard上创建，对应的目录如下：

然后我们点击这里的安装IngressNginxController并创建IngressClass按钮

然后随便输入一个名称即可，例如：

当出现如下的界面就代表ingressclass安装完毕了

此时在服务器上会自动创建一个名称为：ingress-nginx的名称空间，对应相关的pod都启动在这个名称空间里面：

同时我们使用如下的命令也可以看到对应的controller启动的端口：30624和30240

kubectl get pods,svc -n ingress-nginx

此时我们还可以访问下这个30624端口测试下访问：

2）配置ingress

前面的入口我们已经配置完毕了，接下来我们就需要配置不同的域名对应访问不同的应用，例如访问我们前面的vue项目。到这里就无法在kuboard里面可视化创建了，需要使用yaml配置文件进行创建，这里我们的示例如下：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
 name: web-ingress
 namespace: default
spec:
 ingressClassName: nginx-ingress     #前面创建的ingresslcass名称
 rules:
   - host: p.80wz.com                #配置哪个域名访问
     http:
       paths:
         - path: /                   #域名访问路径
           pathType: Prefix          #一般固定死prefix
           backend:
             service:
               name: show-web        #vue项目对应的service名称
               port:
                 number: 9000        #vue项目对应的service的端口

然后我们执行下创建：