iPentec.com  /  Doc  /  C#  /  ASP.NET Core

目次

ASP.NET Core WebアプリケーションでHTMLや画像などの静的ファイルを表示できるようにする - ASP.NET Core

ASP.NET Core WebアプリケーションでHTMLや画像などの静的ファイルを表示できるようにするコードを紹介します。

概要

こちらの記事で紹介していますが、ASP.NET Core Webアプリケーションのデフォルトの設定ではアプリケーションルート以下のすべてのURLに対して同じ処理が実行される動作になります。アプリケーションによってはアプリケーション内であらかじめ用意された静的ファイルや画像を表示したい場合があります。この記事ではASP.NET Core Webアプリケーションで静的ファイルを扱えるようにする設定を紹介します。
ASP.NET Core Webアプリケーションで静的ファイルを扱うには、Configure メソッドで UseStaticFiles() メソッドを呼び出します。また、プロジェクトに静的ファイルを配置するwwwrootフォルダを作成し、そのフォルダ内に静的ファイルを配置します。

プログラム例:最上位レベルのステートメントを使用する場合

事前準備

ASP.NET Coreアプリケーションを作成します。作成手順はこちらの記事を参照してください。

wwwrootフォルダの作成

Visual Studioを起動しプロジェクトを開きます。


ソリューションエクスプローラーでプロジェクトのノードをクリックして選択します。 右クリックしポップアップメニューを表示します。 ポップアップメニューの[追加]の[新しいフォルダー]の項目をクリックします。


プロジェクトの直下にフォルダが作成されます。


フォルダ名を wwwroot に設定します。


フォルダ名を wwwroot にするとソリューションエクスプローラーの項目のアイコンがフォルダのアイコンから地球のアイコンに変わります。


作成した wwwroot フォルダに静的ファイルを追加します。今回は static.html と image.png の2ファイルを追加します。


ファイルの内容は下記になります。
static.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>静的ページ</title>
</head>
<body>
    <p>静的ページですよ</p>
</body>
</html>
image.png
image.png

コード

下記のコードを記述します。
Program.cs
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アプリケーションを作成します。作成手順はこちらの記事を参照してください。

wwwrootフォルダの作成

Visual Studioを起動しプロジェクトを開きます。


ソリューションエクスプローラーでプロジェクトのノードをクリックして選択します。右クリックしポップアップメニューを表示します。ポップアップメニューの[追加]の[新しいフォルダー]の項目をクリックします。


プロジェクトの直下にフォルダが作成されます。


フォルダ名を wwwroot に設定します。


フォルダ名を wwwroot にするとソリューションエクスプローラーの項目のアイコンがフォルダのアイコンから地球のアイコンに変わります。


作成した wwwroot フォルダに静的ファイルを追加します。今回は static.html と image.png の2ファイルを追加します。


ファイルの内容は下記になります。
static.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>静的ページ</title>
</head>
<body>
    <p>静的ページですよ</p>
</body>
</html>
image.png
image.png

コード

下記のコードを記述します。
startup.cs
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>");
      });

    }
  }
}

解説

下記のコードにより静的ファイルが利用できるようになります。静的ファイルのルートディレクトリが先に作成した wwwroot フォルダになります。(アプリケーションルートの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アプリケーションで静的ファイルにアクセスできるようになりました。
著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

関連するページ

最終更新日: 2023-05-10
作成日: 2019-10-21
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
コンテンツ
YouTube
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.