日本語版 - MyShuttle.biz demo apps from Connect(); – ② ASP.NET 5 Web Apps and Services

皆様、こんにちは!ちょっと遅くなり申し訳ありません。このシリーズ、次は、②番目として、ASP.NET 5 Web Apps and Services について、ご紹介していきます。

表題のタイトルにある、Connect();イベント、昨年末のオンラインイベントなので覚えておられる方も多いかと思います。これに関連して、このブログエントリについて、何件かのお問い合わせを、日本のお客様やパートナー様から戴きました。お答えしているうちに、この内容には、ソースコードもありせっかくの良いリソースなので、日本語でも紹介しよう!と思いつきました。そこで、Microsoft 本社のアーキテクトである、Cesar de la Torre [MSFT]と連絡を取り、彼の許諾を得て、本ブログエントリーシリーズ(全5回)の翻訳を行うことになりました。まだ5個目の5.のエントリが書かれていませんが、Cesar によれば、追って更新されるそうです。またソースコードも随時更新の予定とのこと。ぜひお付き合いください!(徐々に公開していきますので、お待ちください(^^))

※ オリジナルのブログのURLはこちらです。

Cesar de la Torre – Software Architect at Microsoft Corp. Redmond, Seattle, U.S.

Original Blog URL: https://blogs.msdn.com/b/cesardelatorre/archive/2014/11/30/myshuttle-biz-demo-apps-from-connect-visual-studio-and-azure-event.aspx   (The original blog URL might be different depending on the post, of course)

image image

ASP.NET 5 and .NET Core 5 の概要については、こちらのブログエントリを見てください。

このブログエントリは、ASP.NET 5 Web アプリケーション開発についてのもので、MyShuttle.biz で実装された、異なるシナリオの中の2番目のポストとなります。ブログエントリのリストは下記の通りです: (追って順次日本語化していきます)

1. 日本語版 - MyShuttle.biz demo apps from Connect(); – ① Global Introduction

2. (本エントリ)日本語版 - MyShuttle.biz demo apps from Connect(); – ② ASP.NET 5 Web Apps and Services

3.日本語版 - MyShuttle.biz demo apps from Connect(); – ③ Cross-platform Mobile Development of native apps for iOS, Android and Windows with .NET and Xamarin

4.日本語版 - MyShuttle.biz demo apps from Connect(); – ④ Multi device development of hybrid apps for iOS, Android and Windows with Visual Studio Tools for Apache Cordova

5.日本語版 - MyShuttle.biz demo apps from Connect(); – ⑤ Backend integration with LOB services (Invoicing, Azure WebJob, Azure queues, O365 API and SalesForce API)

最初のエントリ(上記1.URL) で書いた通り、いくつかのアプリケーションとサービスを ASP.NET 5 (codename “Project K”) ベースで開発しました :

- ASP.NET 5 MVC サイト - “パブリックな” Web サイトで、タクシー会社と顧客会社間の最初のエンゲージメントを行います。

image

- ASP.NET 5 Web API および SignalR サービスは、モバイルアプリと、Web SPA(Single Page Application)のバックエンドとなります。

- SPA (Single Page Application) - “プライベートな” Web アプリケーションで、タクシー会社の管理者が、タクシー車両や、ドライバー、その他のアセットw管理するために使います。

image image

MyShuttle.biz ASP.NET 5 Web アプリケーションと Web API Services の設定

必要な環境

- Visual Studio 2015 Preview: ダウンロードはこちら

- Windows Azure Subscription: Azure トライアル版はこちら

Azure はオプションで、ASP.NET 5 Web アプリケーションのテストだけなら、なくても可能です。但し、Azure があった方が、ASP.NET 5 サービスの配置に役立ちます。特に、モバイルアプリをからこれらのサービスを利用する場合です(後述します)。

- MyShuttle.biz アプリケーション自体のダウンロードは こちら.

- 04_Demos_ASPNET5.sln という名前のソリューションファイルを開きます(拡張子を .sln に変更してください。MSDN の仕様で、サンプルソリューション内には、単一の .ZIP ファイル内に一つの.sln しか入れられないので、残りのソリューションは、.ZIP にアーカイブする前に rename したものです)。

