你的浏览器还没开启 Javascript 功能!

ASP.NET Core 入門1 ASP.NET Coreを使って初めてのWebアプリを構築

ASP.NET Coreを学習することにあたって、思考の整理と学習記録をここの記載します。

私自身も.NET Coreを触るのが初めてなので、間違っている部分があれば、コメントにて指摘をお願いします。

前提

1. このコンテンツを扱うこと

  • Visual Studio Codeを使った環境構築
  • ASP.NET Coreを用いてWebアプリを作成
  • ASP.NET Core Webのアプリケーション起動クラスの説明
  • ASP.NET Core Webのプロジェクト構造の説明

2. 環境情報

環境/ソフトウェア内容
オペレーティングシステムWindows 10 1903
.NET Core SDK2.1.801
IDEVisual Studio Code 1.37.1
BrowserGoogle Chrome 76.0.3809.132

3. 前提知識

環境構築

1. SDKのダウンロード&インストール

  • ダウンロード先

    SDK

    .NET Core 2.1以降を選ぶこと

  • インストール

    特段説明する必要もないです。次へ次へと進めばOK。

2. Visual Studio Codeダウンロード&インストール

  • ダウンロード先

    VSCode

  • インストール

    特段説明する必要もないです。次へ次へと進めばOK。

3. VSCode拡張機能

拡張機能説明
.NET Core Extension Pack.NET Coreで開発ツール全揃
Japanese Language Pack for VS CodeUIの日本語化

VSCodeを使ってWebプロジェクトを作成

1. プロジェクト作成

コマンドを用いてプロジェクトを作成します

# プロジェクトフォルダ作成
mkdir projects

# フォルダ変更
cd projects

# dotnet cliでプロジェクト生成
dotnet new web -n helloweb

2. VSCodeでプロジェクトを開く

hellowebのフォルダを右クリックし、Open with Codeを選択し、プロジェクトを開きます。

下記のような警告が表示されますが、Yesを選択します。

.vscodeのフォルダに二つのファイルが出来上がります。(launch.json, tasks.json)

これで環境構築とプロジェクト作成が完了です。

3. VSCodeからプロジェクトを起動

そのままVSCodeで恒例のF5を押してデバッグしてみます。
初期URLは
https://localhost:5001
です。

Chromeの場合SSL証明書なしの警告が発生しますが、そのまま継続して進んでください。
そうするとhelloworldのページが表示されます。

4. プロトコルをHTTPS⇒HTTPへ変更する

毎回Chromeからの警告が煩わしいので、HTTPプロトコルに変更します。

Properties/launchSettings.jsonのファイルを開き下記のように変更します。

変更前

{
  "iisSettings": {
    "windowsAuthentication": false, 
    "anonymousAuthentication": true, 
    "iisExpress": {
      "applicationUrl": "http://localhost:28391",
      "sslPort": 44308
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "helloweb": {
      "commandName": "Project",
      "launchBrowser": true,
      "applicationUrl": "https://localhost:5001;http://localhost:5000",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

変更後

{
  "iisSettings": {
    "windowsAuthentication": false, 
    "anonymousAuthentication": true, 
    "iisExpress": {
      "applicationUrl": "http://localhost:28391",
      "sslPort": 44308
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "helloweb": {
      "commandName": "Project",
      "launchBrowser": true,
      "applicationUrl": "http://localhost:5001",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

4. プロジェクト起動の流れ

  • アプリケーションエントリクラス
public class Program
{
    public static void Main(string[] args)
    {
        CreateWebHostBuilder(args).Build().Run();
    }

    public static IWebHostBuilder CreateWebHostBuilder(string[] args) =>
        WebHost.CreateDefaultBuilder(args)
            .UseStartup<Startup>();
}

アプリケーション起動する際にCreateWebHostBuilderによって、ASP.NET Coreホストのインスタンスが生成されます。

  • アプリケーション起動クラス
public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
    }

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.Run(async (context) =>
        {
            await context.Response.WriteAsync("Hello World!");
        });
    }
}
メソッド説明
ConfigureServices起動時にアプリケーションが依存するサービスを注入(追加)します
ConfigureHTTPリクエストパイプラインを構成します

備考

今回作成したソースコードです。

GitHubリポジトリ

では!!( `ー´)ノ