Azure Static Web Apps を使用 ASP.NET Core スタンドアロン Blazor WebAssembly をホストしてデプロイする

この記事では、Blazor WebAssembly を使用してスタンドアロン をホストおよびデプロイする方法について説明します。

アプリを構成する

パスの要求が index.html返されるようにするには、ナビゲーション フォールバック ルートを設定します。

プロジェクトのルート フォルダーに staticwebapp.config.json という名前のファイルを作成し、次の内容を含めます。

{
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

Visual Studio からデプロイする

Visual Studio からデプロイするには、Azure Static Web Apps の発行プロファイルを作成します。

1. プロセス中に Visual Studio の再起動が必要になる場合があるため、保存されていない作業をプロジェクトに保存します。

2. Visual Studio の [発行] UI で、[ターゲット]>[Azure]>[特定のターゲット]>[Azure Static Web Apps] を選択して、発行プロファイルを作成します。

3. Visual Studio 用 Azure WebJobs ツール コンポーネントがインストールされていない場合は、ASP.NET および Web 開発コンポーネントをインストールするように求めるプロンプトが表示されます。 プロンプトに従って、Visual Studio インストーラーを使用してツールをインストールします。 Visual Studio は、ツールのインストール中に自動的に閉じて再び開きます。 ツールがインストールされたら、最初のステップからやり直して発行プロファイルを作成します。

4. 発行プロファイルの構成で、サブスクリプション名を指定します。 既存のインスタンスを選択するか、[新しいインスタンスの作成] を選択します。 Azure portal の [静的 Web アプリの作成] UI で新しいインスタンスを作成する場合は、[デプロイの詳細]>[ソース] を [その他] に設定します。 Azure portal でデプロイが完了するまで待ってから、先に進んでください。

5. 発行プロファイルの構成で、インスタンスのリソース グループから Azure Static Web Apps インスタンスを選択します。 [完了] を選択して、発行プロファイルを作成します。 Visual Studio で Static Web Apps (SWA) CLI のインストールを求められた場合は、プロンプトに従って CLI をインストールします。 SWA CLI には npm/Node.js が必要です (Visual Studio のドキュメント)。

発行プロファイルが作成されたら、[発行] ボタンを選択し、発行プロファイルを使用してアプリを Azure Static Web Apps インスタンスにデプロイします。

GitHub デプロイ シナリオ

• Visual Studio Code: クイック スタート: Azure Static Web Apps を使用して最初の静的サイトを構築する
• .NET CLI: Azure Static Web Apps を使用して Blazor Web サイトをクラウドにデプロイする (ビデオ)
• GitHub からデプロイする: チュートリアル: Azure Static Web Apps で Blazor を使用して静的 Web アプリを構築する