- NuGet config: 当該 ASP.NET Web アプリケーションは、KRE BETA1 (Project K Runtime Environment Beta 1、すなわち ASP.NET 5 Beta 1) を使っているので、Visual Studio が正しい Nuget Feed を使用するように構成します : https://www.myget.org/F/aspnetrelease/api/v2

image

- Bing Maps config: 別途取得した Bing Maps key を、wwwroot>Scripts>Pages>config.js 内に代入します。

image

同じ Bing Maps key が必要となるのは、クライアントのモバイルアプリを設定するときでです。それをここで説明しておきますね。

Bing Maps key

同じ Bing Maps key が、MyShuttle ソリューションの、Xamarin、Cordova 及び Windows アプリケーションで必要となります。もし、Bing Maps key を一つも持っていない場合には、Microsoft のWeb サイトから取得する必要があります。こちらの手順に従い、Bing Maps Key を取得してください。

この Bing Maps API には、 map コントロールとサービスが含まれており、Bing Maps とアプリケーション内や Web サイト内で連携できます。インタラクティブマップや、静的な地図に加えて、この API が提供するのは、他の Geospatial Features(地理空間情報の取り扱い)、例えば、Geocoding(住所から緯度経度を検索)や、ルート案内、交通情報、そして 空間データソース等で、これを使ってデータを保存・検索することができます。このデータは、空間データコンポーネント、たとえば store locations などを持っています。

※ 必要な場合に随時参照してください: Getting a Bing Maps Key.

はじめてのASP.NET 5:ASP.NET 5 Hello World

この Web アプリケーションの解説に入る前に、スクラッチからの ASP.NET 5 の開発方法について、ご紹介していきます。そこでまずは、”hello-world” アプリケーションの作成を通じて、Visual Studio 2015 でどのようにASP.NET 5 アプリケーションを開発するのかを体験し、その後に、MyShuttle.biz Web アプリケーションを解説していきます。

新しい ASP.NET 5 アプリケーション開発は、すでにお馴染みとなった ONE ASP.NET ダイアログから始まります。ファイル -->新しいプロジェクト --> Visual C# –>Web-->ASP.NET Web アプリケーション、と選択していくと,この ONE ASP.NET テンプレートを使用できます :

image

この見た目からも、新しい ASP.NET 5 テンプレートがいかに One ASP.NET ダイアログ体験に統合されているかわかるでしょう。他の残りのテンプレートは、伝統的な、ASP.NET 4.6 ベースのテンプレートを元にしています。

image 
単一の ASP.NET 5 プロジェクトだけです。というのも、MVC, Web API そして SignalR は、一つのフレームワークに統合されたからです!
そこで、何も躊躇せずに、ASP.NET 5 Starter Web テンプレートを選び、開発を始めることができるのです。

Ctrl+F5 を押して実行してみると、 “外見上は”このアプリは典型的な ASPNET MVC の hello world アプリケーションです。

image image
しかしながら、このプロジェクトには、新しい ASP.NET 5 テクノロジーに基づき、多くの新しい特長が付加されています。これらの新しい特長についてみてみましょう。.

フロントエンド Web 開発者 (HTML5、JavaScript、及び CSS) 向けのニュースと VS 2015 による Bower、NPM、Grunt、そして Gulp などのツールレベルのサポート

新しい ASP.NET 5 プロジェクトが、従来の MVC プロジェクトと、まず最初に異なる点は、ソリューションとプロジェクトの構成です。

image

例えば、ソリューション内の全てのコードは、 “src” フォルダーに格納されています。

もし、Unit Test 用のコードがある場合 (あった方が良いですw!) 、2番目のルートレベルのフォルダができて、名前は “test”となります。

これらの設定は、“global.json” ファイルによって、管理されます :

image

image

また、Web プロジェクト内に、新しいフォルダ、“wwwroot”が作成されます。

image 
このフォルダは、静的なコードを含みます。例えば、JavaScript ファイルや、.CSS ファイルなどが該当します。自分のコンテンツディレクトリを編集することもできますし、 Grunt/Gulp も使えます(後程説明します)。 Grunt を使うと、自分のコンテンツをこの“静的フォルダ”にコピーすることができます。
image
しかしながら、Web 開発、特にフロントエンド Web 開発は、伝統的なバックエンド開発に比べて、大変複雑になりがちで、洗練されていることが多いです。多くのプロジェクトは、いくつかの JavaScript や CSS のファイルを FTP を使ってはアップロードしません。今は、フロントエンドのビルドプロセスがあり、これにより SASS と LESS の拡張や、CSS/JS ファイルの最小化、JSHint または JSLint の稼働、その他が可能になっています。これらのビルドタスクとプロセスは、Grunt のようなツールで統合されています。加えて、クライアント側のライブラリは、パッケージとして管理されます。これには、NPM とか BOWER のような管理システムを使います。

