🕌

Blazor Web AppsをIISのルートディレクトリ以外にデプロイする

2024/01/30に公開

はじめに

通常はIISにディレクトリ分けしていくつものアプリケーションをデプロイしたいという欲求があります。
たとえば、App ServiceであればApp Service Plan単位に課金されるので1つのApp Service Planの中に多数のApp Serviceを立ててそれぞれにアプリケーションをデプロイするという考えが成り立ちます。
しかし、IISは一つの物理・仮想サーバに原則1つしか上がりません。
もちろん、待ち受けポートを変更すればいくつものWeb Siteを立ち上げることは可能ですが運用上は80/443ポート以外で待ち受けることは考えられません。

そこで、考えられる方法として一つのサーバ上でとあるディレクトリ下ではとあるアプリケーションが稼働し別のディレクトリ下では別のアプリケーションが稼働するというような方法をとるのが一般的と考えられます。

今回は、その方法について記していきたいと思います。

前提条件

今回デプロイするアプリケーション

  • Blazor Web Apps
  • Interactive rander mode : Server
  • Interactive Lacation : Global
  • Include sample pages ✅
  • HTTPS用の構成 ✅
  • 認証の種類:なし

サーバ

Azure Windows VM
2022-datacenter-azure-edition-hotpatch

IIS側の対応

アプリケーションを格納するフォルダーを作る

既定ではIISのコンテンツルートは「C:\inetpub\wwwroot」あたりになっているかと思います。
この下にアプリケーションを格納するフォルダーを作成します。
今回は「C:\inetpub\wwwroot\Sample」にアプリケーションを格納していこうと思います。

アプリケーションに変換する

IISマネージャを開き、Default Web Siteの下に今回作成したフォルダーが現れているのでこれをアプリケーションに変換します。
画像はSample2となっていますが目的のフォルダー名に読み替えてください。

アプリケーションプールを作成する

アプリケーションプールは.NET CLR VersionをNo Managed Codeで作成します。

作成したアプリケーションプールをアプリケーションに割り当てる

先ほど作成したアプリケーションプールをその前に作成したアプリケーションに割り当ててあげます。

アプリケーション側の対応

アプリケーションを通常にデプロイするとCSS、JSなどがリンク切れとなった状態になってしまいます。
原因は、App.razorに記述されているCSS、JSがルートパスからの記述になっているからです。
ここに、ベースパスとしてデプロイするパスを記述して残りのCSS、JSのパスを相対パスの記述にする必要があります。

今回、「sample」というディレクトリにデプロイすることとしたので以下のようになりました。

App.razor
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/sample/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="{アプリ名}.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet @rendermode="InteractiveServer" />
</head>

<body>
    <Routes @rendermode="InteractiveServer" />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

デプロイ

Visual Studioからフォルダーに発行したものをサーバの「C:\inetpub\wwwroot\Sample」にコピーします。
ブラウザーアクセスしてみて無事動いていれば成功です。

Discussion