3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Blazor WebAssembly をサブパスに配置するには base href を変更で OK、だけど開発中に困りません?

3
Last updated at Posted at 2025-12-23

base href を書き換えるのはいいのですが...

Blazor WebAssembly スタンドアローンプログラムを、ルート URL ではなく、サブパスに配置したい場合は、フォールバックページ (wwwroot/index.html) 内に記載の <base> 要素の href 属性に、その配置先のサブパスを記載すれば OK です。例えば、https://server/foo/ に配置される Blazor WebAssembly プロジェクトであれば、以下のように wwwroot/index.html を書き換えます。

wwwroot/index.html
<html>
<head>
  ...
  <!--   ここ👇を "/" から "/foo/" に変更 -->
  <base href="/foo/">
  ...

やるべきことは以上です。しかしこの状態で dotnet run などで実行しても、このような実行時はその Blazor WebAssembly アプリケーションはルート URL に配置されて実行されているため、ベース URL が想定と実際とで異なることから動作しません。

じゃぁどうするか?

では、配置用に発行する直前に base href を書き換え、発行し終わったらまた元に戻す、といった手順とすればよいのでしょうか? 確かにそうすれば機能はします。しかし発行のたびに毎回このような手作業が発生するのは面倒ですし、絶対にいつかミスが発生するに決まっています。

では、MSBuild スクリプトを駆使するとか、CI/CD パイプラインのアクションを使って、発行後に wwwroot/index.html の中身を書き換える、とすればよいのでしょうか? この方法であれば "手作業" によるミスや面倒から解放されます。しかし、そのような MSBuild スクリプトや CI/CD パイプラインのアクションの作成・保守は、今や AI がやってくれるであろうとはいえ、気が重いです。

ほかに方法はないのでしょうか?

実はあります。

ちゃんとそのシナリオはサポートされています

実は、Blazor WebAssembly スタンドアローンプロジェクトで使用される開発サーバーは、サブパスに配置された状態での実行をサポートしています。すなわち、dotnet run で実行するときに、--pathbase オプションでサブパスを指定して実行すればよいのです。

dotnet run --pathbase="/foo"

wwwroot/index.html 内の <base> 要素の href 属性を "/foo/" に書き換えてある状態で、上記で Blazor WebAssembly プロジェクトを起動すれば、http(s)://localhost:{posrt}/foo をブラウザで開くと、その Blazor WebAssembly アプリケーションが正常に開きます。

もちろん dotnet run だけでなく、dotnet watch でも機能します。

dotnet watch --pathbase="/foo"

要注意点としては --pathbase オプションに指定するサブパス文字列は、「先頭のスラッシュ追加必須・末尾のスラッシュ削除必須」という点です。<base> 要素の href 属性の指定は「先頭と末尾の両方にスラッシュ必須」であるのとは違います。

CLI の引数で毎回指定するのではなく、起動プロファイルに記述する場合は、以下のように環境変数 ASPNETCORE_PATHBASE にサブパスを指定します。さらに launchUrl にそのサブパスを指定しておけば、dotnet watch でブラウザで開かれる際や、Visual Studio からの起動時などで、そのサブパスをブラウザが開くようになります。

Properties\launchSettings.json
{
  "$schema": "https://json.schemastore.org/launchsettings.json",
  "profiles": {
    "http": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "applicationUrl": "http://localhost:5100",
+     "launchUrl": "foo",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development",
+       "ASPNETCORE_PATHBASE": "/foo"
      }
    }
}

launchUrl に指定するサブパス文字列は「先頭のスラッシュ削除必須」なのでその点はご注意ください (ややこしい...)。

公式ドキュメント

以上の件は、公式のドキュメント上でも説明されています (下記 URL)。

なお、上記公式ドキュメントでは、起動プロファイルでの指定方法として、commandLineArgs オプションの使用が記述されています。しかし、その方法だと、Visual Studio からの起動にはよいのですが、dotnet watch コマンドからの実行時には効果がありません。つまり、せっかく起動プロファイルに書いてあっても使われず、dotnet watch コマンド実行時の引数に --pathbase=... を明示する必要がある、ということです。そのため、自分個人としては、環境変数 ASPNETCORE_PATHBASE に指定する方法が好みです。環境変数方式であれば、dotnet CLI 直接実行時も、Visual Studio からの起動時でも、どちらの場合でもサブパスに配置の指定が有効になります。

まとめ

開発時は以上のように CLI 引数や環境変数にサブパス指定をつけて実行することで、Blazor WebAssembly アプリケーションを任意のサブパスに配置した状態で起動できます。

そのため、wwwroot/index.html 内の <base> 要素の href 属性は、配置予定のサブパスを固定で書き込んでおいても、問題なく開発できます。

3
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
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?