教學課程：準備適用於 Azure 通訊服務的 Web 應用程式 (Node.js)

您可以使用 Azure 通訊服務，將即時通訊新增至您的應用程式。 在本教學課程中，您將了解如何設定支援 Azure 通訊服務的 Web 應用程式。 這個介紹教學課程的適用對象是想要開始使用即時通訊的新開發人員。

在本教學課程結束時，您會有一個使用 Azure 通訊服務 SDK 設定的基準 Web 應用程式。 然後，您可以使用該應用程式開始建置即時通訊解決方案。

您可以盡情瀏覽 Azure 通訊服務 GitHub 頁面，提供意見反應。

在本教學課程中，您會了解如何：

• 設定您的開發環境。
• 設定本機網頁伺服器。
• 將 Azure 通訊服務套件新增至您的網站。
• 將您的網站發佈至 Azure 靜態網站。

Prerequisites

• 具有有效訂用帳戶的 Azure 帳戶。 如需詳細資訊，請參閱免費建立帳戶。 免費帳戶提供您價值 200 USD 的 Azure 點數，讓您可以試用各種服務組合。
• Visual Studio Code，用於在本機開發環境中編輯程式碼。
• webpack 來捆綁並在本地託管您的程式碼。
• Node.js 安裝和管理 Azure 通訊服務 SDK 和 webpack 等相依性。
• nvm 和 npm 用於處理版本控制。
• 適用於 Visual Studio Code 的 Azure 儲存體擴充功能。 您需要此延伸模組，在 Azure 儲存體中發佈應用程式。 深入了解如何在 Azure 儲存體中裝載靜態網站。
• Azure App Service 擴充功能。 延伸模組允許使用選項來部署網站，以設定完全受控的持續整合與持續傳遞 (CI/CD)。
• Azure Functions 延伸模組，用來建置您自己的無伺服器應用程式。 例如，您可以在 Azure Functions 中裝載驗證應用程式。
• 作用中的 Azure 通訊服務資源和連接字串。 了解如何建立通訊服務資源。
• 使用者存取權杖。 如需指示，請參閱建立和管理存取權杖快速入門或建置信任的驗證服務教學課程。

設定您的開發環境

您的本機開發環境會如下所示進行設定：

安裝 Node.js、nvm 和 npm

我們將使用 Node.js 來下載並安裝用戶端應用程式所需的各種相依性。 我們會用它來產生靜態檔案，然後在 Azure 中裝載，因此您不需要擔心在伺服器上設定它。

Windows 開發人員可以遵循這個 Node.js 教學課程來設定 Node、nvm 和 npm。

本教學課程是以 LTS 12.20.0 版為基礎。 安裝 nvm 之後，請使用下列 PowerShell 命令來部署您要使用的版本：

nvm list available
nvm install 12.20.0
nvm use 12.20.0

設定 Visual Studio Code

您可以在其中一個支援的平台上下載 Visual Studio Code。

為您的 Azure 通訊服務專案建立工作區

建立資料夾來儲存專案檔案，例如：C:\Users\Documents\ACS\CallingApp。 在 Visual Studio Code 中，選取 [ 檔案>] [將資料夾新增至工作區 ]，然後將資料夾新增至您的工作區。

轉到左側窗格中的 EXPLORER，您將在 CallingApp 工作區中看到您的文件夾。

您可以隨意更新工作區的名稱。 您可以在 CallingApp 資料夾上按一下滑鼠右鍵，然後選取 [在整合式終端機中開啟]，以驗證您的 Node.js 版本。

在終端機中，輸入下列命令來驗證在上一個步驟中安裝的 Node.js 版本：

node --version

安裝適用於 Visual Studio Code 的 Azure 延伸模組

透過 Visual Studio Marketplace 或透過 Visual Studio Code ([檢視][延伸模組]>[Azure 儲存體]>)，安裝 Azure 儲存體延伸模組。

請遵循 Azure Functions 和 Azure App Service 延伸模組的相同步驟。

設定本機網頁伺服器

建立 npm 套件

在終端機中，從工作區資料夾的路徑輸入：

npm init -y

此命令會初始化新的 npm 套件，並將 package.json 新增至專案的根資料夾。

