/ Azure

【 Cloud 】部署 Vue App 到 Azure App Service

內容

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

    ---2020-05-06---2.24.29


Step 3. 建立 App Service

  • 點選左上角的 Create

    ---2021-07-28---11.15.14


Step 4. 輸入 App 相關資訊

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

---2021-07-28---11.18.23


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

---2021-07-28---11.21.30-1


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

---2021-07-28---11.24.06


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

      ---2021-07-28---11.27.52

    • 點選上方的 Application settings > New application setting

      • Name 欄位輸入 SCM_DO_BUILD_DURING_DEPLOYMENT
      • Value 欄位輸入 FALSE
      • 輸入完成後請點擊下方的 Ok 按鈕

      ---2021-07-28---1.04.05

      ---2021-07-28---11.31.53

      ---2021-07-28---11.34.14

    • 點選上方的 General settings

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

      ---2021-07-28---11.35.13

      ---2021-07-28---1.00.31

      ---2021-07-28---1.01.42-1

      ---2021-07-28---1.06.40


  • 4.5 取得 URL
    • 點選左上方的 Overview

      ---2021-07-28---1.09.49

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

      ---2021-07-28---11.25.35


部署 Vue App 到 Azure App Service

Step 1. 開啟 Vue 專案

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

Step 2. Build 專案

  • 開啟 Terminal

    • 點選上方的 Terminal > New Terminal

      ---2021-07-28---1.13.55-2

  • Terminal 中輸入 npm run build

    ---2021-07-28---1.15.46-2

  • 安裝 serve 套件

    • Terminal 中輸入 npm install -g serve

      ---2021-07-28---1.17.08-2

  • 驗證 Build 後所建立的檔案

    • Terminal 中輸入 serve -s dist

    • 透過瀏覽器開啟 TerminalLocal: 顯示的網址

      ---2021-07-28---1.18.26-2

      ---2021-07-28---1.20.33

Step 3. 安裝 Azure App Service 套件

  • 點選 VS Code 左邊的 extensions

    ---2020-05-06---2.53.56

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

    ---2020-05-06---2.59.35

  • 點選 Install 進行安裝

    ---2020-05-06---2.58.05

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

    ---2021-07-28---1.23.32


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

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

    ---2021-07-28---1.24.51

  • 點選 Sign in to Azure...

    ---2021-07-28---1.26.21

  • 輸入帳號進行登入

    ---2020-05-06---3.28.48

    ---2020-05-06---3.29.00

  • 選擇所已建立的 Azure App Service

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

    ---2021-07-28---1.30.00

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

    ---2021-07-28---1.31.40

  • 部署過程中

    ---2021-07-28---1.32.29

  • 點選右下角的 Browse Website

    ---2021-07-28---1.33.06

  • 部署成功畫面

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

    ---2021-07-28---1.34.21


GitHub
List of blogs
Archer

Archer

Having being a software engineer. Experience with Python, JavaScript, Node.js, Objective-C, Micro:bit, Raspberry Pi, AWS, Azure, IoT. ❆ [email protected] https://oranwind.org/author/archer/

Read More