Help us understand the problem. What is going on with this article?

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 SDK 2.1.801
IDE Visual Studio Code 1.37.1
Browser Google 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 Code UIの日本語化

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

1. プロジェクト作成

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

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

# フォルダ変更
cd projects

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

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

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

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

image1.jpg

.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 起動時にアプリケーションが依存するサービスを注入(追加)します
Configure HTTPリクエストパイプラインを構成します

備考

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

GitHubリポジトリ

では!!( `ー´)ノ

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした