AIoT & Cloud & Edge & Machine Learning

【 Cloud 】將 HTML Web 透過 Azure File 部署到 Azure Kubernetes Service ( AKS )

Archer

Feb 24, 2022 • 6 min read

Photo by Jonatan Pie / Unsplash

內容

學習目標
前置準備作業
專案目錄結構
建立與設定 Azure Kubernetes Service
測試與驗證
刪除所建立的資源與服務

學習目標

如何將 HTML Web 透過 Azure File 部署到 Azure Kubernetes Service

前置準備作業

已建立 Azure 帳號並能正常登入
已於電腦端存在可正常執行的 HTML 專案
已於電腦端安裝 IDE，本範例使用 Visual Studio Code
已於電腦端安裝 AZ Cli
- https://docs.microsoft.com/zh-tw/cli/azure/install-azure-cli
已於電腦端安裝 kubectl
- https://kubernetes.io/docs/tasks/tools/

專案目錄結構

└── aks-deploy-html
    ├── kube-manifests
    │   ├── 01-Persistent-Volume-Claim.yml
    │   ├── 02-Nginx-Deployment.yml
    │   └── 03-Nginx-Service.yml
    └── web
        └── index.html

建立與設定 Azure Kubernetes Service

Step 1. 建立 Azure 資源群組

請在終端機輸入下方內容
```
az group create --name ResourceGroupName --location Region
```
- 修改指令中的 ResourceGroupName 為唯一可識別的名稱。
- 修改指令中的 Region 請輸入資源部署於何處
  - 可輸入 az account list-locations -o table 查看可用區域
- 本範例使用如下
```
az group create --name aks-test-rg --location westus2
```

Step 2. 建立 AKS

請在終端機輸入下方內容
```
az aks create -g ResourceGroupName -n AksName
```
- 修改指令中的 ResourceGroupName 請輸入 Step 1 的名稱。
- 修改指令中的 AksName 成唯一可識別的名稱。
- 本範例使用如下
```
az aks create -g aks-test-rg -n aks-web-test
```

Step 3. 取得 Azure Kubernetes Service Credential

請在終端機輸入下方內容
```
az aks get-credentials --resource-group ResourceGroupName --name AksName
```
- 修改指令中的 ResourceGroupName 請輸入 Step 1 的名稱。
- 修改指令中的 AksName 請輸入段落 Step 2 所建立的名稱。
- 本範例使用如下
```
az aks get-credentials --resource-group aks-test-rg --name aks-web-test
```

Step 4. 建立 Persistent Volume Claim 的 YAML

請在專案目錄中建立 kube-manifests 資料夾並在此資料夾中建立 01-Persistent-Volume-Claim.yml 檔案，其內容如下

Step 5. 建立 Deployment 的 YAML

請在 kube-manifests 資料夾中建立 02-Nginx-Deployment.yml 檔案，其內容如下

Step 6. 建立 LoadBalancer 的 YAML

請在 kube-manifests 資料夾中建立 03-Nginx-Service.yml 檔案，其內容如下

Step 7. 部署 Application

請在終端機輸入下方內容
```
kubectl apply -f kube-manifests/
```

測試與驗證

Step 1. 查看 Storage Class

請在終端機輸入下方內容
```
kubectl get sc
```

---2022-02-21---11.17.33

Step 2. 查看 Persistent Volume Claim

請在終端機輸入下方內容
```
kubectl get pvc
```

---2022-02-21---11.17.58

Step 3. 查看 Persistent Volume

請在終端機輸入下方內容
```
kubectl get pv
```

---2022-02-21---11.18.38

Step 4. 查看 Pods

請在終端機輸入下方內容
```
kubectl get pods
```

---2022-02-21---11.19.13

Step 5. 查看 Pods 描述

請在終端機輸入下方內容
```
kubectl describe pod PodName
```
- 請修改指令中的 PodName 為 Step 4 所顯示的 Pod 名稱。

---2022-02-21---11.20.39

Step 6. 查看 Deployment

請在終端機輸入下方內容
```
kubectl get deployment
```

---2022-02-21---11.22.08

Step 7. 上傳 HTML Web 到 Storage account

登入到 Azure Portal > 再搜尋框輸入 blob > 點選 Storage accounts 搜尋結果

---2022-02-21---11.25.27

選擇 Resource group 為 MC_群組名稱_AKS名稱_Region所在位置
- 本範例的 群組名稱 為 aks-test-rg
- 本範例的 AKS名稱 為 aks-web-test
- 本範例的 Region所在位置 為 westus2
- 故本範例的 Resource group 為 MC_aks-test-rg_aks-web-test_westus2

---2022-02-21---11.32.47

點選左側的 File shares

---2022-02-21---12.53.44

點選所建立的 pvc

---2022-02-21---12.55.16

點選 Upload

---2022-02-21---12.56.49

選擇所要上傳的 HTML Web > 再點選 Upload

---2022-02-21---12.58.08

上傳完成

---2022-02-21---12.59.14

Step 8. 查看 Service 並取得 IP

請在終端機輸入下方內容以取得 EXTERNAL-IP
```
kubectl get service
```

---2022-02-21---12.59.49

Step 9. 存取 Web

請在瀏覽器輸入下方內容
```
http://EXTERNAL-IP/app-test/index.html
```
- 請把 EXTERNAL-IP 改成 Step 8 所取得的 EXTERNAL-IP

---2022-02-21---1.01.04

刪除所建立的資源與服務

Step 1. 刪除 Application

請在終端機輸入下方內容
```
kubectl delete -f kube-manifests/
```

---2022-02-21---1.02.09

Step 2. 刪除所建立的相關資源

請在終端機輸入下方指令
```
az group delete -n ResourceGroupName
```
- 修改指令中的 ResourceGroupName 請輸入 建立與設定 Azure Kubernetes Service 段落中 Step 1 的名稱。
- 本範例使用如下
```
az group delete -n aks-test-rg
```

GitHub

ArcherHuang @ GitHub