次の方法で共有

定型的な Azure Web アプリを作成して配置する

  • [アーティクル]

定型的な Azure Web アプリを作成して配置するには、バックエンドとフロントエンドの Web アプリを作成して配置する必要があります。 このチュートリアルでは、定型バックエンドとフロントエンド Web アプリを作成して配置する手順を説明します。

バックエンドとフロントエンドの Web アプリをデプロイする前に、ワークロード クラウド セットアップのチュートリアルをレビューしてください。

定型バックエンド Web アプリを作成して配置する

  1. Azure portal で Web アプリのリソースを作成します。

  2. 関連する情報を入力するか選択します。

    • [発行] するには [コード] を選択します。
    • ランタイム スタックで .NET 7 (STS) と Windows を選択します。

一般的な手順については、「Azure App Service を開始する」を参照してください。

ドメインをバックエンド Web アプリにマップする

  1. [設定] > [カスタム ドメイン] の順に移動します。

  2. [カスタム ドメインの追加] を選択し、指示に従います。

    詳細情報については、「Azure でのカスタム ドメイン マッピング」を参照してください。

  3. Visual Studio で、バックエンドの定型 ソリューションを開きます。

  4. プロジェクトを右クリックし、[発行] を選択します。

  5. ターゲット には [Azure] を選択します。

  6. 作成した Azure Web アプリにアクセスできるユーザーでサインインします。

  7. UI を使用して関連するサブスクリプションとリソース グループを見つけ、指示に従って公開します。

CORS の更新

  1. Azure portal にある Web アプリの概要ウィンドウで、[API] > [CORS] の順に移動します。
  2. [許可された配信元] で、フロントエンド Web アプリの URL を追加します。

定型的なフロントエンド Web アプリを作成しデプロイする

  1. Azure portal で Web アプリのリソースを作成します。

  2. 関連する情報を入力するか選択します。

    • [発行] するには [コード] を選択します。
    • ランタイム スタックの場合は、Node 18 LTS と Windows を選択します。

一般的な手順については、「Azure App Service における Node.js クイック スタート」を参照してください。

ドメインをフロントエンド Web アプリにマップする

  1. [設定] > [カスタム ドメイン] の順に移動します。
  2. [カスタム ドメインの追加] を選択し、指示に従います。

詳細情報については、「Azure でのカスタム ドメイン マッピング」を参照してください。

フロントエンドの定型的な Web アプリを公開する

  1. npm run build:test を実行してフロントエンド定型を構築します。
  2. Microsoft-Fabric-developer-sample\Frontend\tools\dist フォルダーに移動します。
  3. dist の下ですべてのファイルとアセット フォルダーを選択し、選択したファイルの.zip ファイルを作成します。
  4. PowerShell を開きます。
  5. PowerShell で Connect-AzAccount を実行し、作成した Azure Web アプリへのアクセス権を持つユーザーを使用して、サインインします。
  6. Set-AzContext -Subscription "<subscription_id>" を実行します。
  7. Publish-AzWebApp -ResourceGroupName <resource_group_name> -Name <web_app_name> -ArchivePath <zip_file_path> を実行します。