LearningSky.io

【 Cloud 】將 Vue 透過 Azure Container Registry 部署到 Azure App Service

Archer -

內容

  • 學習目標
  • 前置準備作業
  • 建立 Azure Container Registry
  • 建立 Vue 版 Docker Image
  • 上傳 Docker Image 到 Azure Container Registry
  • 透過 Azure Container Registry 部署 Docker Image 到 Azure App Service
  • 測試與驗證

學習目標

  • 如何將 Vue 透過 Azure Container Registry 部署到 Azure App Service

前置準備作業

  • 已建立 Azure 帳號並能正常登入
  • 已存在可正常執行的 Vue 專案
  • 已於電腦端安裝 IDE，本範例使用 Visual Studio Code
  • 本地端電腦已安裝 Docker

建立 Azure Container Registry

Step 1. 開啟 Azure Container Registry

  • 在上方搜尋框輸入 container 並點選下方 Container registries 的搜尋結果

Step 2. 點選上方 + Create

Step 3. 輸入相關資訊

  • Subscription 欄位選擇所要使用的訂閱。
  • Resource group 欄位輸入此服務所要歸屬於的群組。
  • Registry Name 欄位輸入一個可識別的名稱，本範例使用 containerappservice。
  • Location 欄位請選擇服務所要位於的資料中心。
  • SKU 欄位請選擇服務的等級。
  • 當輸入完成後點選 Review + create。

Step 4. 建立服務

  • 確認資訊正確後再點選 Create

Step 5. 點選 Go to resource

Step 6. 啟用 Admin user

  • 點選左側 Access keys > 再點選 Admin user 中的按鈕

Step 7. 取得 Login server URL

  • 點選左側的 Overview > Essentials 區段中的 Login server

建立 Vue 版 Docker Image

Step 1. 建立 Dockerfile

  • 請於專案目錄中建立 Dockerfile 的檔案並輸入下方資訊

Step 2. 建立 Docker Image

  • 請開啟終端機切換路徑到 Dockerfile 所在位置並執行下方指令
    • 請將下方指令中的 ACR-URL 替換成 建立 Azure Container Registry 段落 Step 7 中取得的 Login server URL
docker build -t ACR-URL/docker-vue:0.1 .

Step 3. 確認本地端的 Docker Image

  • 請在終端機中輸入下方指令
docker images

Step 4. 於本地端啟動 Docker Image

  • 請在終端機中輸入下方指令
    • 請將下方指令中的 ACR-URL 替換成 建立 Azure Container Registry 段落 Step 7 中取得的 Login server URL
docker run -p 80:80 -d ACR-URL/docker-vue:0.1

Step 5. 確認啟動狀態

  • 請在終端機中輸入下方指令
docker ps -a

上傳 Docker Image 到 Azure Container Registry

Step 1. 安裝 Azure CLI

Step 2. 透過 Azure CLI 登入

  • 請在終端機輸入下方指令
az login
  • 選擇登入帳號

  • 登入成功

Step 3. 登入 Azure Container Registry

  • 請在終端機輸入下方指令
    • 請修改下方指令中的 AzureContainerRegistryName 為所建立的 Azure Container Registry 名字
az acr login --name AzureContainerRegistryName

Step 4. 上傳 Docker Image 到 Azure Container Registry

  • 請在終端機中輸入下方指令
    • 請將下方指令中的 ACR-URL 替換成 建立 Azure Container Registry 段落 Step 7 中取得的 Login server URL
docker push ACR-URL/docker-vue:0.1

Step 5. 確認上傳結果

  • 點選 Azure 上所建立的 Azure Container Registry 左側中的 Azure Container Registry

透過 Azure Container Registry 部署 Docker Image 到 Azure App Service

Step 1. 開啟 Azure App Service

  • 在上方搜尋框輸入 app services 並點選下方 Azure App Service 的搜尋結果

Step 3. 建立 App Service

  • 點選左上角的 Create

  • 輸入 App 相關資訊
    • Subscription 欄位請選擇所要使用哪個訂閱帳號
    • Resource Group 欄位請選擇使用舊有的或新建立一個新的
    • Name 欄位請輸入一個可識別的名稱
      • 本範例使用 container-test
    • Publish 欄位請選擇 Docker Container
    • Operating System 欄位請選擇 Linux
    • Region 欄位請選擇此服務所要建立於哪個資料中心
    • Linux Plan 與 Sku and size 欄位選擇需要的 size
    • 以上資訊輸入完成後請點選 Next: Docker >

  • 輸入 Docker 相關資訊
    • Options 欄位選擇 Single Container
    • Image Source 欄位選擇 Azure Container Registry
    • Registry 欄位選擇所建立的 Container Registry
    • Image 欄位選擇 docker-vue
    • Tag 欄位選擇 0.1
    • 以上資訊輸入完成後請點選 Review + create

  • 再次確認相關資訊後請按左下角的 Create

  • 建立完成畫面並點選 Go to resource

測試與驗證

Step 1. 驗證結果

  • 點選左上方的 Overview > 再點選 Browse

  • 開啟結果

GitHub

List of blogs