Day28-结合全部所学-前端实作篇

前言

终於把这次系列文需要先学会的观念都介绍完了，接下来就要进入实作环节的重头戏，前面讲了那麽多的观念如果最後不自己亲自实作一下相信读者应该也没办法体会到 K8s 的方便吧，剩下的时间笔者分别会介绍前端以及後端的设定方式让读者也能自己轻松的利用 minikube 完成一个网站的架构，那我们就正式进入实作环节吧！

前端 K8s 设定档

有了前面的观念相信读者知道 K8s 最重要的三个东西就是 Deployment、Service 以及 Ingress 了，所以前端的 K8s 设定档也会是这样。

但要正式讲解 K8s 的内容前，必须要先提到系列文一开始 Dockerfile 的观念，毕竟要让 Pod 可以顺序运行必须要有相对应的 Docker image 才能达到这件事，而前端又必须要仰赖 Nginx 当作 web server 才可以顺利的把 webpack build 好的静态档跑起来，所以这边也会用到 multi-stage build 的观念，如果有读者还不熟悉这块的可以复习笔者之前的文章喔！

上面的 Dockerfile 可以发现在 Nginx 阶段的 WORKDIR 竟然是 /usr/share/nginx/html，这是因为在笔者介绍前端 Nginx 的写法时有提到 Nginx 预设读取 index.html 档案的位置就是在这个资料夹内，所以这边的 WORKDIR 理所当然地就会设定在这边喽！

接下来就可以看到 Nginx 的写法了，由於我们 Dockerfile 的 WORKDIR 变成 /usr/share/nginx/html，所以我们这边的 root 也会变成 /usr/share/nginx/html。

再来就是 Deployment 的阶段了，读者可以发现这边的 containerPort 设定成 80，这是因为我们在 Dockerfile 中利用了 Nginx 作为 web server，而 Nginx 会预设 EXPOSE 80 这个 port，所以我们 containerPort 就直接设定 80 即可。

由於我们 Pod 的 containerPort 使用 80 port，所以在 Service 的区块我们也要使用 80 port 进行对接，这样才能让 service 可以顺利的连接到 Pod。

至於 Ingress 的部分就简单多了，一样也是设定 80 就对了，因为 Service 的 targetPort 就是 80 port。

建立前端环境

有了上面的设定档後接下来就是要一步一步建立起前端环境了！首先这里笔者要提醒大家，想要让 minikube 可以使用 local 的 Docker image 必须要先打上这个指令：eval $(minikube docker-env)，这个指令简单来说就是建立一个环境变数把 local 端的 docker 可以跟 minikube 的 docker 作连动。