チュートリアル:Azure App Service で CORS を使用して RESTful API をホストする

Azure App Service は、非常にスケーラブルな、自己適用型の Web ホスティング サービスを提供します。 さらに、App Service には、RESTful API 用のクロスオリジン リソース共有 (CORS) の組み込みサポートがあります。 このチュートリアルでは、CORS サポートを使用して ASP.NET Core API アプリを App Service にデプロイする方法について説明します。 コマンドライン ツールを使用してアプリを構成し、Git を使用してアプリをデプロイします。

このチュートリアルでは、以下の内容を学習します。

  • Azure CLI を使用して App Service リソースを作成する
  • Git を使用して RESTful API を Azure にデプロイする
  • App Service の CORS サポートを有効にする

このチュートリアルの手順は、macOS、Linux、Windows で実行できます。

Azure サブスクリプションをお持ちでない場合は、開始する前に無料アカウントを作成してください。

前提条件

このチュートリアルを完了するには、以下が必要です。

ローカル ASP.NET Core アプリの作成

この手順では、ローカル ASP.NET Core プロジェクトを設定します。 App Service では、他の言語で記述された API についても同じワークフローがサポートされます。

サンプル アプリケーションの複製

ターミナル ウィンドウから、cd コマンドで作業ディレクトリに移動します。

次のコマンドを実行して、サンプル レポジトリを複製します。

git clone https://github.com/Azure-Samples/dotnet-core-api

このリポジトリには、「Swagger を使用する ASP.NET Core Web API のヘルプ ページ」というチュートリアルに基づいて作成されたアプリが含まれています。 ここでは、Swagger ジェネレーターを使用して Swagger UI と Swagger JSON エンドポイントが提供されます。

アプリケーションの実行

次のコマンドを実行して、必要なパッケージをインストールし、データベースの移行を実行し、アプリケーションを起動します。

cd dotnet-core-api
dotnet restore
dotnet run

ブラウザーで http://localhost:5000/swagger に移動して、Swagger UI を起動します。

ローカルで実行される ASP.NET Core API

http://localhost:5000/api/todo に移動して、ToDo JSON 項目の一覧を確認します。

http://localhost:5000 に移動して、ブラウザー アプリを起動します。 後で、ブラウザー アプリで App Service のリモート API を参照して、CORS 機能をテストします。 ブラウザー アプリのコードは、リポジトリの wwwroot ディレクトリにあります。

任意のタイミングで ASP.NET Core を停止するには、ターミナルで Ctrl+C キーを押します。

Azure Cloud Shell を使用する

Azure では、ブラウザーを介して使用できる対話型のシェル環境、Azure Cloud Shell がホストされています。 Cloud Shell で Bash または PowerShell を使用して、Azure サービスを操作できます。 ローカル環境に何もインストールしなくても、Cloud Shell にプレインストールされているコマンドを使用して、この記事のコードを実行できます。

Azure Cloud Shell を開始するには:

オプション 例とリンク
コード ブロックの右上隅にある [使ってみる] を選択します。 [使ってみる] を選択しても、コードは Cloud Shell に自動的にコピーされません。 Azure Cloud Shell の [使ってみる] の例
https://shell.azure.com に移動するか、 [Cloud Shell を起動する] ボタンを選択して、ブラウザーで Cloud Shell を開きます。 新しいウィンドウで Cloud Shell を起動する
Azure portal の右上にあるメニュー バーの [Cloud Shell] ボタンを選択します。 Azure Portal の [Cloud Shell] ボタン

Azure Cloud Shell でこの記事のコードを実行するには:

  1. Cloud Shell を開始します。

  2. [コピー] ボタンを選択して、コード ブロックをコードにコピーします。

  3. Windows と Linux では Ctrl+Shift+V キーを選択し、macOS では Cmd+Shift+V キーを選択して、コードを Cloud Shell セッションに貼り付けます。

  4. Enter キーを選択して、コードを実行します。

アプリを Azure にデプロイする

この手順では、SQL Database に接続された .NET Core アプリケーションを App Service にデプロイします。

ローカル Git デプロイを構成する

FTP およびローカルの Git では、"デプロイ ユーザー" を使用して Azure Web アプリにデプロイできます。 デプロイ ユーザーを構成すると、すべての Azure デプロイでこのユーザーを使用できます。 アカウントレベルのデプロイのユーザー名とパスワードは、Azure サブスクリプションの資格情報とは異なります。

デプロイ ユーザーを構成するには、Azure Cloud Shell で az webapp deployment user set コマンドを実行します。 <username> と <password> を、デプロイ ユーザーのユーザー名とパスワードで置き換えます。

  • ユーザー名は、Azure 内で一意である必要があります。ローカル Git プッシュの場合、"@" 記号を含めることはできません。
  • パスワードは長さが 8 文字以上で、文字、数字、記号のうち 2 つを含む必要があります。
