Azure API Apps and Azure Mvc Web App in Azure App Service

Azure API Apps and Azure Mvc Web App in Azure App Service

この記事では、Azure API AppsとAzure We Appに展開したMVCクライアントの作成方法を学びます。これはAzure App Servicesのさまざまなコンポーネントを接続する非常にシンプルなアプリケーションで、Azure API App、Azure Web App、SQL ServerをAzureで使います。

13min read

この記事では、Azure API AppsとAzure We Appに展開したMVCクライアントの作成方法を学びます。これはAzure App Servicesのさまざまなコンポーネントを接続する非常にシンプルなアプリケーションで、Azure API App、Azure Web App、SQL ServerをAzureで使います。

アプリケーションの高レベルアーキテクチャは、下の画像のように描くことができます。

アプリケーションの高レベルアーキテクチャは、下の画像のように描くことができます

基本的に、この投稿では以下の作業の実行方法を学びます。

  • Make a SQL Connection in SQL database in Azure
  • Entity Frameworkのデータベース優先アプローチを使ってCRUD操作をスキャフォールドします
  • Azure API App で操作を公開
  • Configure the swagger API and UI for metadata and API testing
  • Publish the Azure API App in Azure App Service
  • ASP.NET MVCアプリケーションでswaggerメタデータAPIを使ってクライアントサイドコードを作成します
  • MVCアプリケーションで生成されたクライアントコードを使い、AzureのSQLデータベース内のテーブルに対してCRUD操作を行います
  • Publish the ASP.NET MVC application in Azure Web App

この投稿を終えたら、Azure APIアプリとMVCベースのAzure Web AppがAzure Service上で稼働しているはずです。記事の出力として、Azure API Appがhttp://schoolapiapp.azurewebsites.net/swagger/ui/indexで実行されています。また、このURL上でMVCベースのAzure Web Appも動作しています: http://mvcclientazureapiapp.azurewebsites.net/

この例ではVisual Studio 2015を使っていますが、Visual Studio 2013も使えます。Azureのサブスクリプションも必要ですが、無料トライアルも利用できます。さあ、始めましょう!

Azure API App

まずはAzure APIアプリの作成から始めましょう。開発環境を設定するには、Azure SDKをインストールしてください。Visual Studio 2015用のAzure SDKはここから、Visual Studio 2013用のAzure SDKはこちらからダウンロードできます。 インストールに成功すると、下の画像に示されているように「成功裏にインストールされた」ダイアログボックスが表示されるはずです。

インストールに成功すると、画像に示されているように「正常にインストールされた」ダイアログボックスが表示されるはずです

これで開発環境は、最初のAzure APIアプリを作成する準備が整いました。では、新しいプロジェクトを作成しましょう。「New->Project->ASP.NET Web Application」を選択してください。ASP.NET Webアプリケーションに適切な名前を付け、テンプレートダイアログボックスから下の画像のようにAzure API Appを選択します。

ASP.NET ウェブアプリケーションを選び、テンプレートのダイアログボックスから画像に示されているようにAzure API Appを選択します

プロジェクトを作成できたら、以下の手順を行ってください:

  1. ControllerフォルダからValuesControllerを削除してください。このコントローラーは必要ない。
  2. モデルフォルダを右クリックして新しいアイテムを追加します。

新しいアイテムを追加するには、データタブからエンティティモデルを選択し、モデル名を付け ADO.NET してください。ここではSchoolModelとして残しています。

データタブからエンティティモデル ADO.NET を選択し、モデル名を付けます。ここではSchoolModelのままにします

このステップでは、エンティティデータモデルウィザードでデータベースオプションからEF Designerを選択し、下の画像に示すように「次へ」をクリックしてください:

エンティティデータモデルウィザードで、データベースオプションからEFデザイナーを選択し、画像に示された通り「次へ」をクリックします

ここで少し時間を取って、次のステップで何をするのかを理解しましょう。ここではAzureのSQLデータベース内の学校のデータベースに接続します。

ここではAzureのSQLデータベース内の学校のデータベースに接続します

AzureでSQLデータベースに接続するには、以下のタスクを実行する必要があります:

  • AzureポータルのデータベースサーバーにクライアントIPを追加します。ファイアウォールルール
  • Azureでデータベースサーバー名を提供します
  • SQL Server認証を使ってユーザー名とパスワードを入力してください
  • 必要なデータベースを選択し、「OK」をクリックします

Azureのデータベースに接続するための情報を提供するために、以下の画像を参照するとよいでしょう:

Azureのデータベースに接続するための情報を提供するために、以下の画像を参照するとよいでしょう