ここで重要な単語は何でしょう?それは、“自動化”です。より少ない工数で、しなければならないこと - 繰り返されるタスク、最小化、コンパイル、ユニットテスト、等-、が行えれば、より仕事は楽になります。

良いニュースでしょう? Visual Studio 2015 には、Grunt、Gulp、Bower、そして NPM に対する、ファーストクラスのサポートが、あります!

すなわち、NuGet に加えて、Visual Studio は現在、2つの追加のパッケージマネージャを持ちます:

1. Bower、またはクライアント側パッケージ群 : Bower は大変 NuGet に似ていますが、特定のクライアント側のパッケージ(JavaScript ライブラリ および CSS フレームワーク)に依存します。

2. NPM は、Node パッケージマネージャの一つで、Web 開発者ツールを管理するものです。NPM の依存家計はこんな感じです。

image

続いて、Bower.json を見てみましょう。これは、どのパッケージを使いたいかを決めるために必要なファイルです。

image

どのようにパッケージを決めるかにも、intellisense が有効です。

image

また、smart-tags があり、これを使ってパッケージのインストール、アンインストール、または更新、等を行えます。そのため、JSON エディタにはフルコントロール権限があります。

image

NPM ファイル (package.json) に関しては、似たような intellisense 有効という特長があります。

このように、Visual Studio 2015 と ASP.NET は自動的にパッケージの復元を可能にします。したがって、ソリューションを開いたときに、全ての Bower および NPM パッケージ群は、復元されますので、ソースコントロールシステムでそれらをチェックする必要はありません。

Task Runner Explorer in MyShuttle.biz ASP.NET 5 demo apps

04_Demos_ASPNET5.sln” という名前のソリューションを (拡張子を“.sln” にしてから)開いてください。

NuGet の依存関係が回復されるまで、しばらく待ちます。

MyShuttle.Web プロジェクトをスタートアッププロジェクトに変更します。

同じ手順を、以下のソリューションについて、行います。

image

ASP.NET 5 サーバー側に入っていく前に、その他のVisual Studio 2015 の新しいツールについて、掘り下げましょう。それは、Task Runner で、クライアント側における Grunt、Gulp 等がクライアント側のビルドプロセスタスクに使われるのと同じような関係です。

この Task Runners を、クライアント側コード用の MSBuild と比較することもできます。 LESS と SASS、または CoffeeScript もしくは TypeScript、バンドル化と最小化を他のクライアント側タスクと同じようにできます。

そこで、Visual Studio では、現在、TASK RUNNER EXPLORER が追加され、Grunt および Gulp 両方をサポートします。

これは自動的に全ての異なるタスクをリスト化します。それらのタスクは、各プロジェクト向けに定義されます (この場合、MyShuttle.biz プロジェクト群、Grunt 使用)。

Visual Studio 2015 で、View –> Windows—>Other Windows—>Task Runner Explorer とポイントすると、どのような設定をしたかを確認できます:

image

そして、各々のタスク(例えば“jshint”)をダブルクリックするだけで、 その場で結果が Visual Studio 内で確認でき、コマンドラインウィンドウで確認する必要はありません :

image

また、複数の異なる Grunt/Gulp タスクを、Visual Studio イベントで接続することができます。例えば、Visual Studio でコンパイルをした後に、それをセットすれば、どの Grunt タスクでも実行できます(下図のケースでは“jshint”)。ここでは、下図の通り Build event の後に設定しています。

image

そして、このソリューションをビルドすると (Ctrl+Shift+B) 、Grunt が起動され、Grunt build タスクを自動的に行っていることがわかります。

image

So this VS tooling makes it easy to use the most popular client side frameworks within having to leave Visual Studio!

ASP.NET 5: サーバー側!

それではここから、もっとも ASP.NET 5 が重要な箇所、サーバー側に行きましょう!

