Blazor Web App をWindows Server 2022 のIISにデプロイしてみた

C#を使って Webアプリをサクッと作る方法を探していたら、Blazor の存在を思い出したので、さっそく試してみました。

Visual Studio 2022 のプロジェクトテンプレートから Blazor Web App を選ぶと、簡単なサンプルページが付いたプロジェクトが生成されます。

これをビルドするとローカルPC上で簡易ブラウザが立ち上がり、デモページが表示されるのですが、これをIISで動かそうと思ったら、思いのほか時間が掛かりました。

手順を分かってしまえば簡単ですので、ここで纏めておきます。

## 手順０．Blazorアプリの発行
今回のデモページをIISで公開する場合は「発行」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775985/e783344d-f7e9-110c-39ea-8a318c263e22.png)

ターゲットは「フォルダ」を指定します。リモートでIISのフォルダに発行することも可能ですが、別途リモートデプロイ用のツールをサーバ側にインストールする必要があるので、今回は素直にフォルダに出力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775985/6e692916-f578-eb94-3b9f-6c88b15f68db.png)

ビルドファイル（Blazroアプリ）を出力するフォルダを選択して「完了」をクリックすればビルドが始まります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775985/b8855971-4380-109e-13a3-7a87e7521705.png)


## 手順１．IISをインストールする
サーバマネージャーの「役割と機能の追加」からIISをインストールします。インストールは特に選択すべき項目は無く、「次へ」ボタンをクリックしていくだけです。

１．「サーバーの役割の選択」で、Webサーバ（IIS）にチェックを入れます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775985/ee6cadc1-73f9-7c55-2595-b8a94ff8a06e.png)

２．次のダイアログが表示されるので、「機能の追加」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775985/29d9c722-12aa-700d-b6b1-a565a6e76ac8.png)

３．次の画面が表示されるので、「次へ」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775985/de601a31-66b0-8da0-c86c-694b3096827a.png)

後は「インストール」ボタンが有効になるまで、「次へ」をクリックしていき、最後に「インストールボタン」をクリックします。

するとインストールが始まりますので、しばらく待ちましょう。
IISがインストールできたら、ブラウザからサーバのIPアドレスを叩くと次の画面が表示されます。これでIISのインストールは完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775985/e81e6632-719f-ec19-86c4-c7f235d04ccd.png)

## 手順２．Blazor アプリをデプロイする
Visual Studio から発行した Blazor アプリをサーバのフォルダにコピーします。場所はどこでも良いのですが、今回はC:¥inetpub¥wwwroot の配下に、BlazorDemo というフォルダを作成し、そこにコピーしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775985/e2892482-febd-449d-99ba-fcabe426252a.png)

## 手順３．IISサービスマネージャーにアプリとして登録する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775985/1c98f5b1-83cd-9287-6091-bac21621966c.png)

コンピュータ名（WIN-O3CQPSRPA7G～）を右クリックし「Webサイトの追加」を選んで、表示されるダイアログにサイト名、物理パス、ポートを入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775985/837dd348-00a0-ab48-94f7-620603a49e28.png)

## 手順４．アプリケーションプール名を確認する
手順３で入力したサイト名がアプリケーションプール名になりますが、念のため確認しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775985/7e60f1aa-345c-0bc5-ad65-c21d5c5a877c.png)

## 手順５．フォルダに参照権限を付与する
Blazorアプリをデプロイしたフォルダ（今回はC:¥inetpub¥wwwroot¥BlazorDemo）に対して、アプリケーションプールの参照権限を付与します。

この時のポイントとなるのは、 "IIS AppPool\アプリケーションプール名" を直接入力して「OK」ボタンをクリックする点です。
今回は "IIS App Pool\BlazorDemo" と入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775985/4af27bed-ba4b-fc12-d952-0e601f5f5672.png)

付与する権限はデフォルトの状態で構いません。フルコントロールや変更は許可しなくても構いません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775985/3dc52e7b-24a9-d5e5-d84a-8373ed1ec637.png)

## 手順５．Windows Server Hosting をインストールする
Blazor アプリをIISで動かすためには、Window Server Hosting をMicrosoftのサイトからダウンロードして、インストールする必要があります。これを忘れると永久にアプリが公開できませんのでご注意ください。

下記がそのリンクです。クリックすると即座にダウンロードされます。
[https://dotnet.microsoft.com/en-us/download/dotnet/thank-you/runtime-aspnetcore-8.0.4-windows-hosting-bundle-installer](https://dotnet.microsoft.com/en-us/download/dotnet/thank-you/runtime-aspnetcore-8.0.4-windows-hosting-bundle-installer)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775985/754fd66b-ad75-eca2-e306-16d61e29549c.png)


ダウンロードしたインストーラを実行すれば作業は完了です。2024年4月現在において、dotnet-hosting-8.0.4-win.exe　がダウンロードされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775985/5a9acb07-ba4d-9585-ae1f-e4e28d088430.png)


## まとめ

IISのインストールは十数年ぶりだったので、色々と調べながらインストールしたので時間が掛かりました。特に Windows Server Hostingのインストールが必要なことと、フォルダにアプリケーションプールの参照権限を付与しなければいけないこと、フォルダ権限付与の際は直接"IIS AppPool\アプリケーションプール名"を指定しないといけないことなど、ちょっと調べるだけでは出てこない情報です。

でも、Bing AI（GPT-4）に色々と教えてもらって、無事公開することができました。

便利になりましたね。