BlazorWebAssemblyアプリ を VisualStudio からの Web配置で WindowsServer の IIS にデプロイして公開

BlazorWebAssemblyを使えば自作アプリも簡単に世に公開できるわけですが、デプロイの時点でけっこう躓きやすいのでここにまとめておこうと思います。
WindowsServerにセットアップしたIIS(Internet Information Services)に、VisualStudioから直接、Web配置にてアプリをアップロードしたい場合の手順になります。


前提
- WindowsServer2022(Amazon EC2にて仮想)
- VisualStudio Community 2022
- .net8
- BlazorWebAssemblyアプリは用意されている
- IISのインストールまでは済んでいる（まだの人は[こちら](https://qiita.com/NZTD/items/cd4e098ca4848bb42f2e#%EF%BC%94iis%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)を参照）


# １，IISの機能追加

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/7ba10a5e-d0f1-a822-37c2-8a428307192c.png)
**サーバーマネージャー**を起動します。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/54d2787e-7117-83d2-f3fc-2447c2d23b34.png)
「**役割と機能の追加**」をクリック
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/62aa6d4b-941a-e5ca-35a6-fd9925df7d0f.png)
「**次へ**」
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/34efb31e-65a9-95eb-d068-5f043451a334.png)
「**役割ベースまたは機能ベースのインストール**」を選択し、「**次へ**」
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/55d503a1-2442-96c0-6033-7b0bcc46bb97.png)
「**サーバープールからサーバーを選択**」を選び、対象のサーバーを選択します。
そして「**次へ**」
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/00d44d21-565f-5d7e-4fde-9e54578b8196.png)
「**Management Service** （管理サービス）」にチェックを入れる。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/6eda9b52-9536-16d9-6848-995d65745fea.png)
「**機能の追加**」を押します。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/fd89e810-f02f-f65c-d86a-684cd1605321.png)
「**次へ**」
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/e9899f09-2a98-46d3-f2a7-c813a7ba9963.png)
「**インストール**」でインストール！
<br>

※完了したら、IISマネージャーでちゃんと追加されているか確認できます。
以下に、「**管理サービス**」アイコンが表示されていたらＯＫです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/2cbb48f4-93d0-3587-f550-2e03da55367c.png)


# ２，.net8のランタイムをインストール
ASP.NETなアプリを動かすには、サーバーに下記のランタイムをインストールしてあげないとダメです。
なお、自分の公開したいアプリに合ったバージョンをインストールしましょう。
[ASP.NET Core Runtime 8.0.6のHosting Bundle版をダウンロード](https://dotnet.microsoft.com/en-us/download/dotnet/8.0)
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/445f23e9-6e38-6619-e845-dcddc7839888.png)
ちょっと分かりにくいですが、自分に合ったものを選んでください。
ここでは「ASP.NET Core Runtime 8.0.6」のWindows用インストーラー「Hosting Bundle」です。
ダウンロードされたら実行しましょう。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/e2087015-8ae0-6a4a-74fb-826b18d33ae9.png)
インストール！

# ３，URL Rewrite Moduleのインストール
Blazor WebAssemblyではURLの書き換えを内部で行っているらしく、この機能をインストールする必要があります。
[URL Rewrite Module 2.1をダウンロード](https://www.iis.net/downloads/microsoft/url-rewrite)
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/dbf9b596-b59f-3149-a697-f659b739be6d.png)
下の方にスクロールし、日本語の64ビット版をダウンロードし、インストールしてください。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/ba5970ec-77eb-2763-3044-1cd217d3907b.png)
インストール！


