デバッグ時にはリンクのファイルは配置されませんが、[発行]を実行してプロジェクトをフォルダなどに発行した場合は、リンクのファイルも書き出されます。
Visual Studio でwwwroot フォルダに配置されたリンクファイルが配置されないため、ファイルを参照できない現象と対処方法を紹介します。
ASP.NET Coreアプリケーションを作成します。
アプリケーション作成後、wwwroot フォルダを作成し、下記のindex.htmlファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
テストページです。
</body>
</html>
Startup.cs ファイルに app.UseStaticFiles(); を追記し、wwwrootフォルダの静的ファイルを参照できる状態にします。
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace CopyLinkedFiles
{
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.UseRouting();
app.UseStaticFiles();
app.UseEndpoints(endpoints =>
{
endpoints.MapGet("/", async context =>
{
await context.Response.WriteAsync("Hello World!");
});
});
}
}
}
NuGet パッケージマネージャーコンソール を開きbootstrapをインストールします。インストール手順はこちらの記事を参照してください。
上記の操作をした状態が下図です。ソリューションエクスプローラー のツリービューに wwwrootフォルダ内にcssとjsフォルダが作成され、ファイルが配置されています。
追加されたファイルやフォルダには、ツリービューのアイコンの左下に青い矢印のバッヂが表示されています。これは実際のファイルが配置されているのではなく、
ファイルのリンクが設置されていることを意味しています。
ASP.NET Core Webアプリケーションのプロジェクトを実行し、ドキュメントルートのindex.html にアクセスします。
wwwrootフォルダに配置したindex.htmlが参照でき、ページが表示されます。
続いて、リンクで配置された /js/bootstrap.js のURLを開きます。ファイルが見つからない旨のメッセージが表示されエラーページが表示されます。
NuGetでwwwrootフォルダ内にリンク(参照)で配置されたファイルはwwwrootのフォルダにデプロイされず、デバッグ時に参照できないことが確認できます。
リンクでソリューションエクスプローラーに追加されたファイルをデバッグ時のフォルダに書き出す方法として、
MSBuild.WebApplication.CopyContentLinkedFiles パッケージを利用します。
[MSBuild.WebApplication.CopyContentLinkedFil]のページにアクセスします。
下図のページが表示されます。最新版の [1.1.0-beta]のパッケージをインストールします。
Visual Studioで[パッケージ マネージャー コンソール] を開き、以下のコマンドを実行します。
Install-Package MSBuild.WebApplication.CopyContentLinkedFiles -Version 1.1.0-beta
MSBuild.WebApplication.CopyContentLinkedFilesパッケージがインストールされます。
インストールできた状態が下図です。
ソリューションエクスプローラーのwwwrootフォルダの下の[css][js]フォルダには青いアイコンが付いており、リンクされているファイルであることが確認できます。
プロジェクトをビルドします。
プロジェクトをビルドすると、下図の画面が表示されます。
ビルドが完了すると、先ほど青いアイコンが表示されていたフォルダとファイルの青い矢印が無くなっています。
これは、リンクされていたファイルがwwwrootの位置に配置されたためです。
プロジェクトを実行し、/js/bootstrap.js のURLを開きます。先ほどのプログラムではjsファイルにアクセスできず、ファイルが見つからなかった旨のメッセージが表示されますが、
MSBuild.WebApplication.CopyContentLinkedFiles NuGetパッケージをインストールすることで、リンクされたファイルをwwwroot に配置できます。
