0
1

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

Posted at

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

前提

  • WindowsServer2022(Amazon EC2にて仮想)
  • VisualStudio Community 2022
  • .net8
  • BlazorWebAssemblyアプリは用意されている
  • IISのインストールまでは済んでいる(まだの人はこちらを参照)

1,IISの機能追加

image.png
サーバーマネージャーを起動します。

image.png
役割と機能の追加」をクリック

image.png
次へ

image.png
役割ベースまたは機能ベースのインストール」を選択し、「次へ

image.png
サーバープールからサーバーを選択」を選び、対象のサーバーを選択します。
そして「次へ

image.png
Management Service (管理サービス)」にチェックを入れる。

image.png
機能の追加」を押します。

image.png
次へ

image.png
インストール」でインストール!

※完了したら、IISマネージャーでちゃんと追加されているか確認できます。
以下に、「管理サービス」アイコンが表示されていたらOKです。
image.png

2,.net8のランタイムをインストール

ASP.NETなアプリを動かすには、サーバーに下記のランタイムをインストールしてあげないとダメです。
なお、自分の公開したいアプリに合ったバージョンをインストールしましょう。
ASP.NET Core Runtime 8.0.6のHosting Bundle版をダウンロード

image.png
ちょっと分かりにくいですが、自分に合ったものを選んでください。
ここでは「ASP.NET Core Runtime 8.0.6」のWindows用インストーラー「Hosting Bundle」です。
ダウンロードされたら実行しましょう。

image.png
インストール!

3,URL Rewrite Moduleのインストール

Blazor WebAssemblyではURLの書き換えを内部で行っているらしく、この機能をインストールする必要があります。
URL Rewrite Module 2.1をダウンロード

image.png
下の方にスクロールし、日本語の64ビット版をダウンロードし、インストールしてください。

image.png
インストール!

4,Web Deploy のインストール

VisualStudioから発行されるアプリを受け取るためのツールです。
Web Deploy v4.0をダウンロード

image.png
言語は「Download」ボタンを押した後で選べます。

image.png
ここでは似たファイルがたくさんありますので、良く気を付けてダウンロードしてください。
チェックポイントは2つ。自分の環境に合うものを選びましょう。

  • x86用とamd64用の2種類あります!
  • 言語別に用意されています!
    webdeploy_amd64_ja-JP.msi」というのを選びましょう。
    そして、「Download
    ダウンロードされたら、それを実行します。

image.png
次へ

image.png
次へ

image.png
完全」を必ず選んでください。

image.png
インストール!

※完了したら、IISマネージャーで確認できます。
以下に、「管理サービスの委任」アイコンが表示されていたらOKです。
なお、IISマネージャーの再起動をしないと表示されないかもしれません。
image.png

5,IISマネージャーユーザーを追加

アプリをWeb Deployするのに、配置先フォルダへのアクセス権が必要です。
何も考えずWindowsユーザーを使うのはセキュリティ的に好ましくないと思いますので、Deploy専用のユーザーを用意します。これはWindowsユーザーとは違い、IISマネージャーのユーザーになります。
image.png
IISマネージャーを開きます。
①対象のサーバーを選択し、
②「IISマネージャーユーザー」を開く。

image.png
「ユーザーの追加」をクリック

image.png
①ユーザー名を決めてください。今回は「DeployUser」を入れます。※好きな名前で大丈夫です。
②パスワードを決めてください。

image.png
追加されて、「有効」になっていることを確認してください。
これでIISマネージャーユーザーの追加は終了です。

6,公開サイトの追加

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

image.png
”c:\inetpub”フォルダ内に配置先にするフォルダを新設します。
今回はサイト名にするつもりの「TestWeb」をフォルダ名にしました。
続けて、IISマネージャーに登録します。

image.png
登録の前に、既存の「Default Web Site」があるとポート80が競合してしまうので削除してしまいます。
残しておきたい人は削除ではなく停止にするか、ポートを80以外に変更しても良いかもしれません。

image.png
サイト」の上でポップアップメニューから「Webサイトの追加」を選びます。

image.png
ここでは簡易に、ただのhttpサイトとして設定します。httpsサイト用の設定は別記事(予定)にて。
①サイト名は「TestWeb」にしました。
②物理パスには「c:\inetpub\TestWeb」を入力。
※ホスト名は空欄でも大丈夫です。

7,Web配置による発行の有効化

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

image.png
TestWeb」上でポップアップメニューを出し、「展開」→「Web配置による発行の有効化

image.png
ここで設定するのは「発行アクセス許可を付与するユーザー」部分です。
ここを先ほど追加したIISマネージャユーザーの「DeployUser」に変更してあげます。

image.png
①ユーザーの種類は「IISマネージャー」です。
②「選択」をクリック

image.png
DeployUser」を選択し、「OK

image.png
①「設定」ボタンを押せば、下部に結果が表示され完了です。
②「閉じる」ボタンを押しましょう。

8,ファイアウォールの設定

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

image.png
利用しているインスタンスを開きまして、「セキュリティ」タブを選択。
そこに表示されている「セキュリティグループ」をクリックしましょう。

image.png
下までスクロールし、「インバウンドルール」タブの「インバウンドのルールを編集」をクリック。

image.png
下までスクロールし、「ルールを追加

image.png
①ポート範囲は「8172
②リソースタイプは「マイIP」にしました。自分のIPからしかアクセスできないようにしています。
③説明として「WebDeploy」を入れました。お好みで。なお、日本語は入れられません。
④最後は「ルールを保存」です。

サーバー側の準備は以上で完了です!

9,VisualStudioからWeb配置を実行

image.png
サーバーを離れ、開発PCに戻りましてVisualStudioを開きます。
Blazor WebAssembly「TestWeb」プロジェクトの発行を行います。

image.png
Webサーバー(IIS)」を選択します。

image.png
Web配置」を選択します。

image.png
①サーバー:サーバーのIPアドレスやDNS名などが入れられます。今回はIPアドレス入れました。
②サイト名:IISに登録してあるサイト名です。今回は「TestWeb」です。
③宛先URL:空白で大丈夫です。
④ユーザー名:IISで「発行アクセス許可を付与したユーザー」です。今回は「DeployUser」です。
⑤パスワード:上記のユーザーのパスワードです。
⑥「パスワードの保存」はお好みでどうぞ。
⑦以上が入力完了しましたら、「接続の検証」をしてみましょう。
image.png
今後の為に証明書を保存するにチェックを入れて、「同意する

⑧問題なければ「完了」です。

image.png
閉じる
ここではまだ配置までは行われていません。あくまで接続設定が終わっただけです。

image.png
発行」を押すとWeb配置が実行されます。
エラーが出たら、何かの設定が足りていません。
各種設定を今一度よく確認してください。

image.png
無事に成功しました!

10、サイトを開いてみる

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

image.png
成功しました!

最後に

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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1