GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の、製品のTIPSや発売などに関する最新情報をお届けします。

GrapeCity

Blazor WebAssemblyアプリをAzure Static Web Appsでホストする

本記事では、Visual Studio 2019を使用して作成したBlazor WebAssemblyアプリケーションを、Azure Static Web Appsへデプロイする方法を紹介します。

Azure Static Web Apps

Azure Static Web Appsは静的コンテンツ(HTML、JavaScript、CSS)で作成したWebアプリケーションをホストするためのクラウドサービスです。GitHubのリポジトリに置いたWebアプリケーションを更新するたびにGitHub Actionsにより自動的にビルドとデプロイが行われます。

Angular、React、Vue.jsといったJavaScriptフレームワークにも対応しており、バックエンドにはAPIとしてAzure Functionsを利用することも可能です。

Blazor WebAssemblyアプリケーション用のチュートリアル

Azure Static Web AppsのドキュメントにはBlazor WebAssemblyアプリケーション用のチュートリアルが用意されています。

こちらの手順を参考にAzure Static Web AppsにBlazor WebAssemblyアプリケーションをデプロイしていきます。

Blazor WebAssemblyアプリケーションの作成

まずはデプロイするアプリケーションを作成します。Visual Studioで「新しいプロジェクトの作成」-「Blazor アプリ」を選択してBlazorWasmApp1プロジェクトを作成します。

Blazor WebAssemblyアプリケーションの作成

[作成]をクリックして「Blazor WebAssembly App」を選択してさらに[作成]をクリックします。

Blazor WebAssemblyアプリケーションの作成

これでBlazor WebAssemblyアプリケーションの準備ができました。

Blazor WebAssemblyアプリケーションの作成

ソース管理(GitHub)への追加

Visual Studioのメニューから「ファイル」-「ソース管理に追加」をクリックします。

ソース管理(GitHub)への追加

[作成とプッシュ]をクリックしてGitリポジトリを作成してGitHubへプッシュします。

ソース管理(GitHub)への追加

作成とプッシュが完了すると、Visual Studioの「チームエクスプローラー」およびGitHubに作成したリポジトリのサイトで確認できます。

ソース管理(GitHub)への追加

ソース管理(GitHub)への追加

Azure Static Web Appsの準備

現時点ではVisual Sutido 2019の拡張機能には、Visual Studio CodeのようなGitHubリポジトリからGitHub Actionsを使用してAzure Static Web Appsへ作成したアプリケーションをデプロイする機能がまだありません。

そこで、AzureポータルかAzure CLIを使用して準備することになります。本記事ではAzureポータルからAzure Static Web Appsを準備していきます。

Azureポータルから「静的 Web アプリ (プレビュー)」を選択して[追加]をクリックします。

Azure Static Web Appsの準備

「リソース グループ」はblazor-wasm-static-app、「名前」はBlazorWasmAzureStaticWebAppを設定します。「地域」はEast Asiaを選択します。

Azure Static Web Appsの準備

続いてGitHubの設定をします。最初にVisual Studioからプッシュしたリポジトリを所有するアカウントを設定し、組織とリポジトリBlazorWasmApp1とブランチmasterを設定します。

Azure Static Web Appsの準備

最後にビルドの設定をします。「ビルドのプリセット」はBlazorを設定し「アプリの場所」はプロジェクトのフォルダBlazorWasmApp1を設定します。「API の場所」と「アプリの成果物の場所」はデフォルトのままにして[確認及び作成]をクリックして進めます。

Azure Static Web Appsの準備

さらに[作成]をクリックします。

Azure Static Web Appsの準備

作成が完了したら[リソースに移動]をクリックします。

Azure Static Web Appsの準備

これでAzure Static Web Appsの準備ができました。

Azure Static Web Appsの準備

確認してみる

以下の通知をクリックしてGitHubのリポジトリにあるGitHub Actionsのステータスを確認します。

GitHub Actions

GitHub Actionsのページで実行状況が確認できます。以下の実行結果をクリックします。

GitHub Actions

ビルドとデプロイの状況を確認できます。

GitHub Actions

Azureポータルで「URL」をクリックするとGitHub Actionsでビルド&デプロイされたアプリケーションが表示されます。

GitHub Actions

GitHub Actions

勿論ですがGitHub ActionsによるCI/CDも行えるので、Visual Sutidoでコンテンツを更新してコミットしGitHubにプッシュすると、自動的にビルドとデプロイが実行されてAzure Statics Web Appsへ反映されます。

GitHub Actions

GitHub Actions

GitHub Actions

  • グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の製品・技術資料をご覧ください。
  • グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の製品のデモアプリケーションをお試しください。