AIoT & Cloud & Edge & Machine Learning

【 Cloud 】部署 Vue App 到 Azure App Service

Archer

May 7, 2020 • 7 min read

內容

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

學習目標

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

前置準備作業

已安裝 Node.js 與 npm
已安裝 Visual Studio Code
- 下載連結 https://code.visualstudio.com/
已開通 Microsoft Azure
- Azure 連結 https://azure.microsoft.com/zh-tw/

安裝 Vue Cli

Step 1. 安裝 `@vue/cli`

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

Step 2. 確認 Vue 版本

請在終端機中輸入下方指令
```
vue -V 
```

Step 3. 建立 Vue 專案

3.1 請在終端機中輸入下方指令
- ㊟下方的 vue-azure-app-service 的專案名稱請自行更換
```
vue create vue-azure-app-service 
```
3.2 選擇 Manually select features 後按 enter 鍵
3.3 透過空白鍵點選 Babel、Vuex、CSS Pre-processors 與 Linter / Formatter 後按 enter 鍵
3.4 選擇 Sass/SCSS (with dart-sass) 後按 enter 鍵
3.5 選擇 ESLint + Airbnb config 後按 enter 鍵
3.6 選擇 Lint on save 後按 enter 鍵
3.7 存放設定值的方式
- 本範例選擇 In package.json 來存放設定，選擇完成後請按 enter 鍵
3.8 是否儲存設定值供之後專案使用
- 本範例使用預設值 N 後按 enter 鍵
3.9 專案初始過程
3.10 啟動專案
- 切換工作目錄 ( 請在終端機中輸入下方指令 )
  - vue-azure-app-service 請輸入步驟 3.1 所建立的專案名稱
```
cd vue-azure-app-service 
```
- 執行專案 ( 請在終端機中輸入下方指令 )
```
npm run serve 
```
- 透過瀏覽器開啟上步中的 Network 的位置

建立 Azure App Service

Step 1. 登入到 Microsoft Azure

透過瀏覽器開啟 https://portal.azure.com/ 並登入

Step 2. 開啟 Azure App Service

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

Step 3. 建立 App Service

點選左上角的 Add

Step 4. 輸入 App 相關資訊

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

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

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

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

部署 Vue App 到 Azure App Service

Step 1. 開啟 Vue 專案

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

Step 2. 安裝 `Azure App Service` 套件

點選 VS Code 左邊的 extensions
於左上方的搜尋框輸入 Azure App Service 並選擇搜尋結果中的 Azure App Service
點選 Install 進行安裝
安裝完成並點選左上方的 Explorer 回到專案頁面

Step 3. 建立 config 檔

於 public 資料夾中建立 ecosystem.config.js 檔案

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

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

	module.exports = {
	apps: [
	{
	script: "npx serve -s"
	}
	]
	};

view raw ecosystem.config.js hosted with ❤ by GitHub

Step 4. Build 專案

開啟 Terminal
- 點選上方的 Terminal > New Terminal
於 Terminal 中輸入 npm run build
安裝 serve 套件
- 於 Terminal 中輸入 npm install -g serve
驗證 Build 後所建立的檔案
- 於 Terminal 中輸入 serve -s dist
透過瀏覽器開啟上步中的 On Your Network 網址

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

於 VS Code 中使用滑鼠右鍵點選 dist 資料夾中的 Deploy to Web App...
點選 Sign in to Azure...
輸入帳號進行登入
選擇要使用哪個訂閱
- 點選 Select Subscriptions... 後再點選使用哪個訂閱
選擇所已建立的 Azure App Service
- 本範例於步驟 4.1 已建立 20200506 App Service
點選 Yes
點選 Deploy 以部署到 20200506 App Service
部署過程中
點選右下角的 Browse Website
點選 Open
部署成功畫面

GitHub

ArcherHuang @ GitHub

List of blogs