az webapp deployment user set --user-name <username> --password <password>

JSON 出力には、パスワードが null として表示されます。 'Conflict'. Details: 409 エラーが発生した場合は、ユーザー名を変更します。 'Bad Request'. Details: 400 エラーが発生した場合は、より強力なパスワードを使用します。

Web アプリのデプロイに使用するユーザー名とパスワードを記録します。

リソース グループを作成する

リソース グループとは、Web アプリ、データベース、ストレージ アカウントなどの Azure リソースのデプロイと管理に使用する論理コンテナーです。 たとえば、後から簡単な手順で一度にリソース グループ全体を削除することもできます。

Cloud Shell で az group create コマンドを使用して、リソース グループを作成します。 次の例では、myResourceGroup という名前のリソース グループを "西ヨーロッパ" の場所に作成します。 Free レベルの App Service がサポートされているすべての場所を表示するには、az appservice list-locations --sku FREE コマンドを実行します。

az group create --name myResourceGroup --location "West Europe"

通常は、現在地付近の地域にリソース グループおよびリソースを作成します。

コマンドが完了すると、リソース グループのプロパティが JSON 出力に表示されます。

App Service プランを作成する

Cloud Shell で az appservice plan create コマンドを使用して、App Service プランを作成します。

次の例では、Free 価格レベルの myAppServicePlan という名前の App Service プランを作成します。

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku FREE

App Service プランが作成されると、Azure CLI によって、次の例のような情報が表示されます。

{ 
  "adminSiteName": null,
  "appServicePlanName": "myAppServicePlan",
  "geoRegion": "West Europe",
  "hostingEnvironmentProfile": null,
  "id": "/subscriptions/0000-0000/resourceGroups/myResourceGroup/providers/Microsoft.Web/serverfarms/myAppServicePlan",
  "kind": "app",
  "location": "West Europe",
  "maximumNumberOfWorkers": 1,
  "name": "myAppServicePlan",
  < JSON data removed for brevity. >
  "targetWorkerSizeId": 0,
  "type": "Microsoft.Web/serverfarms",
  "workerTierName": null
} 

Web アプリを作成する

myAppServicePlan App Service プランで Web アプリを作成します。

Cloud Shell で、az webapp create コマンドを使用することができます。 次の例では、<app-name> をグローバルに一意のアプリ名に置き換えてください (有効な文字は a-z0-9-)。

az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --deployment-local-git

Web アプリが作成されると、Azure CLI によって次の例のような出力が表示されます。

Local git is configured with url of 'https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git'
{
  "availabilityState": "Normal",
  "clientAffinityEnabled": true,
  "clientCertEnabled": false,
  "clientCertExclusionPaths": null,
  "cloningInfo": null,
  "containerSize": 0,
  "dailyMemoryTimeQuota": 0,
  "defaultHostName": "<app-name>.azurewebsites.net",
  "deploymentLocalGitUrl": "https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git",
  "enabled": true,
  < JSON data removed for brevity. >
}

注意

Git リモートの URL は deploymentLocalGitUrl プロパティに https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git 形式で出力されます。 この URL は後で必要になるので保存しておいてください。

Git から Azure へのプッシュ

ローカル ターミナル ウィンドウで、ローカル Git リポジトリに Azure リモートを追加します。 <deploymentLocalGitUrl-from-create-step> を、「Web アプリを作成する」で保存した Git リモートの URL で置き換えます。

git remote add azure <deploymentLocalGitUrl-from-create-step>

アプリをデプロイするために、次のコマンドで Azure リモートにプッシュします。 Git Credential Manager によって資格情報の入力を求めるメッセージが表示されたら、Azure portal へのサインインに使用する資格情報ではなく、「デプロイ ユーザーを構成する」で作成した資格情報を入力してください。

git push azure master

このコマンドの実行には、数分かかる場合があります。 実行中、次の例のような情報が表示されます。

Enumerating objects: 83, done.
Counting objects: 100% (83/83), done.
Delta compression using up to 8 threads
Compressing objects: 100% (78/78), done.
Writing objects: 100% (83/83), 22.15 KiB | 3.69 MiB/s, done.
Total 83 (delta 26), reused 0 (delta 0)
remote: Updating branch 'master'.
remote: Updating submodules.
remote: Preparing deployment for commit id '509236e13d'.
remote: Generating deployment script.
remote: Project file path: .\TodoApi.csproj
remote: Generating deployment script for ASP.NET MSBuild16 App
remote: Generated deployment script files
remote: Running deployment command...
remote: Handling ASP.NET Core Web Application deployment with MSBuild16.
remote: .
remote: .
remote: .
remote: Finished successfully.
remote: Running post deployment command(s)...
remote: Triggering recycle (preview mode disabled).
remote: Deployment successful.
To https://<app_name>.scm.azurewebsites.net/<app_name>.git
 * [new branch]      master -> master

