前回は Blazor WebAssembly アプリ(C# Blazor クライアントサイドアプリ)を Visual Studio の F5 でデバッグ実行したが、今回は、本番運用の雰囲気を掴むために、アプリを Web サーバー(Windows 10 の自サーバー)で公開してみる。Web サーバーにアクセスするとクライアントアプリがダウンロードされて実行される。ローカル LAN のみでの公開で、インターネットには公開しない。

インストール

有効化または無効化まずは Windows 10 に内蔵されている IIS の有効化。

Windows 10 の設定で「機能」で検索すると「Windows の機能の有効かまたは無効化」が出てくるのでクリック。

IIS有効化リストの下の方にある「インターネットインフォメーションサービス」にチェックを入れる。完全チェックにはならないがデフォルトで問題ないようだ。

また、その下にある「インターネットインフォメーションサービスのホスト可能な Web コア」はチェックを入れなくて問題ないようだ(チェック入れておいた方が安心かも?)。

OK を押すと構成を更新してくれる。

Hosting次にホスティング機能のインストール。

マイクロソフト公式サイトから ASP.NET Core Hosting Bundle をダウンロード・インストール。

特段のオプションも無く、簡単にインストールが完了する。

Rewrite最後に URL をリダイレクトするモジュールのインストール。

マイクロソフト公式サイトから URL Rewrite Module 2 をダウンロード・インストール。

言語とプラットフォームでダウンロードファイルが異なっているが、通常は Japanese x64 installer だろう。

こちらもインストールは簡単。

発行

MenuVisual Studio での作業。Blazor のプロジェクトを、IIS 下で実行できるようにビルド(発行)する。

ソリューションエクスプローラーでプロジェクトを右クリックし、「発行」をクリック。

Targetターゲットをフォルダーにする。

Place場所はデフォルトで構わない。

bin\Release\net5.0\browser-wasm\publish

Publishウィザードが閉じて、公開シートが表示される。

デフォルトでは WebAssembly になっていないので、「ターゲットランタイム」などの右側にある鉛筆マークをクリックし、公開の設定ダイアログを開く。

「配置モード」を「自己完結」、「ターゲットランタイム」を「browser-wasm」にして保存する。

Publish2公開シートが更新されたのを確認後、「発行」ボタンをクリックするとビルドが行われ、「ターゲットの場所」で指定したフォルダーにファイル一式が保存される。

IIS の設定

StartMenu発行した Blazor アプリにブラウザからアクセスできるようにするため、IIS の設定を行う。

スタートメニューから「インターネットインフォメーションサービス(IIS)マネージャー」を起動。

IIS マネージャー右側の操作ペインにて、サーバーを開始しておく。

AddSiteIIS マネージャー左側の接続ペインより、「サイト」を右クリックして「Web サイトの追加」をクリック。

Web サイトの追加ダイアログが表示される。
  • サイト名:好きな名前にする。今回はアプリの名前と同じ「BlazorApp1」とした。
  • アプリケーションプール:サイト名と同じ名前で自動入力される。
  • 物理パス:発行時のフォルダーを指定する。ここで指定したフォルダーの直下に「wwwroot」フォルダーと「web.config」が存在しているはずである。wwwroot 自体を指定してはいけない。
  • 種類:https にする。
  • ポート:大きめのポートで好きなポートにする。今回は 10001 にした。
  • SSL 証明書:IIS Express Development Certificate を選択。
設定できたら OK する。

(補足)
試行錯誤中は https でないとうまく動かなかった気がしていたが、改めて試してみたら http でも動くようだ。

http500この段階でブラウザで https://localhost:10001 にアクセスしてページが表示されれば良いが、おそらくは HTTP エラー 500 となるはず。

発行したフォルダーに IIS がアクセスできないことによるエラーなので、フォルダーのアクセス権限を設定する。

FolderSecurity発行したフォルダーのプロパティーを開き、セキュリティタブの編集ボタンをクリック。

続いて追加ボタン、詳細設定ボタンをクリックすると、「ユーザーまたはグループの選択」ダイアログが開く。

UserGroup検索ボタンをクリックするとユーザー一覧が表示されるので、「IIS_IUSRS」「IUSR」の 2 つを選択してから OK する。

以上で準備完了。

アクセス

Accessブラウザで https://localhost:10001 にアクセスすると、BlazorApp1 の Hello, world! が表示される。http「s」であることに注意。

Access2同じ LAN 内の別のパソコンから、サーバーマシンのローカル IP でアクセスすると、セキュリティの警告は出るが、強行すればやはりページは表示される。

以上、無事に IIS で Blazor WebAssembly アプリを公開できた。