LearningSky.io

【 Cloud 】部署 Vue App 到 Azure App Service

Archer -

內容

  • 學習目標
  • 前置準備作業
  • 建立 Azure App Service
  • 部署 Vue App 到 Azure App Service

學習目標

  • 如何建立 Azure App Service
  • 如何透過 Visual Studio Code 部署 Vue 專案 到 Azure App Service

前置準備作業

建立 Azure App Service

Step 1. 登入到 Microsoft Azure

Step 2. 開啟 Azure App Service

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

Step 3. 建立 App Service

  • 點選左上角的 Create

Step 4. 輸入 App 相關資訊

  • 4.1 填寫資訊
    • 在 Subscription 欄位請選擇所要使用哪個訂閱帳號
    • 在 Resource Group 欄位請選擇使用舊有的或新建立一個新的
    • 在 Name 欄位請輸入一個可識別的名稱
      • 本範例使用 hello-vue-app-test
    • 在 Runtime stack 欄位請選擇 Node 14 LTS
    • 在 Operating System 欄位請選擇 Linux
    • 在 Region 欄位請選擇此服務所要建立於哪個資料中心
    • 以上資訊輸入完成後請點選左下角的 Review + create

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

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

  • 4.4 設定 Configuration
    • 點選左邊的 Configuration

  • 點選上方的 Application settings > New application setting
    • Name 欄位輸入 SCM_DO_BUILD_DURING_DEPLOYMENT
    • Value 欄位輸入 FALSE
    • 輸入完成後請點擊下方的 Ok 按鈕

  • 點選上方的 General settings
    • Startup Command 欄位輸入 npx serve -s
    • 輸入完成後請點擊上方的 Save 按鈕，再點選 Continue

  • 4.5 取得 URL

    • 點選左上方的 Overview

    • 之後將 Vue App 部署到 Azure App Service 時可以透過此網址開啟部署成功的網頁

部署 Vue App 到 Azure App Service

Step 1. 開啟 Vue 專案

  • 透過 VS Code 開啟專案
    • 請透過終端機在專案路徑中輸入下方指令
      code .

Step 2. Build 專案

  • 開啟 Terminal
    • 點選上方的 Terminal > New Terminal

  • 於 Terminal 中輸入 npm run build

  • 安裝 serve 套件
    • 於 Terminal 中輸入 npm install -g serve

  • 驗證 Build 後所建立的檔案
    • 於 Terminal 中輸入 serve -s dist
    • 透過瀏覽器開啟 Terminal 中 Local: 顯示的網址

Step 3. 安裝 Azure App Service 套件

  • 點選 VS Code 左邊的 extensions

  • 於左上方的搜尋框輸入 Azure App Service 並選擇搜尋結果中的 Azure App Service

  • 點選 Install 進行安裝

  • 安裝完成並點選左上方的 Explorer 回到專案頁面

Step 4. 部署 Vue 專案到 Azure App Service

  • 於 VS Code 中使用滑鼠右鍵點選 dist 資料夾中的 Deploy to Web App...

  • 點選 Sign in to Azure...

  • 輸入帳號進行登入

  • 選擇所已建立的 Azure App Service
    • 本範例於步驟 建立 Azure App Service 中步驟 4.1 已建立 hello-vue-app-test App Service

  • 點選 Deploy 以部署到 hello-vue-app-test App Service

  • 部署過程中

  • 點選右下角的 Browse Website

  • 部署成功畫面
    • ㊟ 部署完成後須過一段時間畫面才會顯示出來

GitHub

List of blogs