Azure アプリを参照する

ブラウザーで http://<app_name>.azurewebsites.net/swagger に移動して、Swagger UI を起動します。

Azure App Service で実行される ASP.NET Core API

http://<app_name>.azurewebsites.net/swagger/v1/swagger.json に移動して、デプロイされた API の swagger.json を確認します。

http://<app_name>.azurewebsites.net/api/todo に移動して、デプロイされた API が機能していることを確認します。

CORS 機能の追加

次に、API について App Service の組み込み CORS サポートを有効にします。

サンプル アプリで CORS をテストする

ローカル リポジトリで、wwwroot/index.html を開きます。

行 51 で apiEndpoint 変数を、デプロイされた API の URL (http://<app_name>.azurewebsites.net) に設定します。 <appname> は、App Service のアプリ名で置き換えます。

ローカル ターミナル ウィンドウでサンプル アプリをもう一度実行します。

dotnet run

http://localhost:5000 でブラウザー アプリに移動します。 ブラウザーで開発者ツール ウィンドウを開き (Windows 用の Chrome では Ctrl+Shift+i)、 [Console](コンソール) タブを確認します。No 'Access-Control-Allow-Origin' header is present on the requested resource というエラー メッセージが表示されています。

ブラウザー クライアントでの CORS エラー

ブラウザー アプリ (http://localhost:5000) とリモート リソース (http://<app_name>.azurewebsites.net) の間でドメインが一致しておらず、App Service の API が Access-Control-Allow-Origin ヘッダーを送信していないため、ブラウザー アプリでのクロスドメイン コンテンツの読み込みが、ブラウザーによって妨げられています。

運用環境のブラウザー アプリでは localhost URL ではなくパブリック URL が使用されます。しかし、localhost URL に対して CORS を有効にする方法は、パブリック URL の場合と同じです。

CORS を有効にする

Cloud Shell で az webapp cors add コマンドを使用して、クライアントの URL に対して CORS を有効にします。 <app-name> プレースホルダーを置換します。

az webapp cors add --resource-group myResourceGroup --name <app-name> --allowed-origins 'http://localhost:5000'

properties.cors.allowedOrigins ("['URL1','URL2',...]") で 2 つ以上のクライアント URL を設定できます。 また、"['*']" を使用して、すべてのクライアント URL を有効にすることもできます。

注意

Cookie や認証トークンなどの資格情報をアプリで送信する必要がある場合、ブラウザーは、応答に ACCESS-CONTROL-ALLOW-CREDENTIALS ヘッダーを必要とします。 App Service でこれを有効にする場合は、CORS の構成で properties.cors.supportCredentialstrue に設定してください。allowedOrigins'*' が含まれているときに、これを有効にすることはできません。

CORS をもう一度テストする

http://localhost:5000 でブラウザー アプリを更新します。 [Console](コンソール) ウィンドウのエラー メッセージは消えており、デプロイされた API からのデータを確認して操作できます。 これで、ローカルで実行されているブラウザー アプリへの CORS がリモート API でサポートされました。

ブラウザー クライアントでの CORS の成功

おめでとうございます。CORS サポートを使用して Azure App Service の API が実行されています。

App Service CORS と独自の CORS

App Service CORS ではなく独自の CORS ユーティリティを使用して、柔軟性を高めることができます。 たとえば、異なるルートまたはメソッドに対して、別の許可されるオリジンを指定したい場合があります。 App Service CORS では、すべての API ルートとメソッドに 1 セットの許可されるオリジンを指定できます。そのため、独自の CORS コードを使用する必要があります。 ASP.NET Core でこれを実行する方法については、「Enabling Cross-Origin Requests (CORS) (クロスオリジン要求の有効化 (CORS))」を参照してください。

注意

App Service CORS と独自の CORS コードを一緒に使用しないでください。 一緒に使用すると、App Service CORS が優先され、独自の CORS コードは機能しません。

リソースをクリーンアップする

前の手順では、リソース グループ内に Azure リソースを作成しました。 これらのリソースが将来必要になると想定していない場合、Cloud Shell で次のコマンドを実行して、リソース グループを削除します。

az group delete --name myResourceGroup

このコマンドの実行には、少し時間がかかる場合があります。

次のステップ

ここで学習した内容は次のとおりです。

  • Azure CLI を使用して App Service リソースを作成する
  • Git を使用して RESTful API を Azure にデプロイする
  • App Service の CORS サポートを有効にする

次のチュートリアルに進み、ユーザーを認証および承認する方法を学習してください。