Azureデータベースサーバーに接続するためのユーザー名やパスワードなどの重要な情報を提供しているため、エンティティDataModel Wiazrdは接続文字列に機密データを含めるかどうかを尋ねます。ここで「はい」ラジオボタンを選び、「次へ」をクリックします。また、もし希望すれば接続ストリング名を変更したいかもしれませんが、この例ではデフォルトのままにします。

次に、扱うエンティティを選択する必要があります。シンプルにするために、学校のデータベースで最も単純なテーブル(ここで言う「シンプル」とは、他のテーブルと関係のないテーブルのことです)を選択します。そこで、この例ではDepartmentテーブルを選択します。下の画像のように、部門テーブルを選択するには部門のチェックボックスにチェックを入れ、他のフィールドはデフォルトのままにしてください。

下の画像に示すように、部門テーブルを選択するには部門のチェックボックスにチェックを入れ、他のフィールドはデフォルトのままにしてください

次に、データモデルを作成するには「Finish」をクリックするとモデルが追加されます。このモデルを用いてAzure APIを作成します。下の画像のように、Solution Explorerで作成されたSchoolModelを確認できます:

画像に示されているように、作成したSchoolModelをソリューションエクスプローラーで検証します

現在、モデルを追加しました。この段階でプロジェクトを成功裏に構築したことを確認してから、コントローラーを作成しましょう。Controllersフォルダを右クリックし、contextmenyからAdd->Controllerを選択します。 足場オプションで、下の画像に示すようにEntity Frameworkを使ってアクション付きのWeb API 2コントローラーを選択してください:

スキャフォールディングオプションで、画像に示すEntity Frameworkを使ってアクション付きのWeb API 2 Controllerを選択してください

足場を使ってコントローラーを追加するには、以下のオプションを選択する必要があります:

  1. モデルクラス:ドロップダウンから「学科」を選択します
  2. データコンテキストクラス:ドロップダウンからSchoolEntitiesを選択する
  3. 希望するコントローラー名を伝えるか、モデルクラスに基づく提案名を残すかのどちらかです。
足場を使ってコントローラーを追加してください。以下のオプションを選択する必要があります

追加をクリックすると、DepartmentsControllerがプロジェクトに追加されます。基本的に、私たちは部門テーブルでCRUD操作を行うためのウェブAPIを作成しました。次のステップでは、SwaggerのメタデータとUIを有効にする必要があります。

SwaggerメタデータとUIの有効化

Azure App ServiceはSwagger 2.0メタデータをサポートしています。これを使って、各APIはSwagger JSON形式でAPIのメタデータを返すEndPoint URLを定義できます。戻されたメタデータはクライアントコードの生成に利用できます。

作成したAPIのメタデータは、apiUrl/swagger/docs/v1を付け加えて操作できます。では、プロジェクトを進めてみて、下の画像に示すように「禁止」メッセージが表示されるはずです。

では、プロジェクトを実行しましょう。画像に示されているように「禁止」メッセージが表示されるはずです

 

APIのメタデータにアクセスするには、ここに示すように / swagger/docs/v1を baseurl に追加してください

APIのメタデータにアクセスするには、示す通りbaseurlに/swagger/docs/v1を追加します

こちらはJSON形式のAzure APIメタデータです。これはAPI用のSwagger 2.0 JSONメタデータです。これを使ってクライアントコードを作成できます。

Swagger UIを有効にするには、プロジェクトに戻り、App_StartフォルダからSwaggerConfig.csファイルを開いてください。 ファイル内で以下のコード行を見つけてコメントを解除してください:

Swagger UIを有効にするには、プロジェクトに戻り、App_StartフォルダからSwaggerConfig.csファイルを開きます。

再度、F5キーを押してAzure APIアプリを実行してください。URLに/swaggerを付けると、API上でSwagger UIが有効になっていることがわかります。

URLに/swaggerを付けると、API上でSwagger UIが有効になっていることがわかります

Swagger UIを使って、作成したAPIをテストできます。例えば、新しい部門を作ろうとしましょう。POSTオプションをクリックし、JSONに挿入する部署データを作成し、「試してみる」をクリックしてください。

POSTオプションをクリックし、JSONに挿入する部署データを作成します

APIからはレスポンスボディとレスポンスコードが返されます。リソースの作成が成功すると、ステータスコード201を返すはずです。

今のところ気づいたかもしれませんが、Azure APIアプリを作成し、SwaggerのメタデータとUIを有効にし、ローカルでテストするのはとても簡単です。では、それらをAzureで公開しましょう。

Deploy API  to Azure

これまでのところ、私たちがやったことはすべてローカルなものでした。今度は、Visual Studio 2015で導入したAzureツールを使って、ローカルのAzure APIアプリをAzureに移したいと考えています。始めるには、プロジェクトを右クリックして「公開」を選択してください。

スタートし、プロジェクトを右クリックして「公開」を選択します