ASP.NET 5 は、 .NET Core 5 をベースにしています(コードネームは Project K)。特長は、より速い起動時間と、より低い必要メモリと高いサーバーdensityなので、低レベルのソケットも使え、ハイレベルの Web コンポーネントを使って開発でき、片方又は双方を享受できます。ASP.NET 5 は、サーバーやクラウドのワークロードに最適化されています。
ASP.NET 5 アプリケーションは Visual Studio で開発できるのに加えて、他のサードパーティー製のエディタ、またはクラウド上のエディタで開発できます。そして、 ASP.NET 5 は、オープンソースで、クロスプラットフォームで動作します。これこそ、皆が待ち望んだものでした!

ここから、新しいサーバー側のテクノロジーを、MyShuttle.biz のサーバー側 Web アプリケーションとサービスを使って説明していきます。これらは、モバイルアプリのバックエンドとなるものです。
ソリューション名を変更して、04_Demos_ASPNET5.sln としてから、Visual Studio 2015 で開いてみてください。

image

さて、ここで全ての Web アプリケーションのコードは、1つのプロジェクトに含まれているのがわかります (たとえば、MyShuttle.Web プロジェクト)、しかし、 複数のプロジェクトを持っていると、特定のコードエリアを明確な場所に格納できます。 これは 関心の分離 と呼ばれることで、レイヤー分けの原則(Martin Fowler 's Layering Principles)です。例えば、MyShuttle.Web プロジェクトはWeb サイトアプリに関する一切の関心を持っています。そして、フロントエンドの SPA(Single Page Application)は HTML5 と JavaScript にフォーカスしています。

他方で、全ての展開された Web API コントローラー群は、分離されたライブラリに格納され、MyShuttle.API とされています。全ての Web API コントローラー群を同じ MyShuttle.Web プロジェクトに、入れようと思えば入れておけるのにも拘らず、です。

そして、特定のライブラリで全てのインフラストラクチャーデータのパーシステンスのコードもあります(リポジトリ、等) 。これは Entity Framework 7 に関連するもので、そして付加的でシンプルなライブラリが entity data-model として提供され、これは POCO entity クラス群を基にしています。

先に進んで、もし開発中のアプリが多くのドメインロジックを持っていたとしたら、たぶんアプリをデザインするのに、さらにドメイン駆動デザインアプローチで行うことでしょう。 この場合には当てはまらず、MyShuttle.biz デモアプリケーションは、極めてシンプルでかつまさに データ駆動と CRUD 処理を志向したものです。

さて、“MyShuttle” MVC アプリケーション (パブリック Web サイト) を Ctrl+F5 を押して、実行しますと、初回は少しだけ起動時間が長いかもしれません。その理由は、SQL Server 2014 LocalDB database を“その場で” 作成し、いくつかのサンプルデータを挿入しているからです。こんな感じになります :

image image

このアプリケーションは、モダンな Web サイトで、レスポンシブな UI を持っています。したがって、ブラウザのサイズが変わった時にそのレイアウトがどう変わるかを確認できます。

生成されたデータベースを見てみましょう。Visual Studio からは、このように接続できます :

image

挿入されたデータは、Visual Studio 2015 上で確認することができます(もちろん、SQL Server Management Studio でもOK):

image

しかし、このデモアプリは、シンプルな Web サイトで MVC で作られています。ログインすると、またその中にプライベート Web アプリケーションがあります。そしてこれは、タクシー会社の管理者によって管理されています。このアプリは、SPA (Single Page Application) として構成され、大変大規模な JavaScriptAngular.js、そして利用する ASP.NET 5 Web API サービス(ローカルまたは Azure WebSites 上にデプロイ済み)から構成されています。

この SPA プライベート Web アプリケーションの認証方法は、極めてシンプルで ASP.NET Identity に基づきます。ログインのリンクから、下記のクレデンシャル情報を入力してみてください :

User: carrier

Password: P2ssw0rd0)

image

ここで気づくのは、全てのページがロードされたときに、異なるセクション間(Drivers ←→ Vehicles ←→ Rides)を移動しても、ラウンドリップが全くないことです。バックグラウンドで、JavaScript が動いてリモートの ASP.NET 5 Web API サービスを呼び出しています。

image
image image

NuGet packages, References and .NET Frameworks

ここで、.NET とサーバー側と Visual Studio に話題を移します。

