ASP.NET Core WebアプリケーションでHTMLや画像などの静的ファイルを表示できるようにするコードを紹介します。
こちらの記事で紹介していますが、ASP.NET Core Webアプリケーションのデフォルトの設定ではアプリケーションルート以下のすべてのURLに対して同じ処理が実行される動作になります。アプリケーションによってはアプリケーション内であらかじめ用意された静的ファイルや画像を表示したい場合があります。この記事ではASP.NET Core Webアプリケーションで静的ファイルを扱えるようにする設定を紹介します。
ASP.NET Core Webアプリケーションで静的ファイルを扱うには、Configure メソッドで UseStaticFiles() メソッドを呼び出します。また、プロジェクトに静的ファイルを配置するwwwrootフォルダを作成し、そのフォルダ内に静的ファイルを配置します。
ASP.NET Coreアプリケーションを作成します。作成手順はこちらの記事を参照してください。
Visual Studioを起動しプロジェクトを開きます。
ソリューションエクスプローラーでプロジェクトのノードをクリックして選択します。
右クリックしポップアップメニューを表示します。
ポップアップメニューの[追加]の[新しいフォルダー]の項目をクリックします。
プロジェクトの直下にフォルダが作成されます。
フォルダ名を wwwroot に設定します。
フォルダ名を wwwroot にするとソリューションエクスプローラーの項目のアイコンがフォルダのアイコンから地球のアイコンに変わります。
作成した wwwroot フォルダに静的ファイルを追加します。今回は static.html と image.png の2ファイルを追加します。
ファイルの内容は下記になります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>静的ページ</title>
</head>
<body>
<p>静的ページですよ</p>
</body>
</html>
下記のコードを記述します。
var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();
app.UseStaticFiles();
app.MapGet("/", () => "Hello World!");
app.Run();
以下のコードにより静的ファイルが利用できるようになります。
静的ファイルのルートディレクトリが先に作成した wwwroot フォルダになります。
(アプリケーションルートのURL)/static.html にアクセスすると、wwwrootフォルダに配置した static.html にアクセスできる状態になります。
app.UseStaticFiles();
プロジェクトを実行します。Webブラウザが起動し下図の画面が表示されます。Webアプリケーションの処理が実行されるため、"Hello World!" のメッセージが表示されます。
(アプリケーションルートのURL)/static.html にアクセスします。wwwrootフォルダに配置した static.html のページが表示されます。静的ファイルにルーティングできていることが確認できます。
(アプリケーションルートのURL)/image.png にアクセスします。wwwrootフォルダに配置した image.png の画像が表示できます。
ASP.NET Core Webアプリケーションで静的ファイルにアクセスできるようになりました。
ASP.NET Coreアプリケーションを作成します。作成手順はこちらの記事を参照してください。
Visual Studioを起動しプロジェクトを開きます。
ソリューションエクスプローラーでプロジェクトのノードをクリックして選択します。右クリックしポップアップメニューを表示します。ポップアップメニューの[追加]の[新しいフォルダー]の項目をクリックします。
プロジェクトの直下にフォルダが作成されます。
wwwroot に設定します。
フォルダ名を wwwroot にするとソリューションエクスプローラーの項目のアイコンがフォルダのアイコンから地球のアイコンに変わります。
作成した wwwroot フォルダに静的ファイルを追加します。今回は static.html と image.png の2ファイルを追加します。
ファイルの内容は下記になります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>静的ページ</title>
</head>
<body>
<p>静的ページですよ</p>
</body>
</html>
下記のコードを記述します。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.FileProviders;
using System.IO;
namespace StaticFileAccess
{
public class Startup
{
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment()) {
app.UseDeveloperExceptionPage();
}
app.UseStaticFiles();
app.Run(async context =>
{
await context.Response.WriteAsync("<div>Hello ASP.NET Core World!</div>");
});
}
}
}
(アプリケーションルートのURL)/static.html にアクセスすると、wwwrootフォルダに配置した static.html にアクセスできる状態になります。 app.UseStaticFiles();
静的ファイルにルーティングされなかった場合は、Runメソッドが実行され、"Hello ASP.NET Core World!" のレスポンスを返します。
app.Run(async context =>
{
await context.Response.WriteAsync("<div>Hello ASP.NET Core World!</div>");
});
プロジェクトを実行します。Webブラウザが起動し下図の画面が表示されます。Webアプリケーションの処理が実行されるため、"Hello ASP.NET Core World!" のメッセージが表示されます。
(アプリケーションルートのURL)/static.html にアクセスします。wwwrootフォルダに配置した static.html のページが表示されます。静的ファイルにルーティングできていることが確認できます。
(アプリケーションルートのURL)/image.png にアクセスします。wwwrootフォルダに配置した image.png の画像が表示できます。
ASP.NET Core Webアプリケーションで静的ファイルにアクセスできるようになりました。
