チュートリアル:Azure Communication Services 用の Web アプリを準備する (Node.js)

2023-03-25

Azure Communication Services を使用すると、自分のアプリケーションにリアルタイムコミュニケーションを追加することができます。このチュートリアルでは、Azure Communication Services をサポートする Web アプリケーションの設定方法について説明します。リアルタイムコミュニケーションの実装を始めたいと考えている新規開発者向けの入門チュートリアルとなっています。

このチュートリアルの最後には、Azure Communication Services の SDK を使用して構成された基本的な Web アプリケーションが完成します。そのアプリケーションを足掛かりとして、自分のリアルタイムコミュニケーションソリューションを構築することができます。

お気軽に Azure Communication Services の GitHub ページにアクセスしてフィードバックをお寄せください。

このチュートリアルでは、次の作業を行う方法について説明します。

開発環境を構成する。
ローカル Web サーバーを設定する。
Azure Communication Services パッケージを Web サイトに追加する。
Azure の静的 Web サイトに Web サイトを発行する。

前提条件

アクティブなサブスクリプションが含まれる Azure アカウント。詳細については、アカウントの無料作成に関するページを参照してください。無料アカウントでは 200 ドル分の Azure クレジットが提供され、さまざまな組み合わせのサービスをお試しいただけます。
Visual Studio Code。ローカル開発環境でコードを編集する際に使用します。
webpack。コードをバンドルしてローカルでホストする際に使用します。
Node.js。Azure Communication Services の SDK や webpack などの依存関係をインストールして管理する際に使用します。
nvm および npm: バージョンコントロールの運用に使用します。
Visual Studio Code 用の Azure Storage 拡張機能。アプリケーションを Azure Storage に発行する際に、この拡張機能が必要となります。詳細については、Azure Storage での静的 Web サイトのホスティングに関する記事を参照してください。
Azure App Service 拡張機能。この拡張機能を使用すると、Web サイトをデプロイすることに加え、フルマネージドの CI/CD (継続的インテグレーションと継続的デリバリー) を構成することもできます。
独自のサーバーレスアプリケーションを構築するための Azure Functions 拡張機能。たとえば、Azure Functions で認証アプリケーションをホストすることができます。
アクティブな Communication Services リソースと接続文字列。 Communication Services リソースを作成する方法に関する記事を参照してください。
ユーザーアクセストークン。手順については、アクセストークンの作成と管理に関するクイックスタートまたは信頼できる認証サービスの構築に関するチュートリアルを参照してください。

開発環境を構成する

ローカルの開発環境は、次のように構成されます。

開発環境のアーキテクチャを示す図。

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

Node バージョンのデプロイに使用されるコマンドを示すスクリーンショット。

Visual Studio Code を構成する

いずれかのサポート対象プラットフォームに Visual Studio Code をダウンロードしてください。

Azure Communication Services プロジェクト用のワークスペースを作成する

プロジェクトファイルの格納先となるフォルダーを作成します (例: C:\Users\Documents\ACS\CallingApp)。 Visual Studio Code の [ファイル]>[ワークスペースにフォルダーを追加] をクリックし、ワークスペースにフォルダーを追加します。

ワークスペースにファイルを追加する際の選択肢を示すスクリーンショット。

左ペインの [エクスプローラー] に移動すると、 [無題] ワークスペースに CallingApp フォルダーが表示されます。

エクスプローラーと [無題] ワークスペースを示すスクリーンショット。

ワークスペースの名前は自由に更新してください。 Node.js のバージョンは、CallingApp フォルダーを右クリックし、 [Open in Integrated Terminal]$統合ターミナルで開く$ を選択すると確認できます。

統合ターミナルでフォルダーを開くための選択肢を示すスクリーンショット。

ターミナルで次のコマンドを入力して、前の手順でインストールした Node.js のバージョンを確認します。

node --version

Node のバージョンを確認する画面のスクリーンショット。

Visual Studio Code 用の Azure 拡張機能をインストールする

Visual Studio Marketplace から、または Visual Studio Code ( [表示]>[拡張機能]>[Azure Storage] ) で Azure Storage 拡張機能をインストールします。

Azure Storage 拡張機能をインストールするためのボタンを示すスクリーンショット。

Azure Functions や Azure App Service の拡張機能と同じ手順に従います。

