【参加レポ】ライブコーディング配信！.NET(C#) で爆速 web アプリ開発～クラウドにデプロイまで #LetsLearnDotNet
今回のレポートは仕事中に見たやつのレポートです。Microsoftの.NETチームの配信シリーズで日本から初での規格だそうです。マイクロソフトから井上さんとちょまどさんが二人で楽しく配信しましたが、すごく良かったので動画でもう一回見てレポートしたいと思います。
イベントページはこちら
動画はこちら
オープニング
スタートはマイクロソフトの品川オフィスにある特設配信スタジオから井上さん、ちょまどさんの明るいオープニングです。（オフィスで仕事中だったのでちょっと隠しました）今日はちょまどさんと井上さんの二人での進行でＴＶ番組みたいな楽しい雰囲気でイベントはスタートしました。今回は初学者向けの.NETとAzureの入門だそうです。
今日は本家MicrosoftのYoutubeチャンネルLet's Learn.NETの日本ローカライズ第一弾としての配信で今日は基礎からやることになります。
内容はAppServiceをつかってASP,NET CoreとBlazorのアプリケーションを作ります。
クラウド、Azureの基礎
最初は三択クイズ、さすがお二人ライブの盛り上げましっかりです。
スケール
垂直方向：メモリ増加などスペックをつよつよにする
水平方向：リソース（仮想マシン、コンテナ）を増やす
ユーザの扱う範囲
オンプレミス：すべてユーザーが管理する
IaaS：OSから上の階層をすべてユーザが管理
PaaS：アプリとデータのみユーザーが管理
SaaS：ユーザーは使うだけ
クラウドの強み
信頼性（Reliability）：障害から回復して機能し続ける能力
予測可能性：コストを予測できる
スケーラビリティ：拡張性
ASP.NET Core、Azure App Serviceの基礎
.NET（どっとねっと）とは
・マイクロソフトによるオープンソースなアプリ開発者向けのプラットフォーム（GitHubでMicrosoftと.NETコミュニティが管理）
・iOS/Androidアプリ、Webアプリ、ゲーム、デスクトップアプリが作れる
・言語はC#、F#、VisualBasicが使用できる
・つよつよIDE、VisualStudioを使用する
・現在のバージョンは.NET7、8はプレビュー版がでている
ASP.NET Coreとは
・Microsoftが作成したWebフレームワーク、
・.NETを使用してWebアプリを作れる
・サブフレームワークとしてBlazorなどがある
Azure App Serviceとは
・AzureのPaaSのひとつ
・Webアプリ、RestAPI、バックエンドサービスをデプロイ、ホストする。
・.NET、java、Node.js、PHP、Python、Go(Experimental)に対応
デモ（ASP.NET Core、Blazor、GitHub Copilot）
ここからデモに入ります。
Visual StudioでASP.NET Core Webアプリを作成する
今回は特別にBlazorを使ってみます
まずはリソースグループとAppServiceの名前を設定します。今回はコードで公開する設定です。リージョンやゾーン、価格プランなどいくつか設定してからデプロイの初期化をして環境を作成します。
（数分かかります）
価格プランではフリーやシェアードなど安価なものからプレミアムなものまで選べます。
次にデモではVisualStudioをインストールします
今は2022が最新バージョンです。自分で作るジャンルに合わせて必要な機能を選んでいきます。
次に新しくプロジェクトを作ります。目的に合わせたタイプを選んで名前をつけてプロジェクトを作ります。
VisualStudioのプロジェクトには
wwwroot：各種静的なコンテンツを置く場所です
C# Program.cs：メインのプログラムを置くところ
Pages：各ページの定義
Counter.razor：razor構文で書く形のページ
・必ず必要な部分は省略できるようになっている
razorページ
・基本はhtmlの記述
・@のところが「razor構文」、razor構文の中はC#ライクな構文
・標準のテンプレートでしたのはボタンで１ずつカウントするページ（本来ならjavaScriptで作るようなページ）
そのまんまローカル環境で実行してみます。
・従来だとjavaScriptで作るかサーバサイドにリクエストを投げる
・すべてブラウザー側で動作する（ネットのトラフィックは発生しない）
ここからコーディングに入ります
サンプルコードの文字列をちょっと変えて、ページに画像を入れます。すでにGitHub Copilotが先回りしてコードを提案したりとサポートしてくれています。すごいですね。
書きたいものがCopilotがガンガン生成してくれちゃいます。
日本時間からシアトル時間を求めるコードも質問すればコードを作ってくれます。人間はレビューをするだけでどんどん進みます。
Visual Studioを使用してWebアプリをAzureに発行する
次に出来たコードをAzureに発行します。発行先にAzureを選ぶとコンテナかAppServiceなどターゲットが選択できます。
今回はAppServiceにデプロイします。
プロファイルが自動的に取得されてデプロイの準備ができるので発行ボタンを押すだけでVisualStudio側でビルドされAppServiceにそのままデプロイされていきます。
参加者のチャットからデバッグされて最初のページは完成です。
デプロイされたものも動きました。
出来たものをPWAとしてインストールしてMac上のアプリケーションとして実行できるようにも出来ます。
ここで問題、
このアプリがだんだん人気が出て遅くなった場合どうするか？
AppServiceでは水平方向のスケールアウトができます。
Visual StudioでWebアプリを更新し、変更をAzureに発行する
ここからアプリを更新して新たにデプロイすることを考えます。
新しく上書きするとダウンタイムが発生するリスクがあるのでアプリを止めずに新しいアプリをデプロイする必要があります。（GreenBlueデプロイメント）
AppServiceではデプロイスロットというものがあり、新しいアプリを並行でデプロイしてテスト用として動かすような環境を簡単に作ることが出来ます。これのデモが行われました。
これでメインのアプリケーションに影響なくデプロイできます。
新しいアプリを確認してからスワップをして切り替えたり、トラフィックの割合を少しずつ上げながら切り替えることも出来ます。
デモのまとめ
・Brazorでアプリをデプロイした
・GitHub Copilotでコードの補完をした
・デプロイスロットを使って安全にデプロイ
・スロット周り、スケーリング周りの設定を紹介
・仮想ネットワークの中でもAppServiceは利用できる
・クラウドネイティブなアプリを簡単に作ることができる
オンプレ⇒なるべく止まらないアプリケーション
クラウド⇒とまることが前提、回復性が重要
今後もこんな感じの配信をしたいということでした。
来月はBuild 2023です。開発者の人集まりましょう。
この記事が気に入ったらサポートをしてみませんか？