ASP.NET Core Blazor のホストと展開Host and deploy ASP.NET Core Blazor

作成者: Luke LathamRainer StropekDaniel RothBy Luke Latham, Rainer Stropek, and Daniel Roth



重要

Blazor WebAssembly in preview

Blazor Server is supported in ASP.NET Core 3.0. Blazor WebAssembly is in preview for ASP.NET Core 3.1.

アプリの発行Publish the app

アプリは、リリース構成での展開のために発行されます。Apps are published for deployment in Release configuration.

  1. [ビルド] > [Publish {APPLICATION}]({アプリケーション} を発行する) を選択します。Select Build > Publish {APPLICATION} from the navigation bar.
  2. [publish target](発行先) を選択します。Select the publish target. ローカルに発行するには、 [フォルダー] を選択します。To publish locally, select Folder.
  3. [フォルダーの選択] フィールド内で既定の場所を受け入れるか、または別の場所を指定します。Accept the default location in the Choose a folder field or specify a different location. [発行] ボタンを選びます。Select the Publish button.

アプリを発行すると、プロジェクトの依存関係の復元がトリガーされ、展開されるアセットを作成する前にプロジェクトがビルドされます。Publishing the app triggers a restore of the project's dependencies and builds the project before creating the assets for deployment. ビルド プロセスの一環として、アプリのダウンロード サイズを縮小し読み込み時間を短縮するため、未使用のメソッドおよびアセンブリが削除されます。As part of the build process, unused methods and assemblies are removed to reduce app download size and load times.

発行場所:Publish locations:

  • Blazor WebAssembly WebAssembly
    • スタンドアロン – アプリは " /bin/Release/{ターゲット フレームワーク}/publish/wwwroot" フォルダーに発行されます。Standalone – The app is published into the /bin/Release/{TARGET FRAMEWORK}/publish/wwwroot folder. アプリを静的サイトとして展開するには、wwwroot フォルダーの内容を静的サイトのホストにコピーします。To deploy the app as a static site, copy the contents of the wwwroot folder to the static site host.
    • ホステッド – クライアント Blazor WebAssembly アプリは、サーバ ーアプリの他の静的な Web アセットと共に、サーバー アプリの " /bin/Release/{ターゲット フレームワーク}/publish/wwwroot" フォルダーに発行されます。Hosted – The client Blazor WebAssembly app is published into the /bin/Release/{TARGET FRAMEWORK}/publish/wwwroot folder of the server app, along with any other static web assets of the server app. publish フォルダーの内容をホストに展開します。Deploy the contents of the publish folder to the host.
  • Blazor サーバー – アプリは " /bin/Release/{ターゲット フレームワーク}/publish" フォルダーに発行されます。 Server – The app is published into the /bin/Release/{TARGET FRAMEWORK}/publish folder. publish フォルダーの内容をホストに展開します。Deploy the contents of the publish folder to the host.

フォルダー内のアセットは、Web サーバーに展開されます。The assets in the folder are deployed to the web server. 展開のプロセスが手動であるか自動であるかは、ご使用の展開ツールによって異なります。Deployment might be a manual or automated process depending on the development tools in use.

アプリのベース パスApp base path

アプリのベース パスとは、アプリのルート URL パスのことです。The app base path is the app's root URL path. 次の ASP.NET Core アプリと Blazor サブアプリについて考えてみましょう。Consider the following ASP.NET Core app and Blazor sub-app:

  • ASP.NET Core アプリは MyApp と命名します。The ASP.NET Core app is named MyApp:
    • このアプリは、物理的に d:/MyApp にあります。The app physically resides at d:/MyApp.
    • 要求は、https://www.contoso.com/{MYAPP RESOURCE} で受信されます。Requests are received at https://www.contoso.com/{MYAPP RESOURCE}.
  • CoolApp という名前の Blazor アプリは MyApp のサブアプリです。A Blazor app named CoolApp is a sub-app of MyApp:
    • このサブアプリは、物理的に d:/MyApp/CoolApp にあります。The sub-app physically resides at d:/MyApp/CoolApp.
    • 要求は、https://www.contoso.com/CoolApp/{COOLAPP RESOURCE} で受信されます。Requests are received at https://www.contoso.com/CoolApp/{COOLAPP RESOURCE}.

CoolApp に対して構成を追加指定しない場合、このシナリオではサブ アプリにはそれがサーバー上のどこの場所にあるかわかりません。Without specifying additional configuration for CoolApp, the sub-app in this scenario has no knowledge of where it resides on the server. たとえば、相対 URL パス /CoolApp/ にあることがわからない場合、アプリはそのリソースに対する正しい相対 URL を作成できません。For example, the app can't construct correct relative URLs to its resources without knowing that it resides at the relative URL path /CoolApp/.

