【 Cloud 】將 Vue 透過 Azure Container Registry 部署到 Azure Kubernetes Service ( AKS )

【 Cloud 】將 Vue 透過 Azure Container Registry 部署到 Azure Kubernetes Service ( AKS )
Photo by Alexander Kunze / Unsplash

內容

  • 學習目標
  • 前置準備作業
  • 專案目錄結構
  • 建立 Vue 專案的 Docker Image 並部署到 Azure Container Registry
  • 建立 Azure Kubernetes Service
  • 部署 Vue 到 AKS
  • 測試與驗證
  • 刪除所建立的資源與服務

學習目標

  • 如何將 Vue 透過 Azure Container Registry 部署到 Azure Kubernetes Service ( AKS )

前置準備作業

專案目錄結構

  • 本範例目錄結構如下
└── aks-deploy-vue
    ├── docker-manifests
    │   └── Dockerfile
    ├── kube-manifests
    │   ├── 01-Deployment.yml
    │   └── 02-LoadBalancer.yml
    └── vue-web
        ├── README.md
        ├── babel.config.js
        ├── package-lock.json
        ├── package.json
        ├── public
        │   ├── favicon.ico
        │   └── index.html
        └── src
            ├── App.vue
            ├── assets
            │   └── logo.png
            ├── components
            │   └── HelloWorld.vue
            └── main.js

建立 Azure Container Registry

Step 1. 登入到 Azure

  • 請在終端機輸入下方內容
    az login
    

Step 2. 建立 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
      

      ---2022-02-20---9.11.14


Step 3. 建立 Azure Container Registry ( ACR )

  • 請在終端機輸入下方內容
    az acr create -n AcrName -g ResourceGroupName --sku SkuLevel --admin-enabled true
    
    • 請修改指令中的 AcrName 為唯一且可識別的名稱。

    • 請修改指令中的 ResourceGroupNameStep 2 的名稱。

    • 請修改指令中的 SkuLevel 為可選 BasicStandardPremium

    • 本範例使用如下

      az acr create -n containerforaks -g aks-test-rg --sku Basic --admin-enabled true
      

      ---2022-02-21---7.30.51

建立 Vue 專案的 Docker Image 並部署到 Azure Container Registry

Step 1. 取得 Azure Container Registry 的 Login Server URL

  • 請在終端機輸入下方內容
    az acr list -o table -g ResourceGroupName
    
    • 請修改指令中的 ResourceGroupName建立 Azure Container Registry 段落中 Step 2 的名稱。

    • 本範例使用如下

      az acr list -o table -g aks-test-rg
      

      ---2022-02-21---7.42.24


Step 2. 建立 Dockerfile

  • 建立 docker-manifests 資料夾並在此資料夾中建立 Dockerfile 的檔案,再輸入以下內容

Step 3. 建立 Docker Image

  • 請在終端機切換路徑到專案目錄再輸入下方內容
    docker build -t AcrUrl/ImageName:Tag -f docker-manifests/Dockerfile .
    
    • 請修改指令中的 AcrUrlStep 1 所取得的 URL。

    • 請修改指令中的 ImageName 為可識別的名稱。

    • 請修改指令中的 Tag 為版號。

    • 本範例使用如下

      docker build -t containerforaks.azurecr.io/docker-vue:0.1 -f docker-manifests/Dockerfile .
      

      ---2022-02-21---7.47.20


Step 4. 查看本地端 Image

  • 請在終端機輸入下方內容

    docker images
    

    ---2022-02-21---7.47.57


Step 5. 登入到 Azure Container Registry

  • 請在終端機輸入下方內容
    az acr login --name AcrName
    
    • 請修改指令中的 AcrName建立 Azure Container Registry 段落中 Step 2 的名稱。

    • 本範例使用如下

      az acr login --name containerforaks
      

      ---2022-02-21---7.36.25


Step 6. 上傳 Image 到 Azure Container Registry

  • 請在終端機輸入下方內容
    docker push AcrUrl/ImageName:Tag
    
    • 請修改指令中的 AcrUrlStep 1 所取得的 URL。

    • 請修改指令中的 ImageNameStep 2 的名稱。

    • 請修改指令中的 TagStep 2 的版號。

    • 本範例使用如下

      docker push containerforaks.azurecr.io/docker-vue:0.1
      

      ---2022-02-21---7.50.05


Step 7. 查看 Azure container registry

  • 透過瀏覽器開啟 https://portal.azure.com/ 並登入成功之後於上方搜尋框輸入 container registry 再點選 Container registries 的結果

---2022-02-21---7.53.16

  • 選擇所建立的 registry

---2022-02-21---7.55.06

  • 點選左側的 Repositories

---2022-02-21---7.55.39

  • 點選所上傳的 Image

---2022-02-21---7.57.29

---2022-02-21---7.58.25

建立 Azure Kubernetes Service

Step 1. 建立 AKS

  • 請在終端機輸入下方內容
    az aks create -g ResourceGroupName -n AksName
    
    • 修改指令中的 ResourceGroupName 請輸入 建立 Azure Container Registry 段落中 Step 2 的名稱。

    • 修改指令中的 AksName 成唯一可識別的名稱。

    • 本範例使用如下

      az aks create -g aks-test-rg -n aks-vue-test
      

      ---2022-02-20---9.16.53

部署 Vue 到 AKS

Step 1. 取得 Azure Kubernetes Service Credential

  • 請在終端機輸入下方內容
    az aks get-credentials --resource-group ResourceGroupName --name AksName
    
    • 修改指令中的 ResourceGroupName 請輸入 建立 Azure Container Registry 段落中 Step 2 的名稱。

    • 修改指令中的 AksName 請輸入段落 建立與設定 Azure Kubernetes ServiceStep 1 所建立的名稱。

    • 本範例使用如下

      az aks get-credentials --resource-group aks-test-rg --name aks-vue-test
      

      ---2022-02-20---9.18.03


Step 2. 設定 Azure Kubernetes Service 與 Azure Container Registry 連結

  • 請在終端機輸入下方內容
    az aks update -n AksName -g ResourceGroupName --attach-acr AcrName
    
    • 修改指令中的 AksName 請輸入段落 建立與設定 Azure Kubernetes ServiceStep 1 所建立的名稱。

    • 修改指令中的 ResourceGroupName 請輸入 建立 Azure Container Registry 段落中 Step 2 的名稱。

    • 修改指令中的 AcrName 請輸入段落 建立 Azure Container RegistryStep 2 所建立的名稱。

    • 本範例使用如下

      az aks update -n aks-vue-test -g aks-test-rg --attach-acr containerforaks
      

      ---2022-02-21---8.19.41


Step 3. 建立 Deployment 的 YAML

  • 請在專案目錄中建立 kube-manifests 資料夾並在此資料夾中建立 01-Deployment.yml 檔案,其內容如下
    • 請修改 第 18 行 中的 AcrUrl建立 Vue 專案的 Docker Image 並部署到 Azure Container Registry 段落中 Step 1 的 URL。
    • 請修改 第 18 行 中的 ImageName建立 Vue 專案的 Docker Image 並部署到 Azure Container Registry 段落中 Step 3 的名稱。
    • 請修改 第 18 行 中的 Tag建立 Vue 專案的 Docker Image 並部署到 Azure Container Registry 段落中 Step 3 的版號。
    • 本範例使用如下

Step 4. 建立 LoadBalancer 的 YAML

  • 請在專案目錄中的 kube-manifests 資料夾並在此資料夾中建立 02-LoadBalancer.yml 檔案,其內容如下

Step 5. 部署 Application

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

---2022-02-21---8.21.25

測試與驗證

Step 1. 查看 Pods

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

---2022-02-21---8.22.28


Step 2. 查看 Deployment

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

---2022-02-21---8.23.03


Step 3. 查看 Service 並取得 IP

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

---2022-02-21---8.23.32


Step 4. 存取 Vue

  • 請在瀏覽器輸入下方內容
    http://EXTERNAL-IP
    
    • 請把 EXTERNAL-IP 改成 Step 3 所取得的 EXTERNAL-IP

---2022-02-21---8.24.40

刪除所建立的資源與服務

Step 1. 刪除 Application

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

---2022-02-20---9.36.37


Step 2. 查看 Pods

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

---2022-02-20---9.37.04


Step 3. 查看 Deployment

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

---2022-02-20---9.37.32


Step 4. 查看 Service

  • 請在終端機輸入下方內容
    kubectl get service
    

---2022-02-20---9.38.08


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

  • 請在終端機輸入下方指令
    az group delete -n ResourceGroupName
    
    • 修改指令中的 ResourceGroupName 請輸入 建立 Azure Container Registry 段落中 Step 2 的名稱。

    • 本範例使用如下

      az group delete -n aks-test-rg
      

      ---2022-02-20---9.54.06

GitHub

List of blogs