ローカル Web サーバーを設定する

npm パッケージを作成する

ターミナルで、ワークスペースフォルダーのパスから次のコマンドを入力します。

npm init -y

このコマンドによって新しい npm パッケージが初期化され、プロジェクトのルートフォルダーに package.json が追加されます。

パッケージの J S O N を示すスクリーンショット。

npm init の詳細については、コマンドの npm Docs ページを参照してください。

webpack をインストールする

webpack を使用すると、Azure にデプロイできる静的ファイルとしてコードをバンドルすることができます。また、これには開発サーバーも含まれています。後で、このサーバーに対し、通話サンプルを使用するための構成を行います。

ターミナルで、次のコマンドを入力して webpack をインストールします。

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

このチュートリアルは、前のコマンドで指定したバージョンを使用してテストされています。この依存関係は開発用であり、Azure にデプロイするコードに含める必要はないということを、-dev を指定することでパッケージマネージャーに伝えています。

package.json ファイルに、2 つの新しいパッケージが devDependencies として追加されていることがわかります。これらのパッケージは ./CallingApp/node_modules/ ディレクトリにインストールされます。

webpack の構成を示すスクリーンショット。

開発サーバーを構成する

ブラウザーから静的アプリケーション (index.html ファイルなど) を実行する際は file:// プロトコルが使用されます。ローカルの開発サーバーとして webpack を使用して、npm モジュールを適切に動作させるためには HTTP プロトコルが必要となります。

ここでは、開発環境用と運用環境用に 2 つの構成を作成します。運用環境用に準備されるファイルは縮小されます。つまり、使用されない空白や文字は削除されます。この構成は待ち時間を最小限に抑えたり、コードを難読化したりする必要がある運用環境のシナリオに適した処理です。

webpack のさまざまな構成ファイルの操作には、webpack-merge ツールを使用します。

それでは、開発環境の作業を始めましょう。最初に webpack merge をインストールする必要があります。ご利用のターミナルで、次のコマンドを実行します。

npm install --save-dev webpack-merge

package.json ファイルを見ると、devDependencies にもう 1 つの依存関係が追加されていることがわかります。

次に、webpack.common.js というファイルを作成し、次のコードを追加します。

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

さらに、各構成に対応する 2 つのファイルを追加します。

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 から共通パラメーターをインポートし、2 つのファイルをマージします。さらに、モードを development に設定し、ソースマップを inline-source-map として構成します。

開発モードを指定した場合、webpack によってファイルは縮小されず、運用環境向けの最適化されたファイルは生成されません。 webpack のモードについて詳しくは、webpack のモードに関する Web ページを参照してください。

ソースマップのオプションは、webpack の Devtool に関する Web ページに記載されています。ソースマップを設定することで、ブラウザーからのデバッグがしやすくなります。

webpack を構成するためのコードを示すスクリーンショット。

開発サーバーを実行するには、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 から使用できるコマンドを追加しました。

package.json の変更を示すスクリーンショット。

開発サーバーをテストする

Visual Studio Code で、次の 3 つのファイルをプロジェクトに作成します。

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>

H T M L ファイルを示すスクリーンショット。

app.js に次のコードを追加します。

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

app.css に次のコードを追加します。

html {
    font-family: sans-serif;
  }

忘れずに保存してください。エクスプローラーでは、保存されていないファイルの名前の横に白色のドットが表示されます。

JavaScript コードを含む App.js ファイルを示すスクリーンショット。

このページを開くと、ブラウザのコンソール内に、メッセージがアラートと共に表示されるはずです。

App.css ファイルを示すスクリーンショット。

次のターミナルコマンドを使用して開発の構成をテストします。

npm run build:dev

サーバーの実行場所がコンソールに表示されます。既定では、これは http://localhost:8080 です。 build:dev は、先ほど package.json に追加したコマンドです。

開発サーバーの起動を示すスクリーンショット。

ブラウザーで目的のアドレスに移動すると、前の手順で構成したページとアラートが表示されるはずです。

H T M L ページのスクリーンショット。

サーバーの実行中に、コードとサーバーに変更を加えることができます。 HTML ページが自動的にリロードされます。

次に、Visual Studio Code で app.js ファイルに移動し、alert('Hello world alert!'); を削除します。ファイルを保存し、ブラウザーからアラートが消えたことを確認します。