「ウェブ公開」ダイアログボックスで「Microsoft Azure App Service」を選択し、「次へ」をクリックします。

「ウェブ公開」ダイアログボックスで「Microsoft Azure App Service」を選択し、「次へ」をクリックします

次のウィドウで「サブスクリプション」を選択し、「新」をクリックします。

次のウィドウで「サブスクリプション」を選択し、「新」をクリックします。

「App Serviceを作成」ウィンドウで、まず下の画像のようにAPIアプリ型に変更してください:

「Create App Service」ウィンドウで、まず画像に示されているようにAPIアプリ型に変更してください

次に以下の情報を伝えてください。

  1. Unique API name
  2. サブスクリプションを選択してください
  3. すでにApp Service Planを作成している場合は、それを選択できます。新しいものを作成するには「新設」をクリックしてください。

この例では、下の画像のように新しいApp Serviceプランを作成しています。この新たに作成された計画を使って申請書を公開します。

この例では、下の画像のように新しいApp Serviceプランを作成しています。この新たに作成された計画を使って申請書を公開します。

すべての情報を提供した後、ホスティングの選択肢は以下のようになります。

すべての情報を提供した後、ホスティングの選択肢は以下のようになります

現時点で、申請書の公開に必要なすべての情報を提供しています。展開を進めるには「作成」をクリックしてください。次の画面ですべての詳細を確認し、「次へ」をクリックして先に進みます。

次の画面ですべての詳細を確認し、「次へ」をクリックして先に進みます。

この画面で接続文字列の検証やデータベースの更新が可能です。シンプルにするために、すべての設定をデフォルトのままにして「次へ」をクリックしてください。

シンプルにするために、すべての設定をデフォルトにして「次へ」をクリックしてください

この画面でデプロイメントをプレビューし、「公開」をクリックしてAzure APIアプリをAzureサービスにデプロイします。

この画面でデプロイメントをプレビューし、「公開」をクリックしてAzure APIアプリをAzureサービスにデプロイします

公開ステータスはVisual Studioの出力ウィンドウで確認できます。成功した公開では、Azure ServiceでホストされているAzure APIアプリに誘導されます。下の画像のようにAzureサービスでAzure APIアプリを動かすはずです。

下の画像のようにAzureサービスでAzure APIアプリを動かすはずです。

Azure API AppをAzure Serviceに成功裏にデプロイしました!

Configuring metadata URL in portal 

メタデータURLを設定するには、ポータルにログインし、App Servicesセクションで新しく作成したAPIアプリが表示されます。

メタデータURLを設定するには、ポータルにログインし、App Servicesセクションで新しく作成したAPIアプリが表示されます。

APIアプリをクリックしてAPI定義を選択してください。

APIアプリをクリックしてAPI定義を選択してください。

API定義ではメタデータURLを変更できます。前述の通り、デフォルトでメタデータURLは...に設定されています。/swagger/docs/v1。

API定義ではメタデータURLを変更できます。前述の通り、デフォルトでメタデータURLは ../swagger/docs/v1。

下の画像のようにメタデータのURLを別のものに変更できます。URLを変更した後は、上部の保存ボタンをクリックして新しいURLを保存するのを忘れないでください。簡単にするために、メタデータURLをここに残しておきました。だから、あなたが.../swagger/docs/v1 では、クライアントサイドコードを作成するために必要なswaggerメタデータが得られます。メタデータは下の画像のようにブラウザ上で確認できます:

メタデータは画像のようにブラウザ上で確認できます

GET操作を実行し、URLにナビゲートすればブラウザ内の全部署を確認できます。/api/departments。部署は下の画像のようにブラウザ上でJSONとして返されます:

OUはGET操作を実行し、ブラウザ内のすべての部署をURLに移動することで閲覧できます。/api/departments。部署は画像に示されているようにブラウザ上でJSONとして返されます

また、この記事の前回のセクションで説明したように、swagger UIを使って他の操作もテストできます。

素晴らしいです。これまでにAzure APIを作成し、AzureのSQLデータベースと連携しています。また、Azure App Serviceにも成功裏に展開しました。

Creating MVC Client

この記事のこのセクションでは、.NETクライアントを作成します。では、ASP.NET MVCプロジェクトを作りましょう。

この記事のこのセクションでは、.NETクライアントを作成します。では、ASP.NET MVCプロジェクトを作りましょう。

テンプレート内でMVCを選択し、「認証変更」オプションから「認証なし」を選択します。

テンプレート内でMVCを選択し、「認証変更」オプションから「認証なし」を選択してください

プロジェクトの作成に成功したら、プロジェクトを右クリックし、コンテキストメニューから「Add >REST API Client」を選択します。

プロジェクトの作成に成功したら、プロジェクトを右クリックし、コンテキストメニューから「Add >REST API Client」を選択します。

