ストレージ アカウントを使用して静的 Web サイトをホストする

  • 1 分

静的 Web サイトにデプロイします。

ローカル コンピューターでアプリケーションをテストし、API をデプロイしたら、次はクライアントをデプロイします。

クライアント SignalR アーキテクチャ

Web ページが読み込まれると、クライアント アプリケーションは次のようになります。

  • /api/getStocks HTTP エンドポイントから株式の現在のリストを取得します。
  • SignalR エンドポイントに接続します。 /api/negotiate HTTP エンドポイントへの接続が確立されます。
  • SignalR エンドポイントの /api 接続からの在庫変動を監視します。 イベントを受信すると、クライアントは UI の株価を更新します。 接続が永続的であるため、これらの更新はブラウザーの [ネットワーク] タブには表示されません。

クライアントを Azure Static Web Apps にデプロイする

クライアントをホストするために、Azure Static Web Apps を使用します。 Azure Static Web Apps は、コード リポジトリから Web アプリを自動的にビルドして Azure にデプロイするサービスです。

クライアントは、クラウド API URL を使用して構築する必要があります。 WebPack を使用するクライアント ビルド プロセスでは、API URL がクラウド API URL に置き換えられます。 URL は、 .env ファイルからローカルにフェッチされます。 GitHub アクションでこの値を取得するには、GitHub リポジトリでシークレットとして設定する必要があります。