--- lang: ja-jp breaks: true --- # `ASP.NET Core` 静的コンテンツをホストする 2023-04-29 > ASP.NET Core の静的ファイル > https://learn.microsoft.com/ja-jp/aspnet/core/fundamentals/static-files?view=aspnetcore-7.0#serve-files-in-web-root > ![](https://i.imgur.com/5SsgxHT.png) > 既定のドキュメントの提供 > https://learn.microsoft.com/ja-jp/aspnet/core/fundamentals/static-files?view=aspnetcore-7.0#serve-default-documents > ![](https://i.imgur.com/rkir0r4.png) ## `ASP.NET Core（空）`テンプレートからプロジェクトを作成する。 ![](https://i.imgur.com/9PIGBef.png) ## `Program.cs` 以下を追加する。 ```csharp= app.UseDefaultFiles(); app.UseStaticFiles(); ``` ```csharp= public class Program { public static void Main(string[] args) { var builder = WebApplication.CreateBuilder(args); var app = builder.Build(); app.UseDefaultFiles(); app.UseStaticFiles(); //app.MapGet("/", () => "Hello World!"); app.Run(); } } ``` ## `wwwroot` ディレクトリを作成して、ホストしたいコンテンツを追加する。 ![](https://i.imgur.com/lQCqEFO.png) :::info index.html ```htmlembedded= <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: Bootstrap Bundle with Popper --> <!-- --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <!-- Option 2: Separate Popper and Bootstrap JS --> <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> --> </head> <body> <h1>Hello, world!</h1> <div class="mb-3"> <label for="exampleFormControlInput1" class="form-label">Email address</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com"> </div> <div class="mb-3"> <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> </div> </body> </html> ``` ::: ## 実行 ![](https://i.imgur.com/iku0SqL.png) ###### tags: `ASP.NET Core` `静的コンテンツ`