2020年12月

Blazor WebAssembly アプリ(ASP.NET Core hosted)をフォルダーに発行する

前回は、Blazor WebAssembly App の「ホストしない(ASP.NET Core hosted にチェックを入れない)」プロジェクトをフォルダーに発行し、IIS で動くようにした。

CoreHosted今回は、「ホストされた(ASP.NET Core hosted な)」Blazor WebAssembly App をフォルダーに発行する。

プロジェクト新規作成時、テンプレートから「Blazor アプリ」を選んだ後、「新しい Blazor アプリを作成します」の画面で、左上のフレームワークを「.NET 5.0」に、テンプレートは「Blazor WebAssembly App」に、そして右側の「ASP.NET Core hosted」にチェックを入れる。

SolCore hosted にすると、作成されるソリューションの中にプロジェクトが 3 つぶら下がる。Client、Server、Shared の 3 つ。

CoreHostedWebF5 でデバッグ実行すると、Core hosted でないバージョン(以降「単体版」と呼ぶ)とほぼ同じサイトが表示される。

違いは Fetch data。単体版では所定のファイルを読み込んでいたので毎回同じ内容が表示されたが、Core hosted 版ではサーバーと通信してデータを取得する。サーバー側はランダムな数値を返してくるので、毎回表示される内容が変わる。

発行

前回の単体版発行時とほぼ同じなので、異なる部分のみを記載する。

発行するのは 3 つあるプロジェクトのうちの「Server」プロジェクト。それ以外のプロジェクトは、Server を発行すると自動的にくっついてくる。

x64公開の設定ダイアログでは、配置モードが「自己完結」なのは前回と同じだが、ターゲットランタイムは browser-wasm が選択肢にないので「win-x64」を選ぶ(32 ビット OS を使っていれば win-x86 かと思う)。

wasm じゃなくてちゃんと WebAssembly になるのか不安はあったが、あくまでもサーバー側のバイナリが win-x64 になるだけで、クライアントはちゃんと WebAssembly になるようだ。実行時の通信を見ていると、最初に blazor.webassembly.js をダウンロードさせているし、Fetch data 以外のページ切替では通信が発生しなかったので、必要時以外はクライアント側で完結しているようだ。

その他の設定は前回と同じ。

IIS の設定も前回と同じ。

これで、Core hosted 版も IIS でホストできる。

トラブルシューティング

実は最初、Core hosted 版はうまく IIS で動かなかった。IIS で動かしている Core hosted 版のページを表示しようとすると
  • HTTP エラー 500.19 - Internal Server Error
  • エラーコード 0x8007000d
  • 構成ファイル web.config
というエラーが表示された。

publish フォルダーに IIS のアクセス権限がない場合とは異なり、web.config にアクセスできないのではなく、web.config の内容が良くないという趣旨のようだった。

結果的には自動生成された web.config の内容には問題はなく、以下の対応でページが表示されるようになったが、具体的にどの対応が必要だったのかは不明。
  • 「Windows の機能の有効かまたは無効化」で、「インターネットインフォメーションサービスのホスト可能な Web コア」も念のためチェックを入れた。
  • ASP.NET Core Hosting Bundle を再インストール(IIS の有効化をした後にはやらないといけないらしい)。
  • 1 度、管理者権限で起動した Visual Studio でプロジェクトを発行した(ページ表示に成功してからは、ユーザー権限での発行でも問題なく発行できている)。
  • publish フォルダーの 1 つ上のフォルダーにもファイルがたくさんできていたので、1 つ上のフォルダーにも「IIS_IUSRS」「IUSR」にアクセス権限を付与。
  • IIS マネージャーでサイトの設定を変更する際は、いったんサイトを止めて、publish フォルダーを含む同レベルのフォルダーをすべて削除して、発行し直した。
なお、配置モードは自己完結だけでなく「フレームワーク依存」、ターゲットランタイムを「移植可能」にしても IIS で動かせた(ASP.NET Core Hosting Bundle を入れているので当然とも言えるが)。

Poolまた、アプリケーションプールの設定はデフォルト(.NET CLR 4、マネージドパイプライン統合)で問題ない。




Blazor アプリをフォルダーに発行して IIS でホストする

前回は 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 アプリを公開できた。


Visual Studio で Blazor

「C# で Web ページが作れるんだって」「Blazor って言って、WebAssembly で高速な Web アプリになるらしいよ」

というわけで、Blazor に触れてみるべく、公式のチュートリアルを見てみると……

dotnet new blazorserver -o TodoList

いきなりコマンドラインが出てきたよ! え? Visual Studio でちょちょいとできないのか?

いやいや、ちゃんと Visual Studio でできました。というわけで、その方法まとめ。

ASP.NET のインストール

Henko環境は、Windows 10 + Visual Studio Community 2019 Ver 16.8.2。

Visual Studio Installer を起動し、「変更」をクリック。

aspワークロードタブの「ASP.NET と Web 開発」にチェックを入れて「変更」ボタンをクリック。これで Blazor に必要なコンポーネントがインストールされる。

Blazor アプリ

BlazorAppVisual Studio を起動し、新しいプロジェクトの作成で絞り込みを「C#」「Windows」あたりにすると、選択肢に「Blazor アプリ」が表示されるので選択し、「次へ」。

NewBlazorプロジェクト名や場所などを決めて「作成」すると、「新しい Blazor アプリを作成します」の画面になる。

プラットフォームは「.NET 5.0」、テンプレートは「Blazor WebAssembly App」を選択して「作成」。

SolutionExpBlazor のテンプレートプロジェクトが作成される。

実行

runF5 キーを押してデバッグ実行すると、ブラウザが起動し、テンプレートプロジェクトで作成された Web アプリが表示される。

最初は「Loading...」と表示されるが、少し経つと右のように「Hello, world!」となる。

テンプレートの Web アプリは 3 ページ構成になっていて、左側のメニューでページを切り替えられる。

run2Counter ページでは、「Click me」をクリックする度にカウントアップしていく。

run3Fetch data ページには日付と気温がいくつか並んでいる。これは、予め用意された json ファイルを読み込んで表示するサンプルになっている。

……というように、Visual Studio でも簡単に Blazor を始められた。普段 ASP.NET で Web 開発をしている人にとっては常識的なことなのだと思うが、Web 開発素人にとっては試行錯誤が必要だったので、ここにまとめておく。

(補足)
現時点で、ブラウザは Chrome(か Edge)にしないとデバッグ実行時のブレークができない。ブラウザはツールバーの「IIS Express」で切り替えられる。


カンパのお願い
Amazon でお買い物の際は、下記で検索して頂けたら幸いです。
記事検索
最新コメント
月別アーカイブ
  • ライブドアブログ