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

內容

• 學習目標
• 前置準備作業
• 建立 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

• 請透過瀏覽器開啟 http://localhost

上傳 Docker Image 到 Azure Container Registry

Step 1. 安裝 Azure CLI

• 安裝說明 https://docs.microsoft.com/zh-tw/cli/azure/install-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

• ArcherHuang @ GitHub

List of blogs

• https://oranwind.org/author/archer/
• https://learningsky.io/author/archer/
• https://github.com/ArcherHuang/Blog-LearningSky.io