LoginSignup
4

More than 5 years have passed since last update.

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

Posted at

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

必要なもの

Visual Studio 2015 または Visual Studio Code

Visula Studio Code の場合

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

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

プロジェクトの作成

Visual Studio 2015 の場合

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

Visual Studio Code の場合

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

yo aspnet emptyweb SampleWebApplication
cd SampleWebApplication
code .

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

パッケージの取得

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

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 の場合は先ほど起動しておいたターミナルで以下のコマンドを入力して復元します。

dotnet restore

コードの変更

Startup.cs を変更します。

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 (英語)

index.html の追加

wwwroot フォルダに index.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 の場合は以下のコマンドを入力して実行します。

dotnet run

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4