サーバーを停止するには、ターミナルで Ctrl+C を実行します。サーバーを起動したければ、いつでも「npm run build:dev」を入力してください。

Azure Communication Services パッケージを追加する

npm install コマンドを使用して、JavaScript 用の Azure Communication Services Calling SDK をインストールします。

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

このアクションによって、Azure Communication Services の common パッケージと calling パッケージがパッケージの依存関係として追加されます。 package.json ファイルに、2 つの新しいパッケージが追加されていることがわかります。 npm install の詳細については、コマンドの npm Docs ページを参照してください。

Azure Communication Services パッケージをインストールするためのコードを示すスクリーンショット。

これらのパッケージは Azure Communication Services チームにより提供され、認証ライブラリと通話ライブラリを含んでいます。 --save コマンドによって、これらのパッケージが運用アプリケーションの依存関係であることが伝えられて package.json ファイル内の devDependencies に追加されます。運用環境向けにアプリケーションをビルドすると、これらのパッケージが運用環境のコードに追加されます。

Azure の静的 Web サイトに Web サイトを発行する

運用環境デプロイ用の構成を作成する

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 Storage にアプリをデプロイする

dist フォルダーに index.html と app.css をコピーします。

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 フォルダーを右クリックして [Deploy to Static Website via Azure Storage]$Azure Storage を介して静的 Web サイトにデプロイ$ を選択します。

Azure へのデプロイを開始するための選択肢のスクリーンショット。

[サブスクリプションの選択] で、 [Azure にサインイン] (過去にサブスクリプションを設定したことがない場合は [無料の Azure アカウントの作成] ) を選択します。

Azure にサインインするための選択肢を示すスクリーンショット。

[新しいストレージアカウントの作成]>[Advanced]$詳細$ を選択します。

ストレージアカウントグループを作成するための選択肢を示すスクリーンショット。

ストレージグループの名前を入力します。

アカウント名の追加画面のスクリーンショット。

必要に応じて新しいリソースグループを作成します。

新しいリソースグループを作成するための選択肢を示すスクリーンショット。

[Would you like to enable static website hosting?]$静的 Web サイトのホスティングを有効にしますか?$ で [はい] を選択します。

Web サイトのホスティングを有効にするオプションを選択する画面のスクリーンショット。

[Enter the index document name]$インデックスドキュメント名の入力$ には、既定のファイル名をそのまま使用します。既に index.html というファイルを作成済みです。

[Enter the 404 error document path]$404 エラードキュメントのパスを入力してください$ に「404.html」と入力します。

アプリケーションの場所を選択します。選択した場所によって、今後通話アプリケーションのグループ通話で使用されるメディアプロセッサが定義されます。

メディアプロセッサは、アプリケーションの場所に基づいて Azure Communication Services が選択します。

場所の一覧を示すスクリーンショット。

リソースと Web サイトが作成されるまで待ちます。

[Browse to website]$Web サイトを参照$ を選択します。

デプロイが完了したというメッセージとブラウザーで Web サイトにアクセスするためのボタンを示すスクリーンショット。

ブラウザーの開発ツールからソースをチェックし、運用に必要なファイルが準備されていることを確認します。

Web サイトソースとファイルのスクリーンショット。

Azure portal に移動してリソースグループを選択し、作成したアプリケーションを選択します。続けて、 [設定]>[静的な Web サイト] を選択します。静的な Web サイトが有効になっていることを確認できます。プライマリエンドポイント、インデックスドキュメントの名前、エラードキュメントのパスをメモしてください。

静的な Web サイトの選択を示すスクリーンショット。

[Blob service] で [コンテナー] を選択します。この一覧を見ると、2 つのコンテナーが作成されていることがわかります。1 つはログ用 ($logs) で、もう 1 つは Web サイトのコンテンツ用 ($web) です。

コンテナーの構成を示すスクリーンショット。

$web コンテナーを開くと、Visual Studio で作成して Azure にデプロイしたファイルが表示されます。

Azure にデプロイされたファイルを示すスクリーンショット。

アプリケーションはいつでも Visual Studio Code から再デプロイすることができます。

初めての Azure Communication Services Web アプリケーションをビルドする準備はこれで完了です。

次の手順

音声通話をアプリに追加する

次の記事もご覧ください。