この新しい ASP.NET 5 の世界では、全ての .NET フィーチャーは NuGet パッケージとしてリリースされます。

それがわかるのは、このアプリを異なるフレームワークから起動可能だからです。依存関係を .NET および .NET Core パッケージに持っているからです。

image 
プレーンな “ASP.NET 5” アプリケーションは、フルバージョンの .NET Framework 4.6 とレギュラー版の CLR 上で稼働します。 

”ASP.NET Core 5” runs on top of .NET Core 5.
ここで重要な強調しておきたい点は、 単体の ASP.NET 5 framework で .NET Framework 4.6 スタックのトップ上で動くものと、より小さくて新しい、そしてよりシンプルな .NET Core 5 で動くものがあるということです。
※ 前にも書きました通り、さらに詳細を知りたい場合には、以前にポストしたこちらのブログエントリをご参照ください : What is .NET Core 5 and ASP.NET 5 within .NET 2015 Preview

※ また、Publickey 新野さんにこのあたりを纏めて戴いたブログも大変有用ですので、こちらもぜひ併せてご参照ください!

オープンソース化され、MacOS XとLinuxに対応する「.NET Core」とは何か?

image

しかし、メニューオプションに移動して、依存関係を管理しようとすると、できることは自分の作ったプロジェクト群のソリューション内での依存関係の管理だけです。直接外部のアセンブリやDLLを参照することはできません!

image

これはなぜかというと、この新しい ASP.NET 5 “Unit of measure” for the external .NET dependencies は、NuGet パッケージをベースにしているからです。NuGet こそがメインストリームなのです!

したがって、”Nuget パッケージの管理” から外部依存関係は管理しなければなりません。

image

そして、新しい NuGet 管理画面は、このようになっています。様々なソートや検索、フィルタリングができます :

image

しかし、最もここで重要なことは、IDE からできるすべてのことは、ファイルエディタからもできるということです。同じことをファイルエディタを使って行うことができ、実際、当該 NuGet パッケージで依存しているものは、project.json ファイルに記述されています。

image

この ASP.NET 5 プロジェクトで、レギュラーの .NET Framework 4.6 の CLR 上または .NET Core 5 の Core CLR 上の指定できます。

image

ターゲットとするランタイムまたはフレームワークを変更することが可能です(.NET Framework 4.6 または .NET Core 5) 。これは、IDE を使って、ソリューション内の各プロジェクトのプロパティを開いて行います :

Running the MyShuttle.biz ASP.NET 5 web applications and Web API Services on .NET Core 5 and the Core CLR.

MyShuttle.biz Web アプリケーションと .NET Core 5 および Core CLR サービスは実行可能です。これは、MyShuttle.biz ASP.NET 5 アプリケーションとサービスを開発時には、.NET Core で使えないどんなライブラリも使わない、と分かっていたからです。したがって、Target KRE-CLR バージョンを下記のすべてのプロジェクトに変更すると (全てのプロジェクト/依存関係は当該フレームワークにしたがって同期する必要があります)、これを .NET Core 5 上で実行可能なはずです。

そこで、各々のプロジェクトのプロパティを選択して見ましょう。Application tab から行います :

image

- MyShuttle.Web project–> KRE-CoreCLR-x86.1.0.0-beta1

- MyShuttle.Model project–> KRE-CoreCLR-x86.1.0.0-beta1

- MyShuttle.Data project –> KRE-CoreCLR-x86.1.0.0-beta1

- MyShuttle.API project –> KRE-CoreCLR-x86.1.0.0-beta1

しかしながら、言っておきたいのは、この試みのゴールの一つは、NuGet パッケージを参照のプライマリユニットにすることでした。そこで、シナリオの一つが、この機能を使って NuGet パッケージに依存させ、そして、後にソースをクローンして自分のプロジェクトに導入することです。もちろん、プロジェクトには何の変更も加えずに、です。これができれば、画期的にデバッグのフリクションは減らせますし、ソースとして提供できるライブラリをフィックスすることもできます。

例えば、自分のマシンで、C:\Users\[user]\.kre\packages\KRE-CoreCLR-amd64.1.0.0-beta1 を見てみてください。ここには、.NET Core 5 ふれーむわーくがあり、単一の NuGet パッケージのようになっています!約 15MB のファイルに、全ての .NET Core 5 フレームワーク とランタイムが入っています!:

image