# ４，Web Deploy のインストール
VisualStudioから発行されるアプリを受け取るためのツールです。
[Web Deploy v4.0をダウンロード](https://www.microsoft.com/en-us/download/details.aspx?id=106070&msockid=249a4e66a90668b80d395ad2a8ae69c7)
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/f546c3db-bbac-bc1f-49c7-1cb5c4dd04d6.png)
言語は「Download」ボタンを押した後で選べます。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/9fd53f0f-4f1b-66d8-76c8-3bcb631034e6.png)
ここでは似たファイルがたくさんありますので、良く気を付けてダウンロードしてください。
チェックポイントは２つ。自分の環境に合うものを選びましょう。
- x86用とamd64用の２種類あります！
- 言語別に用意されています！
「**webdeploy_amd64_ja-JP.msi**」というのを選びましょう。
そして、「**Download**」
ダウンロードされたら、それを実行します。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/9d34a694-56c9-4562-86df-c7177497b76a.png)
「**次へ**」
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/127d489b-912e-2cb6-d753-9f317998f0cd.png)
「**次へ**」
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/dd880b04-ca8f-b799-7176-0f49ef549d57.png)
「**完全**」を必ず選んでください。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/2afedd53-46f6-2b1c-307a-43c789814934.png)
インストール！
<br>

※完了したら、IISマネージャーで確認できます。
以下に、「**管理サービスの委任**」アイコンが表示されていたらＯＫです。
なお、IISマネージャーの再起動をしないと表示されないかもしれません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/736f380f-280f-3926-44f7-21aee4f94855.png)


# ５，IISマネージャーユーザーを追加
アプリをWeb Deployするのに、配置先フォルダへのアクセス権が必要です。
何も考えずWindowsユーザーを使うのはセキュリティ的に好ましくないと思いますので、Deploy専用のユーザーを用意します。これはWindowsユーザーとは違い、IISマネージャーのユーザーになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/605a7866-4ffb-c860-df14-9aef3afd5b48.png)
IISマネージャーを開きます。
①対象のサーバーを選択し、
②「**IISマネージャーユーザー**」を開く。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/a6407881-f911-759c-0e3d-05395c50b875.png)
「ユーザーの追加」をクリック
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/e93537ed-dfd4-f00d-2036-5365d84b48ce.png)
①ユーザー名を決めてください。今回は「**DeployUser**」を入れます。※好きな名前で大丈夫です。
②パスワードを決めてください。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/482e093c-9df2-c10e-0e2b-a53fbcd85efe.png)
追加されて、「有効」になっていることを確認してください。
これでIISマネージャーユーザーの追加は終了です。
<br>


# ６，公開サイトの追加
ここでは、公開サイトを実際に配置するフォルダを用意し、それをIISマネージャーに登録する流れです。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/2dbcb57e-375b-95c9-4ecb-bcc1b29ace2b.png)
”c:\inetpub”フォルダ内に配置先にするフォルダを新設します。
今回はサイト名にするつもりの「**TestWeb**」をフォルダ名にしました。
続けて、IISマネージャーに登録します。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/68307fc2-e4d9-4db7-a56a-c10011261818.png)
登録の前に、既存の「**Default Web Site**」があるとポート80が競合してしまうので削除してしまいます。
残しておきたい人は削除ではなく停止にするか、ポートを80以外に変更しても良いかもしれません。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/22a580b2-05d9-b3c9-364e-796dd5c245ec.png)
「**サイト**」の上でポップアップメニューから「**Webサイトの追加**」を選びます。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/921dd6dc-aa26-5278-7121-7c2619fc3403.png)
ここでは簡易に、ただのhttpサイトとして設定します。httpsサイト用の設定は別記事（予定）にて。
①サイト名は「**TestWeb**」にしました。
②物理パスには「**c:\inetpub\TestWeb**」を入力。
※ホスト名は空欄でも大丈夫です。


# ７，Web配置による発行の有効化
サイトを追加しただけではWeb配置を受け付けてくれません。
対象サイトのWeb配置を有効化しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/30e00052-f9ee-048a-d8f2-1fc5d14a1305.png)
「**TestWeb**」上でポップアップメニューを出し、「**展開**」→「**Web配置による発行の有効化**」
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/4c60fe54-2956-c4e4-dd5f-85f4185258c5.png)
ここで設定するのは「**発行アクセス許可を付与するユーザー**」部分です。
ここを先ほど追加したIISマネージャユーザーの「**DeployUser**」に変更してあげます。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/8aeac05e-55cc-7bc1-1cc7-c7c153639824.png)
①ユーザーの種類は「**IISマネージャー**」です。
②「**選択**」をクリック
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/210e8f77-eeab-1013-04ca-fbaae230747a.png)
「**DeployUser**」を選択し、「**OK**」
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/4fb66c08-068f-cc3c-2851-c28eb05b5d69.png)
①「**設定**」ボタンを押せば、下部に結果が表示され完了です。
②「**閉じる**」ボタンを押しましょう。
<br>

