演習 - ポーリングベースの Web アプリの制限事項を分析する - Training

15 分

プロトタイプを変更する前に、それを実行して前提条件を検証する必要があります。プロトタイプは GitHub のソースコードリポジトリにあります。

Azure リソースを作成する

別のブラウザータブまたはウィンドウで、次のリンクを使用して GitHub のサンプルリポジトリをフォークします: mslearn-advocates.azure-functions-and-signalr。これにより、変更を独自のバージョンのソースコードにプッシュできます。これは、モジュールの後半でソースコードを Azure にデプロイするために必要な手順です。
ターミナルで、リポジトリをクローンします。次のコマンドで、MicrosoftDocs を自分のアカウントに置き換えます。
```
git clone https://github.com/MicrosoftDocs/mslearn-advocates.azure-functions-and-signalr stock-prototype
```
setup-resources フォルダーに依存関係をインストールします。
```
cd stock-prototype/setup-resources && npm install
```
EBADENGINE に関する警告が表示された場合は、無視してかまいません。
Azure CLI を使用して Azure にサインインします。
```
az login
```
サブスクリプションを表示し、既定の Azure サブスクリプションを設定します。

サブスクリプションを表示します。
```
az account list --output json | jq -r '.[] | .name' | sort
```
既定のサブスクリプションを設定するには、YOUR-SUBSCRIPTION-ID を前の Azure CLI 出力のサブスクリプション ID に置き換えます。
```
az account set --subscription <YOUR-SUBSCRIPTION-ID>
```
この既定のサブスクリプションは、Azure リソースの作成に使用されます。
Azure リソースを作成し、サンプルデータをデータベースにアップロードします。プロセスが完了するまでに数分かかることがあります。
```
bash create-start-resources.sh "<YOUR-SUBSCRIPTION-NAME>"
```
必ず、名前を二重引用符で囲みます。

必要な情報をコピーします。プロトタイプを実行するには、これらの情報が必要です。

リソースの種類	環境変数
Azure Cosmos DB	COSMOSDB_CONNECTION_STRING と呼ばれます
Azure Storage	STORAGE_CONNECTION_STRING と呼ばれます
リソースグループ	RESOURCE_GROUP_NAME と呼ばれます。

次のコマンドを使って、Node.js スクリプトを使用してサンプルデータをデータベースにアップロードします。
```
npm start
```
ターミナルで、root フォルダーに移動します。
```
cd ..
```

依存関係をインストールしてプロトタイプを実行する

依存関係をインストールします。

cd start/client && npm install && cd ../..
cd start/server && npm install && cd ../..

通知でワークスペースの Azure Functions アプリを選択するように求められた場合は、start/server を選択します。これは、サーバー側コードの実行に使用する関数アプリです。
最新の Azure Functions Core Tools のインストールに関する通知を受け取った場合は、[インストール] を選択します。

クライアントとサーバーの URL を取得する

ローカルで実行する場合、クライアントアプリケーションとサーバーアプリケーションは、互いに検索する場所を認識する必要があります。 URL は次のとおりです。

クライアント: http://localhost:3000
サーバー: http://localhost:7071

Azure Functions アプリのローカル設定を更新する

プロトタイプの Azure Functions アプリに接続文字列を追加します。

./start/server/local.settings.json ファイルを作成し、以下を貼り付けます。このファイルには、ローカル関数プロジェクトの構成設定があります。

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "<STORAGE_CONNECTION_STRING>",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureWebJobsFeatureFlags": "EnableWorkerIndexing",
    "COSMOSDB_CONNECTION_STRING": "<COSMOSDB_CONNECTION_STRING>"
  },
  "Host" : {
    "LocalHttpPort": 7071,
    "CORS": "http://localhost:3000",
    "CORSCredentials": true
  }
}

上からコピーした値で次の変数を更新します。

プロパティ値

AzureWebJobsStorage ストレージ接続文字列に置き換えます。

COSMOSDB_CONNECTION_STRING Cosmos DB 接続文字列に置き換えます。

これで、Functions アプリはクライアントから要求を受信し、データベースに接続してタイマートリガーを正しく管理できるようになりました。

プロパティ	値
AzureWebJobsStorage	ストレージ接続文字列に置き換えます。
COSMOSDB_CONNECTION_STRING	Cosmos DB 接続文字列に置き換えます。

クライアントアプリのローカル設定を追加する

プロトタイプのクライアントアプリケーションにサーバー URL を追加します。

./start/client を開き、次の内容の .env ファイルを作成します。

BACKEND_URL=http://localhost:7071

サーバーアプリケーションを実行する

ターミナルで、Azure Functions アプリケーションを開始します。
```
cd start/server && npm start
```

ターミナルに API エンドポイントが表示されるまで待ちます。

Functions:

        getStocks: [GET] http://localhost:7071/api/getStocks

        setPrice: timerTrigger

クライアントアプリケーションを実行する

新しいターミナルで、クライアントアプリケーションを開始します。
```
cd start/client && npm start
```
アプリケーションが実行されていることを示す通知が表示されたら、プロトタイプを使用するために [ブラウザーで開く] を選択します。
ターミナルと株価のプロトタイプを同時に表示できるように、ブラウザーウィンドウを配置します。
プロトタイプのブラウザーウィンドウで、ブラウザーの開発者ツールを開きます。データが変更されていない場合でも、すべてのデータに対して 5 秒ごとにブラウザーが API に対して要求を行っていることがわかります。
ブラウザーウィンドウで、Azure Functions アプリの出力を確認します。 1 分ごとに 1 つの株価が変わります。 API の価格が変更されると、クライアントによる全データの次回の取得にその変更が含まれます。
クライアント開始とサーバー開始の両方のターミナルで、Ctrl + C キーを押してアプリケーションを停止するか、ごみ箱アイコンを選択してターミナルを強制終了します。

このユニットでは、プロトタイプを実行しました。クライアントは正常に実行されますが、効率的ではありません。個々のクライアントそれぞれは、このような少数の株式ではこれに気付かないかもしれませんが、株式の数が増えると、サーバーからプルするクライアントの数に応じて変化します。プロトタイプを改善することができます。次のユニットでその方法を学習しましょう。

続行

演習 - ポーリングベースの Web アプリの制限事項を分析する

Azure リソースを作成する

依存関係をインストールしてプロトタイプを実行する

クライアントとサーバーの URL を取得する

Azure Functions アプリのローカル設定を更新する

クライアント アプリのローカル設定を追加する

サーバー アプリケーションを実行する

クライアント アプリケーションを実行する

フィードバック

クライアントアプリのローカル設定を追加する

サーバーアプリケーションを実行する

クライアントアプリケーションを実行する