KRE-CoreCLR フレームワーク NuGet パッケージをブラウズするには、NuGet package explorer を使います。mscorlib.dll または 異なる “k” ライブラリ群が見えます :

image

しかしながら、これは NuGet パッケージとそのライブラリに関してだけではありません。2番目のもっとも重要な互換性に関するニュースは、 当該フレームワークがアプリケーションの一部をスキップすることができ、また、それ故に、真のサイドバイサイドの実行を行うことができる、ということです。ちょうど、2つの異なるバージョンの CLR 上で動くアプリケーションが、同じサーバーの上で SxS を実行でき、それは総合に干渉しないというような形です。

これにより、ゼロデイのセキュリティバグでマイクロソフトがパッチを出しているものでは、同じコードを開発環境と製品環境で実行し、開発者がオプトインで新しいバージョンを組み込むことができ、異なるアプリケーション間での大きな変更が許容されることになります。

Unified MVC/Web API controllers and out-of-the-box Dependency Injection

少し掘り下げて、ASP.NET5で書くことができる新しいコードについて、解説していきます。

これは、C# のコードで、この Web アプリの HomeController です。

image

この ASP.NET Controllers を統合しました。これは、MVC で使われようが Web API で使われようが同じクラスタイプなのです。さらに言えば、これらのコントローラーは、慣例により、POCO (Plain Old CLR Object) コントローラーになり得ます。そこで、見て戴いてわかる通り、これは何もベースクラスは持っていません。これがコントローラーベースクラスから派生するものだとしてもです。

どれかの Web API コントローラーを開いてみましょう。MyShuttle.API にあるものです(これらはもちろんWeb プロジェクトと同じフォルダに配置することもできます。この点は前述した通りです)。この場合、コントローラーのベースクラスの利用を強制されますが、それは統合されたベースクラスで、MVC コントローラーにも、Web API コントローラーにも使えます。

これらのコントローラーの内部では、SQL Server データベースまたは Azure SQL データベースにアクセスするコードを実装しています。これはリポジトリクラスである LINQ to Entities と Entity Framework インフラストラクチャーコードを使用しています。例えば、 _vehicleRepository.GetAsync() メソッドがその例です。

image

最後に、このコントローラー群がどのように統合されているかは、Startup.Routes.cs ファイルを Web プロジェクトの中から開けばわかります。ここには、ルートの定義がされており、それは通常の MVC コントローラーか、または、Web API コントローラーかに関わらず、現在はシンプルに同じ種類の“コントローラー”として異なるMap Route とともに書かれているのがわかります。

image

Dependency Injection(依存性の注入)については、 現在は、out-of-the-box Dependency Injection in ASPNET 5 が利用されています。このケースでは、使われているのは、Constructor based DI であり、これを使ってリポジトリを注入し、property based DI を使って IUrlHelper と ViewDataDictionary を注入します。内部的には、ASP.NET は basic IoC コンテナをフィーチャーしますが、自分の好みの IoC コンテナを使えば良いことになります。例えば、AutoFacNinject などがあります。

この Dependency Injection Registration code は、MyShuttle.biz ASP.NET プロジェクトの中の、Startup.Dependencies.cs にあります。

image

これを見ると、例えばアプリケーションコードが(コントラクタまたはプロパティの中で)ICarrierRepository およびその他のタイプのオブジェクトを呼び出した時はいつでも、IoC コンテナは、CarrierRepository およびその他のタイプ/クラスのオブジェクトを生成するだろうということがわかります。

そして、この “タイプの登録” タスクメソッドである、ConfigureDependencies() は、グローバルの Startup.cs から呼び出されます。

image

しかし、この新しい世界において、DI に関して最も重要なことは、ASPNET 5 はネイティブに Dependency Injection を使ってビルドして実行し、それが全てのスタックにわたっており、それ故に簡単に異なるランタイムに変更することができること (CLR から Core CLR、またはその逆) 、またASP.NET を異なる OS (Windows, Mac, Linux) 上で極めて明白に動かせることです。

“Edit C# code, sabe .cs file and refresh the browser”: No explicit compilation!

更にここで紹介したいのは、より速い開発体験を、伝統的な開発体験に比べより低いフリクションしかないコンパイル時間で行えるということです。このアプローチが同時に許容するのは、シンプルなエディタでの開発体験に近いものであり、それはアプリケーションが実行されるときに暗黙のコンパイルが走るということです。

