若方便閱讀英文的話，還請讀下方的英文版，此篇中文版可能會有些許的文法和中文翻譯誤差。
前言
這篇文章會一步一步帶領讓一個全端網頁應用在 AKS 上跑起來，我們範例的計算機 App 是由分離的 React 前端和 Flask 後端組成的。兩者都被包成了 Docker image 放在 Docker Hub 上。如果太簡略的話還請見諒，原本只是想當記錄方便自己以後要用的話可以看XD
內容涵蓋:
- Azure Kubernetes Service
- NGINX Ingress Controller
- Docker Container
- Azure CLI
- Kubectl, Helm
- React 前端, Flask 後端
概要
我們會建立兩個 Kubernetes 部屬，一個 React 前端和一個 Flask 後端。兩個 Kubernetes 服務也會被建立，讓我們能夠訪問被部屬的 App。
當前端和後端都在 k8s 的 cluster 中運作後，我們建立一個 Ingress 資源用來路由。透過 ingress controller 和 ingress rules，單一個 IP 可以被路由到 cluster 中的多個服務。
開始動手做
建立 AKS Cluster
我們要做的第一件事是建立一個 AKS cluster。在自己喜歡的區域建立完資源群組後，我們可以透過 UI 或 Azure CLI 來建立 cluster。
連接 Cluster
我們透過 kubectl 來管理 k8s cluster。在 Azure CLI (紅框框) 執行以下指令來設定 kubectl 並連接到我們先前建立的 cluster。
az aks get-credentials --resource-group myResourceGroup --name myAKSCluster
建立 NGINX Ingress Controller
# 為了 ingress 資源建立一個 K8s namespace
kubectl create namespace ingress-basic# 新增 ingress-nginx repository
helm repo add ingress-nginx https://kubernetes.github.io/ingress-nginx # 使用 Helm 部屬 NGINX ingress controller
helm install nginx-ingress ingress-nginx/ingress-nginx \
--namespace ingress-basic \
--set controller.replicaCount=2 \
--set controller.nodeSelector."beta\.kubernetes\.io/os"=linux \
--set defaultBackend.nodeSelector."beta\.kubernetes\.io/os"=linux
執行 Application
App 透過 YAML 檔案部屬到 cluster。我們用下方的 YAML 檔案來建立兩個 deployments 和各自對應的 service。
在此範例中，我們透過 Azure CLI 建立此檔案 code calculator.yaml
複製貼上下方的 manifest。請注意在 line 17 和 line 54，我們從先前建立的 docker image 取得檔案，也很歡迎各位使用自己的 image。
用 kubectl apply 在 namespace 中執行前端和後端
kubectl apply -f calculator.yaml --namespace ingress-basic
建立 Ingress 路由
現在前端和後端都在 k8s cluster 中運行中，接著我們建立一個 ingress 資源來設定路由規則。我們用和上方差不多的方法建立資源 code ingress.yaml
這檔案最重要的部分在 line 15 ~ 22。我們把要到 root URL 的路由到前端網頁，相同的，我們把要到 /api 的路由到 API 服務。
建立 ingress 資源
kubectl apply -f ingress.yaml測試!
Kubernetes 的 load balancer service 為了 NGINX ingress controller 建立, 我們可以透過被分配的動態公開 IP 位址訪問 App 。
kubectl --namespace ingress-basic get services -o wide -w nginx-ingress-ingress-nginx-controller打開瀏覽器到 EXTERNAL-IP (紅框框).
我們可以到達計算機 UI，因為我們到 root URL 的訪問被 NGINX ingress controller 路由到了前端網頁服務。
當我們按下 Calculate 按鈕，他會發送一個 HTTP POST request 到 /api ，相同的，此訪問會被 NGINX 路由到後端 API。答案在後端 API 被計算，回應的答案會被前端網頁收到並且彈出成功視窗。歡呼~