如需 npm init 的其他相關文件，請參閱該命令的 npm 文件頁面。

安裝 webpack

您可以使用 webpack 將程式碼組合成可部署至 Azure 的靜態檔案。 它也有開發伺服器，您可以設定該伺服器來使用通話範例。

在您的終端機中，輸入下列命令以安裝 webpack：

npm install webpack@4.42.0 webpack-cli@3.3.11 webpack-dev-server@3.10.3 --save-dev

本教學課程已使用上述命令中指定的版本進行測試。 指定 -dev 會告知套件管理員此相依性是以開發為目的，不應包含在您部署至 Azure 的程式碼中。

您會看到兩個新套件以 package.json 新增至 devDependencies 檔案。 套件將安裝在 ./CallingApp/node_modules/ 目錄中。

設定開發伺服器

從瀏覽器執行的靜態應用程式 (例如您的 index.html 檔案) 會使用 file:// 通訊協定。 若要讓 npm 模組正常運作，您必須使用 webpack 作為本機開發伺服器以使用 HTTP 通訊協定。

您將建立兩個設定：一個用於開發，另一個用於生產環境。 針對生產環境準備的檔案將會縮小，這表示您將移除未使用的空白和字元。 此設定適用於應最小化延遲的生產案例，或應模糊化程式碼的生產案例。

您將使用 webpack-merge 工具來處理 webpack 的不同設定檔。

開始使用開發環境。 首先，您必須安裝 webpack merge。 在您的終端機中，執行下列命令：

npm install --save-dev webpack-merge

在您的 package.json 檔案中，您可以看到多新增了一個相依性到 devDependencies。

接下來，建立名為 webpack.common.js 的檔案，然後新增下列程式碼：

const path = require('path');
module.exports ={
    entry: './app.js',
    output: {
        filename:'app.js',
        path: path.resolve(__dirname, 'dist'),
    }
}

接著，再新增兩個檔案，每個設定各一個：

• webpack.dev.js
• webpack.prod.js

現在，在 webpack.dev.js 檔案中新增下列程式碼以進行修改：

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
});

在此設定中，您會從 webpack.common.js 匯入一般參數、合併兩個檔案、將模式設定為 development，並將來源對應設定為 inline-source-map。

開發模式會告知 Webpack 不要縮減檔案，所以不會產生最佳化生產檔案。 您可以在 webpack 模式網頁上尋找有關 webpack 模式的詳細文件。

來源對應選項列示在 webpack Devtool 網頁。 設定來源對應可讓您更容易透過瀏覽器進行偵錯。

若要執行開發伺服器，請移至 package.json，並在 scripts 下方新增下列程式碼：

    "build:dev": "webpack-dev-server --config webpack.dev.js"

您的檔案現在看起來應該像這樣：

{
  "name": "CallingApp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:dev": "webpack-dev-server --config webpack.dev.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

您已新增可從 npm 使用的命令。

測試開發伺服器

在 Visual Studio Code 中，在您的專案下方建立三個檔案：

• index.html
• app.js
• app.css (選用，用於設定應用程式的樣式)

將此程式碼貼到 index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My first Azure Communication Services application</title>
    <link rel="stylesheet" href="./app.css"/>
    <script src="./app.js" defer></script>
</head>
<body>
    <h1>Hello from Azure Communication Services!</h1>
</body>
</html>

將下列程式碼新增至 app.js：

alert('Hello world alert!');
console.log('Hello world console!');

將下列程式碼新增至 app.css：

html {
    font-family: sans-serif;
  }

別忘了儲存！ 未儲存的檔案會在檔案總管中的檔名旁顯示白點來表示。

當您開啟此頁面時，應該會在瀏覽器主控台中看到顯示訊息與警示。

使用下列終端機命令來測試您的開發設定：

npm run build:dev

主控台會顯示伺服器執行的所在位置。 預設為http://localhost:8080。 build:dev 命令是您稍早新增至 package.json 的命令。

移至瀏覽器中的位址，您應該會看到在先前步驟中設定的頁面和警示。

當伺服器執行時，您可以變更程式碼和伺服器。 HTML 頁面會自動重新載入。

接下來，移至 Visual Studio Code 中的 app.js 檔案，並刪除 alert('Hello world alert!');。 儲存您的檔案，並確認警示從瀏覽器消失。

若要停止伺服器，您可以在終端機中執行 Ctrl+C。 若要啟動伺服器，請隨時輸入 npm run build:dev。

新增 Azure 通訊服務套件

使用 npm install 命令，安裝適用於 JavaScript 的 Azure 通訊服務通話 SDK。

npm install @azure/communication-common --save
npm install @azure/communication-calling --save

此動作會將 Azure 通訊服務的一般和通話套件新增為您套件的相依性。 您會看到兩個新套件新增至 package.json 檔案。 如需進一步了解 npm install，請參閱該命令的 npm 文件頁面。

這些套件是由 Azure 通訊服務小組提供，其中包含驗證和通話程式庫。 --save 命令會發出訊號，指出應用程式基於生產目的而相依於這些套件，且會納入 devDependencies 檔案中的 package.json。 當您建置用於生產的應用程式時，套件會納入生產程式碼中。

將您的網站發佈至 Azure 靜態網站

建立生產部署的設定

將下列程式碼新增至 webpack.prod.js：

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
});