プロジェクトフォルダに行って、bin\Debug フォルダを見ると、何も明示のコンパイルされたアセンブリがないことがわかります。例えば、プロジェクトメニューを右クリックして、“エクスプローラーでフォルダを開く” を選ぶと、プロジェクトフォルダの実体が開けます。そこから bin\Debug に移動します。

image

空っぽです。コンパイルされた DLL などはありません。

しかし、デバッグなしで Ctrl+F5 でアプリケーションをじっこうすると、MVC アプリケーションがブラウザ上でうごきます。チェックするまでこのブラウザは落とさないでください :

image

HomeController に戻り、C# のコードの中で、“The Ultimate B2B Shuttle Service Solution” と書いてある文字列を適当な文字列に変更します。たとえば、“Cool C# change with no explicit compilation! ”とかでも良いでしょう。

image

image

そして、ブラウザでリロードしてみてください。

なぜ数秒でロードされるのか、といえば、このプログラムは .NET Compiler Platform (“Roslyn”) で、“server side”でコンパイルされるからです。しかし、この場合コンパイルするに値すると考慮されるのは、C#コードの変更のみで、単なる文字列の変更は考慮されません :

image

もう一度、\bin\obj フォルダをもう一度見てみても、やはり何もなく空っぽのままです!

image

もちろん、 DLLs の比較をして、適切な当該バイナリ―をサーバーに送ることもできます :

image

そこでリコンパイルすると、当該アプリケーションのためのNuGet パッケージが出来上がります :

image

そして、特定のアセンブリでフレームワーク/ランタイムに依存しているもの (.NET 4.6 または .NET Core 5)も出来上がります :

image

しかし、“明示でない=黙示のコンパイル”の特長は、アジャイル開発環境を志向していて、そこでは C# コードをどんなエディターでも編集することができるのです (Visual Studio, Sublime 3 Text, Emacs, Notepad, 等)。これは、オンラインブラウザベースのエディタ、例えば Monaco または他のエディタでも、それがどんな OS 上で動いていたとしても(Windows でも Mac でも Linux でも)可能です。C# コードを編集できます!

How to deploy MyShuttle.biz ASP.NET 5 Web/Services to an Azure Web Site

最後のステップとして、特にここでは, Web API サービスを MyShuttle.org モバイルアプリのバックエンドとして再利用したい場合、この Web アプリケーション/API を、Azure Web Sites にデプロイすることです。

プロジェクトを右クリックして、“発行(Publish) ” を選択します :

image

Azure Subscription のクレデンシャルを入力して認証した後、ウィザードが立ち上がり、“New” ボタンを押して、新しい Website を作成することができます :

image

このWebsite の名前を、ここでは myshuttlebiz.azurewebsites.net としています。(※名前は適宜変更してくださいね!)

Azure SQL データベースをここで作成するか、データベースをデータベースサーバーから、Azure Management Portal 作成するかは、どちらでもOKです。

ここでは、明確に Azure データベースを Azure Management Portal でサーバーから作成するのがお薦めで、それにより、より意味のある名前をサーバーにつけることができるからです。例えば、 “hdkjmgwm1i” 等に比べて :)。しかし、もっとステップを減らすため、ここでは、Visual Studio からダイレクトに作成することにします。

重要な事は、Azure SQL データベースサーバーの名前、ユーザー名、パスワードを、知っておく必要があることです。

image

“Create” ボタンを押して、プロファイルの変更を承諾したら、下記のようなダイアログが出てきます。これは単純に Azure web site に接続できるように順番に情報を入れるだけです。

image

“Next” をクリックすると下記のようなダイアログが出ます :

image

このダイアログボックスで、どの.NET framework を使いたいのか、.NET Framework 4.6 (KRE-CLR-xxxxxx) なのか .NET Core 5 (KRE-CoreCLR-xxxxxxx)を決定します。

この場合、デフォルトオプションなので、KRE-CLR-x86.1.0.0.-beta1 が選択されるということになります。

************************************************************************************************

IMPORTANT!!!

CONNECTION STRING CONFIGURATION IN “PROJECT K” and AZURE WEB SITE APP SETTINGS

ここで、“Publish” はクリックしないでください! (もししてしまうと、Azure 内の接続文字列の設定をしてアプリケーションのリロードをしなければなりません)

