WindowsコンテナDojoトレース③

現在IBM 大西彰さんがシリーズで「WindowsコンテナDojo」を開催してくれております。
この記事ではその内容を自身の Windows 環境にてトレースしていきます。

今回は、2022/5/12 に開催された [WindowsコンテナDojo：第3回 ASP.NET 入門、これまでの技術とCore Blazor](https://ibm-developer.connpass.com/event/245495/) のトレースです。
主旨 :「.NET Frameworkで長らく使われているWebアプリ開発技術として、ASP.NET があります。このセッションでは、前半ではこれまでの ASP.NET の使われ方を振り返り、それぞれの技術がWindowsコンテナでも活用できることを確認します。後半では、よりモダンなWebアプリのクライアント部分を C# で実装できる ASP.NET Core Blazor を使ってWebアプリ開発を行うための基礎を学びます。」
上記リンクにWebinar資料、Webinar動画、コンテナ化推進に関するIBMの取組みご紹介等のドキュメントも添付されています。ぜひご覧ください。

環境については以下を参照。
「仮想マシンの実⾏環境は、Hyper-V以外の環境(Oracle VM VirtualBox, VMware Workstationなど)を
すでにお持ちの場合は、そちらをお使いください。
準備編(前編に続き本編も同様)では、Windows PC上に全ての環境を整えることを想定しています。
Mac OS上にWindows 10/11、Windows Server 2019を揃えて環境を整えられますが、
ホストするデバイスの空きリソース (CPUコア、メモリ、SSDの空き状況)にご注意ください。」
また、WindowsコンテナのホストOSとして以下が対象となるようです。
・Windows Server 2016
・Windows Server 2019
・Windows Server 2022
・Windows 10
・Windows 11

ちなみに私は Windows10 (Intel Core i9-10900K を積んだ2年前の自作PC) を使って参加します。

### 前回の振り返り。アプリの継続的な改善と展開
前回のDojoの終盤、Visual Studio を使ったコンテナ開発のCI/CDの部分を再度説明( https://video.ibm.com/channel/24519548/video/Windows-docker-cicd )
つまり、以下のように継続的開発を実施できる。(前回の復習)
１．VSを使ってdockerビルドを実施してコンテナイメージを更新 @開発環境
２．VSから発行。つまり、docker push により公開 @開発環境
３．実行したい環境でイメージをダウンロード。つまり、docker pull @実行環境
４．アプリを実行。つまり、docker run @実行環境


### ０．話の流れ
1. 今日の話題(ASP.NET の歴史)
1. モダンブラウザへの対応
1. ASP.NET の話 ( Web Forms や MVC を経て Razor Server へ )
1. Razor Server について


### １．今日の話題(ASP.NET の歴史)
Windows 上での Container としてASP.NET の利用を考えるのですが、まずは、ASP.NET の歴史として以下の方々の功績を紹介。
・1990年代、Scott Guthrie 氏が classic ASP の課題を克服するため Common Language Runtime(CLR) 構想のもと ASP .Net の誕生に貢献
・Anders Hejlsberg 氏がその .NET Framework の枠組みの中でよく使われるC#の開発に貢献


### ２．モダンブラウザへの対応という課題
Webアプリを作っていく中で以下の気になることがあります。
・HTML5,CSS3,Java Script に対応していくことが必要。2022/6/16 に Internet Explore の通常サポート終了
・Windows11では Internet Explore を利用不可
・今や Microsoft Edge の中身は Google Chrome と同じエンジンであるため、Microsoft Edge と Google Chrome と差はないこと


### ３．ASP.NET の話
![220.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/51961c50-c8ba-981b-9109-91f1b47ddc2f.png)
MS社の[ASP.NET](https://dotnet.microsoft.com/ja-jp/apps/aspnet)参照
※記載しているオープンソースというのは、.NET Framework のことではなく、.NET core から始まる .NET5や.NET6 とよばれるオープンソースで展開されている .NET のこと。
MacOS, Windows, Linux でサポートされており、簡単にインストールして開発可能。


#### Visual Studio と ASP.NET
##### #1. ASP.NET Webアプリケーション(.NET Framework)テンプレートを使ってWebアプリケーションを作ってみる

[前回のDojo](https://qiita.com/trtrbohz/items/8dd636734f65f304ac9f)では web form アプリを作ったので、今回は MVC アプリを作ります。
※ASP.NET Web form アプリの作り方は上記の前回分を参照。
ASP.NET MVC の作り方を以下に説明
![190.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/9e2b8425-23f2-c09c-06b4-9f7f1be2fe74.png)
①「新しいプロジェクトの作成」で「ASP.NET Web アプリケーション(.NET Framework)」を選択
②「新しいプロジェクトを構成します」でプロジェクト名、ソリューション名を決定
③「新しいASP.NET Webアプリケーションを作成する」で「MVC」を選択

以下に示すように、Model－View-Controllers を持つソリューションが表示されます。
![200.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/469b7196-449c-b53a-0713-9c5b6cb24d25.png)

##### #2. Web Form と MVC の違い
- WebForms
 ・フォームとサーバーコントロールによるアプリ開発
 ・＊＊＊.aspxファイル内にコントロールを配置し、そのコントロールで起きたイベントを＊＊＊.csファイルに記述したC#で整理＆制御しています。
 ・.NETFramework ができて間もない頃、Windows Forms によりWindowsアプリを作ってきた人たちが Web の世界に参入してくる時に似通っているということで利用されてたという経緯があるようです。
- MVC
 ・＊＊＊.cshtml ファイルに動作を記述します。Razor構文によりC＃を使って画面をレンダリング。C＃のコードをHTMLに埋め込んでいきます。また、モバイルにも対応できるような作りになっているようです。以下にその特色を記載します。
 ・Model-View-Controller に分けて作っていけるためそれぞれで単体テストを実施可能。
 ・画面は伴わないが ASP.NET Web API によりリクエストに対してデータを返すAPIサーバ構築も可能
 ・デフォルトではXMLでデータを返すがJsonフォーマッターを使えばjsonで返すことも可。
      
  
### 3.Razor Server について
#### ASP.NET Core Blazor の資料参照
日本マイクロソフトの赤間さんの大作
https://download.microsoft.com/download/7/0/5/705c8f4d-293e-4baa-9cc2-8db3ac9cc5dd/ASP.NETBlazor_v0.30.pptx

#### Blazor プロジェクト
  HTML と C# を使って対話型クライアント Web UI を作っていきます。つまり、全てC#でロジックを実装し表示に関する部分をHTML＋CSSでレンダリングします。
  
  Blazor アプリ 2通りの動かし方
  １．Blazor Web Assembly WASM
　　  Web Assembly のバイナリをサーバからクライアントのブラウザの中にロードして、その中でC#のコードも合わせて動かす方法
  ２．Blazor Server
　　  サーバの中で画面を全て構築します。それをサーバとブラウザの間に構築したリアルタイム双方向通信経路([WebSocket](https://ja.wikipedia.org/wiki/WebSocket)というSignalRのテクノロジー)でデータを送受信する方法
　　  利点は、サーバの中で画面を構築するためデータベースと連携する際、Blazore WASMだと3階層(UIロジック - Web API - DBアクセス)要していたところをサーバとDBだけの2階層通信で済むというところ。そこで、この技術への期待は Windows Forms で作られたクライアント・サーバアプリ(そのままではコンテナ化できないけれど)を Razor Server を利用することにより、.NET Framework/C#/Visual Basic で作られたロジックの多くを救済できる可能性があるというところです。
      

#### 最後にBlazor Server アプリの作り方
![210.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/37e3663e-c885-91bd-cf4e-bcb8043eae71.png)
①「新しいプロジェクトの作成」で「Razor Server アプリ」を選択
②「新しいプロジェクトを構成します」でプロジェクト名、ソリューション名を決定
③「追加情報」で「HTTPS用の構成」を外し、「Docker を有効にする」を選択。
以下に示すように、Razor ソリューションが表示される。
![080.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/5a3748ac-e4b8-971c-fead-dde52c438923.png)

  
### Windowsコンテナ活用に向けた検討事項
Windows コンテナ上のアプリとしては ASP.NET Blazor が良さそうであること。
2階層のクラサバアプリであれば、ここで述べたCore Blazor を使ってモダンブラウザ対応できるのではないかと期待していること。


参照：Speaker Deck資料 [Windows コンテナ Dojo 第3回 ASP.NET入門、これまでの技術とCore Blazor](file:///D:/googleDrive/personal/%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88/Blog/Windowns%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8ADojo/03/WCPP-Dojo-03-ASPNET-20220526.pdf)