<base> タグの href 属性は、Blazor アプリのベース パスの https://www.contoso.com/CoolApp/ に構成を指定するため、Pages/_Host.cshtml ファイル (Blazor サーバー) または wwwroot/index.html ファイル (Blazor WebAssembly) の相対ルート パスに設定されます。To provide configuration for the Blazor app's base path of https://www.contoso.com/CoolApp/, the <base> tag's href attribute is set to the relative root path in the Pages/_Host.cshtml file (Blazor Server) or wwwroot/index.html file (Blazor WebAssembly):

<base href="/CoolApp/">

Blazor サーバー アプリはさらに、Startup.Configure のアプリの要求パイプラインで UsePathBase を呼び出すことによって、サーバー側のベース パスを設定します。 Server apps additionally set the server-side base path by calling UsePathBase in the app's request pipeline of Startup.Configure:

app.UsePathBase("/CoolApp");

相対 URL を指定することにより、ルート ディレクトリに存在しないコンポーネントでアプリのルート パスへの相対 URL を構築できます。By providing the relative URL path, a component that isn't in the root directory can construct URLs relative to the app's root path. ディレクトリ構造の別のレベルに存在するコンポーネントが、アプリ内のさまざまな場所にある他のリソースに対するリンクを構築できます。Components at different levels of the directory structure can build links to other resources at locations throughout the app. アプリのベース パスは、リンクの href ターゲットがアプリのベース パス URI 空間内にある、選択されたハイパーリンクの阻止にも使用されます。The app base path is also used to intercept selected hyperlinks where the href target of the link is within the app base path URI space. 内部のナビゲーションは、Blazor ルーターによって処理されます。The Blazor router handles the internal navigation.

多くのホスティング シナリオでは、アプリへの相対 URL パスは、アプリのルートです。In many hosting scenarios, the relative URL path to the app is the root of the app. これらの場合、アプリの相対 URL ベース パスにフォワード スラッシュ (<base href="/" />) が付きます。これは、Blazor アプリの既定の構成です。In these cases, the app's relative URL base path is a forward slash (<base href="/" />), which is the default configuration for a Blazor app. GitHub ページと IIS サブアプリなど、その他のホスティング シナリオの場合、アプリのベースパスは、アプリへのサーバーの相対 URL パスに設定する必要があります。In other hosting scenarios, such as GitHub Pages and IIS sub-apps, the app base path must be set to the server's relative URL path of the app.

アプリのベース パスを設定するには、Pages/_Host.cshtml ファイル (Blazor サーバー) または wwwroot/index.html ファイル (Blazor WebAssembly) の <head> タグ要素内の <base> を更新します。To set the app's base path, update the <base> tag within the <head> tag elements of the Pages/_Host.cshtml file (Blazor Server) or wwwroot/index.html file (Blazor WebAssembly). href 属性値を /{RELATIVE URL PATH}/ (末尾にスラッシュが必要) に設定します。ここで、{RELATIVE URL PATH} は、アプリの完全な相対 URL パスです。Set the href attribute value to /{RELATIVE URL PATH}/ (the trailing slash is required), where {RELATIVE URL PATH} is the app's full relative URL path.

ルート以外の相対 URL パスが構成されている Blazor WebAssembly アプリの場合 (例: <base href="/CoolApp/">)、そのアプリはローカルで実行されると自身のリソースを見つけることができません。For an Blazor WebAssembly app with a non-root relative URL path (for example, <base href="/CoolApp/">), the app fails to find its resources when run locally. ローカルでの開発およびテスト中は、実行時の <base> タグの href 値と一致するパス ベース引数を指定することで、この問題を克服することができます。To overcome this problem during local development and testing, you can supply a path base argument that matches the href value of the <base> tag at runtime. 末尾にはスラッシュを含めないでください。Don't include a trailing slash. アプリをローカルで実行しているときにパス ベースの引数を渡すには、アプリのディレクトリから --pathbase オプションを指定して dotnet run コマンドを実行します。To pass the path base argument when running the app locally, execute the dotnet run command from the app's directory with the --pathbase option:

dotnet run --pathbase=/{RELATIVE URL PATH (no trailing slash)}

相対 URL パスが /CoolApp/ (<base href="/CoolApp/">) の Blazor WebAssembly アプリについては、このコマンドは次のようになります。For a Blazor WebAssembly app with a relative URL path of /CoolApp/ (<base href="/CoolApp/">), the command is:

dotnet run --pathbase=/CoolApp

Blazor WebAssembly アプリは http://localhost:port/CoolApp でローカルで応答します。The Blazor WebAssembly app responds locally at http://localhost:port/CoolApp.

配置Deployment

展開のガイダンスについては、次のトピックを参照してください。For deployment guidance, see the following topics: