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

15 分

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

Azure リソースを作成する

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

Visual Studio Code ターミナルには、このアカウントに関連付けられているサブスクリプションの一覧が表示されます。
この一覧で、この演習に使用するサブスクリプションを見つけます。

サインイン以降に一覧を見失った場合は、次のスニペットを使用してサブスクリプションを再び一覧表示することができます。
```
az account list --output table
```
既定のサブスクリプションを設定するには、YOUR-SUBSCRIPTION-ID を前の Azure CLI 出力のサブスクリプション ID に置き換えます。
```
az account set --subscription <YOUR-SUBSCRIPTION-ID>
```
この既定のサブスクリプションは、Azure リソースの作成に使用されます。
Azure リソースを作成し、サンプルデータをデータベースにアップロードします。プロセスが完了するまでに数分かかることがあります。
```
bash create-start-resources.sh "<YOUR-SUBSCRIPTION-NAME>"
```
必ず、名前を二重引用符で囲みます。使用可能なリソースがない場所に関するエラーがスクリプトで生成された場合は、スクリプトを編集して場所を変更します: LOCATION=<NEW LOCATION>。

出力から次の情報をコピーして保存します。プロトタイプを実行するために必要です。

リソースの種類	環境変数
Azure Cosmos DB (アジュールコスモスデータベース)	COSMOSDB_CONNECTION_STRING と呼ばれます
Azure Storage	STORAGE_CONNECTION_STRING と呼ばれます
リソースグループ	RESOURCE_GROUP_NAME と呼ばれます。

ターミナルの setup-resources ディレクトリで、Node.js スクリプトを使用して、次のコマンドを使用してサンプルデータをデータベースにアップロードします。
```
npm start
```
出力には、架空のストックアプリケーションの開始データが表示されます。
```
Seed data added. Symbol ABC
Seed data added. Symbol DEF
Seed data added. Symbol GHI
```
ターミナルで、 ルート フォルダーに移動します。
```
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 (AzureのWebジョブストレージ)	ストレージ接続文字列に置き換えます。
COSMOSDB_CONNECTION_STRING	Cosmos DB 接続文字列に置き換えます。

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

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

プロトタイプのクライアントアプリケーションにサーバー 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 アプリのローカル設定を更新する

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

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

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

フィードバック

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

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

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