# ８，ファイアウォールの設定

使っているのは
ポート80　HTTP用
ポート8172　Web配置用
です。
ただ、サーバー内のファイアフォールは、ここまでの設定の段階で自動的に解放されているはずです。
しかし今回は、そのサーバーをAWSのEC2サービス上に設置させてもらっていますので、そこのファイアウォールをポート開放してあげないといけません。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/acd0489c-019d-5977-a4ab-a418bb865356.png)
利用しているインスタンスを開きまして、「**セキュリティ**」タブを選択。
そこに表示されている「**セキュリティグループ**」をクリックしましょう。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/f06917b3-d060-b27f-49ca-ab1ba66f9740.png)
下までスクロールし、「**インバウンドルール**」タブの「**インバウンドのルールを編集**」をクリック。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/c473d055-68a2-3f6a-5738-556a80180709.png)
下までスクロールし、「**ルールを追加**」
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/c8a05339-b3fc-9727-41b8-78ba1dabd40c.png)
①ポート範囲は「**8172**」
②リソースタイプは「**マイIP**」にしました。自分のIPからしかアクセスできないようにしています。
③説明として「WebDeploy」を入れました。お好みで。なお、日本語は入れられません。
④最後は「**ルールを保存**」です。
<br>

サーバー側の準備は以上で完了です！
<br>

# ９，VisualStudioからWeb配置を実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/7eccfa85-900c-1f6b-489b-ecd49d6029cd.png)
サーバーを離れ、開発PCに戻りましてVisualStudioを開きます。
Blazor WebAssembly「**TestWeb**」プロジェクトの発行を行います。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/c7d18220-1e4b-d1ee-beeb-c4d48e9a2e66.png)
「**Webサーバー（IIS)**」を選択します。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/42c594f1-657f-a8ee-68c8-089a29a6cd71.png)
「**Web配置**」を選択します。
<br>


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/35d96074-ddce-bcf7-af26-8dd7e6686d22.png)
①サーバー：サーバーのIPアドレスやDNS名などが入れられます。今回はIPアドレス入れました。
②サイト名：IISに登録してあるサイト名です。今回は「**TestWeb**」です。
③宛先URL：空白で大丈夫です。
④ユーザー名：IISで「**発行アクセス許可を付与したユーザー**」です。今回は「**DeployUser**」です。
⑤パスワード：上記のユーザーのパスワードです。
⑥「パスワードの保存」はお好みでどうぞ。
⑦以上が入力完了しましたら、「**接続の検証**」をしてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/54d013dc-940d-492d-af73-bcf2da72fdd3.png)
今後の為に証明書を保存するにチェックを入れて、「**同意する**」

⑧問題なければ「**完了**」です。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/ed0b77ea-0cd6-7560-8e80-d543200cb082.png)
「**閉じる**」
ここではまだ配置までは行われていません。あくまで接続設定が終わっただけです。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/39a3eee7-ac48-34e4-ce42-cb128e378154.png)
「**発行**」を押すとWeb配置が実行されます。
エラーが出たら、何かの設定が足りていません。
各種設定を今一度よく確認してください。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/c5c13c0a-4335-4631-e623-04e21693aa8f.png)
無事に成功しました！

# １０、サイトを開いてみる
Web配置も完了しましたので、もう、外部からアプリにアクセスできるようになっているはずです。
試しにブラウザで開いてみましょう。
アドレスは「http://(サーバーのIPまたはDNS)」です。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555422/bd55b2f2-d1da-b00c-f086-b013777309b1.png)
成功しました！


# 最後に
無事に公開出来ましたが、今回はhttpでのアクセスであるため、ブラウザに表示されてはいますがアプリとしてインストールされているわけではありません。
WebAssemblyとしてインストールしてもらえるようにするにはhttpsにする必要があります。
それは、また次回の記事で。