************************************************************************************************

この ASP.NET 5 Web アプリケーションを Azure にデプロイする前に、ASP.NET 5 サイトが使う予定の connection string を更新しなければなりません。

このコンフィグレーションは、ASP.NET 5 (Project K) で、これは ASP.NET 5 より以前の伝統的な ASP.NET と Entity Framework とは異なります。 

そこで、ASP.NET 5 (codename Project K) では、コンフィグレーションは、Environment Variables に基づいていますので、それは Windows Server にデプロイする場合も、Microsoft Azure にデプロイする場合も、同じように動きます。これは大変素晴らしいニュースで、部分的には、オンプレミスとクラウドの場合にも同様なのです。それでは、どう変えればいいのでしょか?

この場合の、Connection String で、開発環境で SQL Server LocalDB に繋がっているものは、config.json ファイルに書かれています。ちょっと見てみてください:image

このConnection String は、当然ながら Local SQL Server の localDB をポイントしてますので、このままでは、Azure 上にデプロイした場合には、動きません。

しかし、このファイルを変更する必要はないのです。一番良いスマートなやり方は、Azure Web Site の Configuration を、Azure Management Portal 上で更新することです。そうすれば、このプロパティセッティング(config.json)をオーバーライドしてくれます。

そこで、発行を行う前に、Azure Management Portal で Web Site 設定の画面に、移動します。そして、Web Site SETTINGS—>Application Settings で設定できます(古いポータルでも新しいポータルでもOKです)。 ここでは、新しい Azure portal を利用しています :

image

その中の、Application Settings を、App settings セクションから検索します :

image

ここで、新しいキーバリューのペアを入力する必要があります。基本的には下記の通りです :

KEY: EntityFramework:MyShuttleContext:ConnectionStringKey

VALUE: data source=YOUR_SERVER_NAME.database.windows.net;initial catalog=YOUR_DATABASE_NAME;persist security info=True;user id=YOUR_USER_NAME@YOUR_SERVER_NAME;password=YOUR_PASSWORD;MultipleActiveResultSets=True

Where:

YOUR_SERVER_NAME == Your Azure SQL DB Server name

YOUR_DATABASE_NAME == Your Azure SQL DB database name

YOUR_USER_NAME == The user name you chose when creating the Azure SQL DB database

YOUR_PASSWORD == The password you chose when creating the Azure SQL DB database

そして、このような形になるはずです :

image

(オプション / チェック): もし、Azure SQL データベースに正しく接続できているか確かめたい場合には、 SQL Server Management Studio を使うとよいでしょう。

しかし、Azure の外からツール (SQL Server Management Studio または Visual Studio)で接続する前に、下記のルールを設定しておく必要があります。例えばこんな感じです :

image

単一の IP でも全ての IP でもOKです。この場合、全ての IP について設定しています。

これをやっておけば、自分のマシンの SQL Server Management Studio から、Azure SQL データベースに接続して、サーバーやデータベースの状態を見ることができます。

image

下記は、Visual Studio Server Explorer から接続する場合です。この場合、最初のクラウド上の実行の回までは、まだデータベースにデータが入っていませんので、その点に注意してください。

image image

いちど Connection String が Azure 上の Web Site app settings で決まれば、“Next” をクリックして、Visual Studio からこの Website を”Publish”してください。Visual Studio は、ソリューションをコンパイルして、Azure へのデプロイを開始します :

You can Check how it advances with the “Web Publish Activity” window in VS:

image

終了するとこんな感じです :

image

そして、クラウド上から実行した MyShuttle.biz サイトが立ち上がりました。Microsoft Azure Web Site 上で実行されています!

image

もちろん、このサイトは、たんなる MVC サイトではなく、全ての Web API サービスと Single Page Application を、ログイン後にテストすることできます。

次は、MyShuttle.biz モバイルアプリ(Universal Windows Apps for WPWindows ストアアプリ、そして Xamarin Apps for iOS、および Android) の概要とテストに移ることができそうです。これら全てのアプリは、どういうつの(今回構築した)ASP.NET 5 Web API サービスを利用します。

これで、ASP.NET 5 (codename Project K) と、MyShuttle.biz Web アプリケーションとサービスの説明は終わりです。

ダウンロードはこちらから!

Download page from MSDN Samples

鈴木 章太郎