REST API Clientオプションを選択すると、Microsoft AzureからAPIをダウンロードするか、既存のSwaggerメタデータファイルを選択するオプションが表示されます。オプションで、ここでクライアントの名前空間名を変更することも可能です。

REST API Clientオプションを選択すると、Microsoft AzureからAPIをダウンロードするか、既存のSwaggerメタデータファイルを選択するオプションが表示されます。

Microsoft Azure APIアプリからダウンロードするオプションを選択し、「ブラウズ」ボタンをクリックします。 App Serviceを選択するには、下の画像のようにサブスクリプションを選択し、Azure API Appを選択し、OKボタンをクリックしてください。

App Serviceを選択するには、下の画像のようにサブスクリプションを選択し、Azure API Appを選択し、OKボタンをクリックしてください。

さらに「OK」ボタンをクリックすると、メタデータがクライアントアプリにダウンロードされます。メタデータのダウンロードに成功すると、クライアント側のコードが生成されていることがわかります。下の画像のように、解エクスプローラーで確認できます:

画像のように解法エクスプローラーで確認できます

現在、Azure APIアプリからクライアントサイドのコードを作成しました。では、コントローラーを追加しましょう:Controllersフォルダを右クリックし、コンテキストメニューからAdd->Controllerを選択します。 テンプレートから「MVC 5 コントローラー」と読み書き操作を選択してください。

テンプレートから「読み書き操作付きのMVC 5コントローラー」を選択してください

Geneartedコードを使うと、Azure API上で操作が非常に簡単にできます。 生成されたコントローラーのインデックスアクションでは、SchoolApiAppのインスタンスを使ってすべての学科を取得することができます。すべての部門を把握するには、以下の一覧を参照してください。

private SchoolApiApp app = new SchoolApiApp();
public ActionResult Index() {
  return View(app.Departments.GetDepartments());
}

上記のコードから推測できるかもしれませんが、REST APIを扱うには数行のコードで済みます。.NETのクライアントサイドコードはAzure APIアプリのSwaggerメタデータを使って生成されていることを念頭に置いてください。

ビューを追加するには、インデックスアクションを右クリックして「ビューを追加」を選択してください。「View 追加」テンプレートで「リスト」を選択し、モデルクラスとして「部門」を選択します。

「View を追加」の後、「インデックス」アクションを右クリックして「View 追加」を選択してください。「Add View」テンプレートで「リスト」を選択し、モデルクラスとして「部門」を選択してください

記録作成も非常に簡単です。そのためには、以下のリストに示されているようにenityオブジェクトを渡してPostメソッドを呼び出しるだけで済みます。

public ActionResult Create([Bind(Include = "Administrator,Budget,Name,StartDate")] Department department) {
  try {
    // TODO: Add insert logic here
    if (ModelState.IsValid) {
      department.DepartmentID = 4569;
      app.Departments.PostDepartmentByDepartment(department);
    }
    return RedirectToAction("Index");
  } catch (Exception ex) {
    return View();
  }
}

生成されたコードには、リスト、投稿、置く、削除などのすべての操作が入っています。上記の例で使ったリストと投稿操作と同じように簡単に使えます。

最後のステップでは、MVCクライアントをAzure Web Appに公開します。公開はAPIアプリを公開したのと同じです。簡潔にするために、スクリーンショットは避け、手順だけを述べています。

Publish MVC Client to Azure Web App

  1. プロジェクトを右クリックして「公開」をクリックします
  2. Select Publish target as Microsoft Azure App Service
  3. 購読を選択して「新着」をクリックします
  4. ウェブアプリに名前を付け、地域を選択し、「作成」をクリックします
  5. 最後のステップで「公開」をクリックします

公開が成功すると、Visual Studioの出力ウィンドウにURLとともに「publish successed」というメッセージが表示されます。

SuccessedのPublishでは、Visual Studioの出力ウィンドウにURLとともに「publish succeeded」メッセージが表示されます

すごい！私たちはAzure Web AppへのASP.NET MVCアプリケーションを公開しましたが、Azure APIアプリを利用しています。

結論

この記事では、以下のタスクの実行方法を学びました。

  • Azure の SQL データベースで SQL 接続を作ってください
  • Entity Frameworkのデータベースファーストアプローチを用いてCRUD操作をスキャフォールドします
  • Expose the operations in Azure API App
  • Configure the swagger API and UI for metadata and API testing
  • Publish Azure API App in Azure App Service
  • ASP.NET MVCアプリケーションでswaggerメタデータAPIを使ってクライアントサイドコードを作成します
  • MVCアプリケーションで生成されたクライアントコードを使って、AzureのSQLデータベースのテーブルに対してCRUD操作を行います
  • Publish ASP.NET MVC application in Azure Web App

 

操作方法
デモを予約