/ Azure

【 Cloud 】部署 Vue App 到 Azure App Service

內容

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

學習目標

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

前置準備作業


安裝 Vue Cli

Step 1. 安裝 @vue/cli

  • 請在終端機中輸入下方指令
    npm install -g @vue/cli
    

Step 2. 確認 Vue 版本

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

    vue -V
    

    ---2020-05-06---1.52.22


Step 3. 建立 Vue 專案

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

    • ㊟ 下方的 vue-azure-app-service 的專案名稱請自行更換
      vue create vue-azure-app-service
      
  • 3.2 選擇 Manually select features 後按 enter

    ---2020-05-06---1.54.41

  • 3.3 透過空白鍵點選 BabelVuexCSS Pre-processorsLinter / Formatter 後按 enter

    ---2020-05-06---1.56.58

  • 3.4 選擇 Sass/SCSS (with dart-sass) 後按 enter

    ---2020-05-06---1.59.08

  • 3.5 選擇 ESLint + Airbnb config 後按 enter

    ---2020-05-06---2.00.20

  • 3.6 選擇 Lint on save 後按 enter

    ---2020-05-06---2.02.38

  • 3.7 存放設定值的方式

    • 本範例選擇 In package.json 來存放設定,選擇完成後請按 enter

    ---2020-05-06---2.03.44

  • 3.8 是否儲存設定值供之後專案使用

    • 本範例使用預設值 N 後按 enter

    ---2020-05-06---2.05.49

  • 3.9 專案初始過程

    ---2020-05-06---2.08.46

  • 3.10 啟動專案

    • 切換工作目錄 ( 請在終端機中輸入下方指令 )

      • vue-azure-app-service 請輸入步驟 3.1 所建立的專案名稱
      cd vue-azure-app-service
      
    • 執行專案 ( 請在終端機中輸入下方指令 )

      npm run serve
      

      ---2020-05-06---2.13.27

    • 透過瀏覽器開啟上步中的 Network 的位置

      ---2020-05-06---2.15.01


建立 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

  • 點選左上角的 Add

    ---2020-05-06---2.28.35


Step 4. 輸入 App 相關資訊

  • 4.1 填寫資訊
    • Subscription 欄位請選擇所要使用哪個訂閱帳號

    • Resource Group 欄位請選擇使用舊有的或新建立一個新的

    • Name 欄位請輸入一個可識別的名稱

      • 本範例使用 20200506
    • Runtime stack 欄位請選擇 Node 10 LTS

    • Operating System 欄位請選擇 Linux

    • Region 欄位請選擇此服務所要建立於哪個資料中心

    • 以上資訊輸入完成後請點選左下角的 Review + create

      ---2020-05-06---2.38.04


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

    ---2020-05-06---2.39.54


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

    ---2020-05-06---2.45.17


  • 4.4 取得 URL

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

    ---2020-05-06---2.48.09


部署 Vue App 到 Azure App Service

Step 1. 開啟 Vue 專案

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

Step 2. 安裝 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 回到專案頁面

    ---2020-05-06---3.02.47


Step 3. 建立 config 檔

  • public 資料夾中建立 ecosystem.config.js 檔案
    • 游標移到 public 資料夾點選上方的 New File 按鈕

      ---2020-05-06---3.06.29

    • 建立 ecosystem.config.js 檔案後按 enter

      ---2020-05-06---3.07.50

    • ecosystem.config.js 檔案中輸入下方資訊


Step 4. Build 專案

  • 開啟 Terminal

    • 點選上方的 Terminal > New Terminal

      ---2020-05-06---3.12.23

  • Terminal 中輸入 npm run build

    ---2020-05-06---3.16.07

  • 安裝 serve 套件

    • Terminal 中輸入 npm install -g serve

      ---2020-05-06---3.18.04

  • 驗證 Build 後所建立的檔案

    • Terminal 中輸入 serve -s dist

      ---2020-05-06---3.19.55

  • 透過瀏覽器開啟上步中的 On Your Network 網址

    ---2020-05-06---3.21.58


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

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

    ---2020-05-06---3.25.25

  • 點選 Sign in to Azure...

    ---2020-05-06---3.27.14

  • 輸入帳號進行登入

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

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

  • 選擇要使用哪個訂閱

    • 點選 Select Subscriptions... 後再點選使用哪個訂閱

    ---2020-05-06---3.30.54

  • 選擇所已建立的 Azure App Service

    • 本範例於步驟 4.1 已建立 20200506 App Service

    ---2020-05-06---3.34.29

  • 點選 Yes

    ---2020-05-06---3.35.38

  • 點選 Deploy 以部署到 20200506 App Service

    ---2020-05-06---3.36.56

  • 部署過程中

    ---2020-05-06---3.38.07

  • 點選右下角的 Browse Website

    ---2020-05-06---3.39.41

  • 點選 Open

    ---2020-05-06---3.40.51

  • 部署成功畫面

    ---2020-05-06---3.42.00


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