此設定將會與 webpack.common.js 合併 (您在其中指定輸入檔並用來儲存結果)。 設定也會將模式設定為 production。

在 package.json 中新增下列程式碼：

"build:prod": "webpack --config webpack.prod.js"

您的檔案看起來應該像這樣:

{
  "name": "CallingApp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:dev": "webpack-dev-server --config webpack.dev.js",
    "build:prod": "webpack --config webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@azure/communication-calling": "^1.0.0-beta.6",
    "@azure/communication-common": "^1.0.0"
  },
  "devDependencies": {
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3",
    "webpack-merge": "^5.7.3"
  }
}

在終端機中，執行：

npm run build:prod

命令會在其中建立 dist 資料夾和生產就緒 app.js 靜態檔案。

將應用程式部署至 Azure 儲存體

將 index.html 和 app.css 複製到 dist 資料夾。

在 dist 資料夾中，建立檔案並將其命名為 404.html。 將下列標記複製到該檔案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./app.css"/>
    <title>Document</title>
</head>
<body>
    <h1>The page does not exists.</h1>
</body>
</html>

儲存檔案 (Ctrl+S)。

以滑鼠右鍵按一下 dist 資料夾，然後選取 [透過 Azure 儲存體部署至靜態網站]。

在 [ 選取訂用帳戶] 底下，選取 [登入 Azure] （如果您之前未建立訂用帳戶，請 選取 [建立免費 Azure 帳戶 ]。

選取 [建立新的儲存體帳戶]>[進階]。

提供儲存體群組的名稱。

必要時，建立新的資源群組。

針對 [您要啟用靜態網站裝載嗎？]，選取 [是]。

針對 [輸入索引文件名稱]，接受預設檔案名稱。 您已建立檔案 index.html。

針對 [輸入 404 錯誤文件路徑]，輸入 404.html。

選取應用程式的位置。 您選取的位置會定義未來在群組通話中通話應用程式使用的媒體處理器。

Azure 通訊服務會根據應用程式位置選取媒體處理器。

請等候資源與網站建立完成。

選取 [瀏覽至網站]。

從瀏覽器的開發工具，您可以檢查來源，並查看準備用於生產的檔案。

移至 Azure 入口網站，選取您的資源群組，然後選取您建立的應用程式。 然後選擇 設定>靜態網站。 您可以看到靜態網站已啟用。 請注意主要端點、索引文件名稱和錯誤文件路徑。

在 [Blob 服務] 之下，選取 [容器]。 此清單顯示建立的兩個容器，一個用於記錄 ($logs)，另一個用於您的網站內容 ($web)。

如果開啟 $web 容器，您會看到您在 Visual Studio 中建立並部署至 Azure 的檔案。

您可以隨時從 Visual Studio Code 重新部署應用程式。

您現在已準備好建置您的第一個 Azure 通訊服務 Web 應用程式。

後續步驟

將語音電話新增至您的應用程式

您可能也想要：

• 將聊天新增至您的應用程式
• 建立使用者存取權杖
• 了解用戶端與根伺服器架構
• 了解驗證