ASP.NET Core 静的コンテンツを返す方法（html, js, css等）

ASP.NET Core で、HTMLなどの静的コンテンツを返却する方法を書いていきます。

プロジェクトの概要

動作確認のために作成したプロジェクトは以下の通りです。

言語：C#
テンプレート：ASP.NET Core Web API
フレームワーク：.NET 6.0
HTTPS 用の構成：無効
コントローラーを使用する：有効
OpenAPI サポートを有効にする：無効
プロジェクト名：WebApiSample

プロジェクトの作成方法は、こちらに記載しています。

1. 起動プログラムの編集

アプリの起動用プログラム（例. Program.cs）を開いて、以下のコードを追加します。

app.UseStaticFiles();

プログラムの全体は以下の通りです。

Program.cs

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllers();

var app = builder.Build();
app.UseAuthorization();
app.MapControllers();
app.UseStaticFiles();
app.Run();

これで、wwwroot フォルダの静的コンテンツを配信できるようになります。

2. wwwroot フォルダの作成

ソリューションエクスプローラーでプロジェクトを右クリックして、「追加 → 新しいフォルダー」を選択します。

フォルダが追加されたら、名前を「wwwroot」に変更します。

3. 静的コンテンツの作成

wwwroot フォルダを右クリックして、「追加 → 新しい項目」を選択します。

ダイアログが表示されたら「index.html」を追加します。

4. HTML の編集

追加した HTML を開いて、以下の内容に変更しました。

wwwroot/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Index Page</title>
</head>
<body>
  <p>Index Page.</p>
</body>
</html>

5. プロパティの変更

HTML のプロパティで「出力ディレクトリにコピー」を「新しい場合はコピーする」に変更しました。

コンパイル先にも静的コンテンツが出力されるので、出力先をアーカイブする時などは便利だと思います。

6. 動作確認

デバッグ実行して、以下の URL（ポート番号は可変）を開きます。

http://localhost:xxxx/index.html

以下の文字列が表示されることを確認しました。

Index Page.

Web系開発メモ

Java, C#, HTML, CSS, JavaScript のことなどを書いてます。