【Windows/Mac】ASP.NET Core で HTML ファイルを表示する


ASP.NET Core で HTML ファイルを表示してみる。

# 必要なもの
[Visual Studio 2015](https://www.visualstudio.com/downloads/download-visual-studio-vs?wt.mc_id=o~msft~mscom~jpvs2015) または [Visual Studio Code](https://www.visualstudio.com/ja-jp/products/code-vs.aspx)

# Visula Studio Code の場合
以下のツールも必要ですので未インストールの場合はインストールしておいてください。

* [.NET Core](https://www.microsoft.com/net/core)
* [Node.js](https://nodejs.org/en/)
* [Yeoman](http://yeoman.io/) 
* [generator-aspnet](https://www.npmjs.com/package/generator-aspnet) 

また、Visual Studio Code で初めて ASP.NET Core プロジェクトをする場合は、以下の拡張機能をインストールしておきます。

* [C# for Visual Studio Code ](https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp)

# プロジェクトの作成

## Visual Studio 2015 の場合
[新しいプロジェクト] - [Web] - [APS.NET Core Web Application(.NET Core)] を選択してテンプレートは空を選択します。

## Visual Studio Code の場合
プロジェクトを作成するディレクトリで `yo aspnet` コマンドを実行して、空のWeb Application プロジェクトを作成してVisual Studio Code で開きます。

```bash
yo aspnet emptyweb SampleWebApplication
cd SampleWebApplication
code .
```

プロジェクトを開いたらツールバーの [表示] - [Toggle Integrated Terminal] を選択してエディタ内でターミナルを起動しておきます。

# パッケージの取得
ASP.NET Core プロジェクトでは project.json の `"dependencies"` に必要なパッケージを記述します。
HTML を表示するために Microsoft.AspNetCore.StaticFiles をプロジェクトに追加します。

```json:project.json
{
  "dependencies": {
    "Microsoft.NETCore.App": {
      "version": "1.0.0-rc2-3002702",
      "type": "platform"
    },
    "Microsoft.AspNetCore.Server.IISIntegration": "1.0.0-rc2-final",
    "Microsoft.AspNetCore.Server.Kestrel": "1.0.0-rc2-final",
    "Microsoft.AspNetCore.StaticFiles": "1.0.0-rc2-final"
  },

  "tools": {
    "Microsoft.AspNetCore.Server.IISIntegration.Tools": {
      "version": "1.0.0-preview1-final",
      "imports": "portable-net45+win8+dnxcore50"
    }
  },

  "frameworks": {
    "netcoreapp1.0": {
      "imports": [
        "dotnet5.6",
        "dnxcore50",
        "portable-net45+win8"
      ]
    }
  },

  "buildOptions": {
    "emitEntryPoint": true,
    "preserveCompilationContext": true
  },

  "runtimeOptions": {
    "gcServer": true
  },

  "publishOptions": {
    "include": [
      "wwwroot",
      "web.config"
    ]
  },

  "scripts": {
    "postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]
  }
}
```

Visual Studio 2015 の場合は保存すると自動でパケージを復元します。
Visual Studio Code の場合は先ほど起動しておいたターミナルで以下のコマンドを入力して復元します。

```bash
dotnet restore
```

# コードの変更

Startup.cs を変更します。

```csharp:Startup.cs
using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.DependencyInjection;

namespace SampleWebApplication
{
    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 http://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)
        {
            app.UseDefaultFiles();
            app.UseStaticFiles();
        }
    }
}
```

`UseDefaultFiles()` と `UseStaticFiles()` は Microsoft.AspNetCore.StaticFiles に定義されている拡張メソッドです。

`UseStaticFiles()` は web root (既定 は wwwroot) のファイルを静的コンテンツとして扱うようにします。
`UseDefaultFiles()` は以下のファイル名に一致するファイルを静的コンテンツのリストから探して一番最初に見つかったものを実行時に表示させます。

* default.htm
* default.html
* index.htm
* index.html

また、 `UseDefaultFiles()` は `UseStaticFiles()` より前に呼び出す必要があります。

使用方法の詳細については以下を参照してください。
[Working with Static Files — ASP.NET  documentation (英語)](https://docs.asp.net/en/latest/fundamentals/static-files.html)

# index.html の追加
wwwroot フォルダに index.html を作成します。

```html:index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello ASP.NET Core</title>
</head>
<body>
    Hello
</body>
</html>
```

# 実行
Visual Studio Code の場合は以下のコマンドを入力して実行します。

```bash
dotnet run
```