Aracılığıyla paylaş

Öğretici: Azure App Service’te CORS ile RESTful API barındırma

Azure Uygulaması Hizmeti, yüksek oranda ölçeklenebilir bir kendi kendine düzeltme eki uygulamalı web barındırma hizmeti sağlar. Ayrıca App Service, RESTful API'leri için çıkış noktaları arası kaynak paylaşımı (CORS) için yerleşik desteğe sahiptir. Bu öğreticide CORS desteğiyle ASP.NET Core API uygulamasının App Service'e nasıl dağıtılacağı gösterilir. Uygulamayı komut satırı araçlarını kullanarak yapılandırabilir ve Git kullanarak dağıtabilirsiniz.

Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

  • Azure CLI kullanarak App Service kaynakları oluşturun.
  • Git kullanarak Azure'a RESTful API'sini dağıtma.
  • App Service CORS desteğini etkinleştirin.

Bu öğreticiyi macOS, Linux veya Windows'da tamamlayabilirsiniz.

Azure hesabınız yoksa, başlamadan önce ücretsiz hesap oluşturun.

Önkoşullar

Yerel ASP.NET Core uygulaması oluşturma

Bu adımda, yerel ASP.NET Core projesini ayarlarsınız. App Service API'ler için diğer dillerde yazılmış aynı iş akışını destekler.

Örnek uygulamayı kopyalama

  1. Terminal penceresinde, bir çalışma dizinine gitmek için kullanın cd .

  2. Örnek depoyu kopyalayın ve ardından depo köküne gidin.

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

    Bu depo, Swagger / OpenAPI ile ASP.NET Core web API belgeleri öğreticisine dayanan bir uygulama içerir. Swagger kullanıcı arabirimine ve Swagger JSON uç notasına hizmet vermek için bir Swagger oluşturucusu kullanır.

  3. Varsayılan dalın olduğundan mainemin olun.

    git branch -m main

    İpucu

    Dal adı değişikliği App Service tarafından gerekli değildir. Ancak, birçok depo varsayılan dalını main olarak değiştirdiğinden (bkz. Dağıtım dalını değiştirme), bu öğreticiden mainbir deponun nasıl dağıtılacağı gösterilir.

Uygulamayı çalıştırma

  1. Gerekli paketleri yüklemek, veritabanı geçişlerini çalıştırmak ve uygulamayı başlatmak için aşağıdaki komutları çalıştırın.

    dotnet restore
dotnet run

  2. Sadece Swagger UI'yi denemek için tarayıcıda http://localhost:5000/swagger adresine gidin.

    Yerel olarak çalışan ASP.NET Core API'sinin ekran görüntüsü.

  3. http://localhost:5000/api/todo ToDo JSON öğelerinin listesini görmek için adresine gidin.

  4. Tarayıcı uygulamasına http://localhost:5000 gidin ve bu uygulamayla denemeler yapın. Daha sonra, CORS işlevselliğini test etmek için tarayıcı uygulamasını App Service'te uzak bir API'ye işaret edersiniz. Tarayıcı uygulamasının kodu deponun wwwroot dizininde bulunabilir.

  5. ASP.NET Core'u istediğiniz zaman durdurmak için terminalde Ctrl+C tuşlarına basın.

Azure Cloud Shell

Azure, tarayıcınız aracılığıyla kullanabileceğiniz etkileşimli bir kabuk ortamı olan Azure Cloud Shell'i barındırıyor. Azure hizmetleriyle çalışmak için Cloud Shell ile Bash veya PowerShell kullanabilirsiniz. Yerel ortamınıza herhangi bir şey yüklemek zorunda kalmadan bu makaledeki kodu çalıştırmak için Cloud Shell önceden yüklenmiş komutlarını kullanabilirsiniz.

Azure Cloud Shell'i başlatmak için:

Seçenek Örnek/Bağlantı
Kodun veya komut bloğunun sağ üst köşesindeki Deneyin'i seçin. Deneyin seçildiğinde kod veya komut otomatik olarak Cloud Shell'e kopyalanmaz. Azure Cloud Shell için Deneyin örneğini gösteren ekran görüntüsü.
https://shell.azure.comadresine gidin veya Cloud Shell'i tarayıcınızda açmak için Cloud Shell'i Başlat düğmesini seçin. Azure Cloud Shell'i başlatma düğmesi.
Azure portalının sağ üst kısmındaki menü çubuğunda Cloud Shell düğmesini seçin. Azure portalında Cloud Shell düğmesini gösteren ekran görüntüsü

Azure Cloud Shell'i kullanmak için:

  1. Cloud Shell'i başlatın.

  2. Kodu veya komutu kopyalamak için kod bloğundaki (veya komut bloğundaki) Kopyala düğmesini seçin.

  3. Windows ve Linux'ta Ctrlveya macOS üzerinde Cmd+ seçerek kodu veya komutu Cloud Shell oturumuna yapıştırın.

  4. Kodu veya komutu çalıştırmak için Enter'ı seçin.

Uygulamayı Azure’da dağıtma

Bu adımda,.NET Core uygulamanızı App Service'e dağıtacaksınız.

Yerel Git dağıtımını yapılandırma

FTP ve yerel Git, dağıtım kullanıcısını kullanarak azure web uygulamasına dağıtabilir. Dağıtım kullanıcınızı yapılandırdıktan sonra, bunu tüm Azure dağıtımlarınız için kullanabilirsiniz. Hesap düzeyinde dağıtım kullanıcı adınız ve parolanız Azure aboneliği kimlik bilgilerinizden farklıdır.

Dağıtım kullanıcısını yapılandırmak için Azure Cloud Shell'de az webapp deployment user set komutunu çalıştırın. Kullanıcı adını< ve >parolayı< dağıtım kullanıcı adı ve parolasıyla değiştirin>.

  • Kullanıcı adı Azure içinde benzersiz olmalı ve yerel Git gönderimleri için '@' simgesini içermemelidir.
  • Parola en az sekiz karakter uzunluğunda olmalı ve şu üç öğeden ikisi olmalıdır: harfler, sayılar ve simgeler.
az webapp deployment user set --user-name <username> --password <password>

JSON çıktısı parolayı olarak nullgösterir. 'Conflict'. Details: 409 hatası alırsanız kullanıcı adını değiştirin. 'Bad Request'. Details: 400 hatası alırsanız daha güçlü bir parola kullanın.

Web uygulamalarınızı dağıtmak için kullanmak üzere kullanıcı adınızı ve parolanızı kaydedin.

Kaynak grubu oluşturma

Kaynak grubu, web uygulamaları, veritabanları ve depolama hesapları gibi Azure kaynaklarının dağıtıldığı ve yönetildiği mantıksal bir kapsayıcıdır. Örneğin, daha sonra tek bir basit adımda kaynak grubun tamamını silmeyi seçebilirsiniz.

Cloud Shell içinde az group create komutuyla bir kaynak grubu oluşturun. Aşağıdaki örnek Batı Avrupa konumunda myResourceGroup adlı bir kaynak grubu oluşturur. Ücretsiz katmanda App Service için desteklenen tüm konumları görüntülemek için az appservice list-locations --sku FREE komutunu çalıştırın.

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

Genellikle kaynak grubunuzu ve kaynakları kendinize yakın bir bölgede oluşturursunuz.

Komut tamamlandığında, bir JSON çıkışı size kaynak grubu özelliklerini gösterir.

App Service planı oluşturma

Cloud Shell’de, az appservice plan create komutuyla bir App Service planı oluşturun.

Aşağıdaki örnekte, myAppServicePlan fiyatlandırma katmanı kullanılarak adlı bir App Service planı oluşturulmaktadır:

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

App Service planı oluşturulduğunda Azure CLI, aşağıdaki örneğe benzer bilgiler gösterir:

{ 
  "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 uygulaması oluşturma

App Service planında bir myAppServicePlan oluşturun.

Cloud Shell'de, az webapp create komutunu kullanabilirsiniz. Aşağıdaki örnekte <app-name> öğesini, global olarak benzersiz bir uygulama adıyla değiştirin. (Geçerli karakterler a-z, 0-9ve -.)

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

Web uygulaması oluşturma işlemi tamamlandığında, Azure CLI aşağıdaki örneğe benzer bir çıktı gösterir:

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. >
}

Not

Git uzak URL’si deploymentLocalGitUrl özelliği içinde https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git biçiminde gösterilir. Daha sonra ihtiyacınız olduğundan bu URL'yi kaydedin.

Git üzerinden Azure'a gönderme

  1. tr-TR: main dalını dağıttığınızdan, App Service uygulamanız için varsayılan dağıtım dalını main olarak ayarlamanız gerekir. (Bkz. Dağıtım dalını değiştirme.) Cloud Shell'de DEPLOYMENT_BRANCH komutunu kullanarak az webapp config appsettings set uygulama ayarını belirleyin.

    az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings DEPLOYMENT_BRANCH='main'

  2. Yerel terminal penceresine dönüp yerel Git deponuza bir Azure uzak deposu ekleyin. deploymentLocalGitUrl-from-create-step değerini, Web uygulaması<ile değiştirin>.

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

  3. Aşağıdaki komutla uygulamanızı dağıtmak için Azure uzak deposuna gönderin. Git Kimlik Bilgileri Yöneticisi sizden kimlik bilgilerini istediğinizde, Azure portalında oturum açmak için kullandığınız kimlik bilgilerini değil Yerel git dağıtımını yapılandırma bölümünde oluşturduğunuz kimlik bilgilerini girdiğinizden emin olun.

    git push azure main

    Bu komutun çalıştırılması birkaç dakika sürebilir. Çalıştırıldığında, aşağıdaki örneğe benzer bilgiler görüntüler:

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://&lt;app_name&gt;.scm.azurewebsites.net/&lt;app_name&gt;.git
* [new branch]      master -> master

Azure uygulamasına göz atın

  1. Tarayıcıda adresine http://<app_name>.azurewebsites.net/swagger gidin ve Swagger kullanıcı arabirimini görüntüleyin.

    Azure Uygulaması Hizmeti'nde çalışan bir ASP.NET Core API'sinin ekran görüntüsü.

  2. http://<app_name>.azurewebsites.net/swagger/v1/swagger.json Dağıtılan API'nizin swagger.json görmek için adresine gidin.

  3. http://<app_name>.azurewebsites.net/api/todo Dağıtılan API'nizin çalıştığını görmek için adresine gidin.

CORS işlevselliği ekleme

Ardından, API'niz için App Service'te yerleşik CORS desteğini etkinleştirirsiniz.

Örnek uygulamada CORS'yi test edin

  1. Yerel deponuzda wwwroot/index.html dosyasını açın.

  2. 51. satırda apiEndpoint değişkeni dağıtılan API'nizin (http://<app_name>.azurewebsites.net ) URL'sine ayarlayın. appname< değerini uygulama adınız ile değiştirin.>

  3. Yerel terminal pencerenizde örnek uygulamayı yeniden çalıştırın.

    dotnet run

  4. konumundaki tarayıcı uygulamasına http://localhost:5000gidin. Tarayıcınızda geliştirici araçları penceresini açın (Windows için Chrome'da Ctrl+Shift+i ) ve Konsol sekmesini inceleyin. Şimdi hata iletisini No 'Access-Control-Allow-Origin' header is present on the requested resourcegörmeniz gerekir.

    Tarayıcı istemcisindeki CORS hatasının ekran görüntüsü.

    Tarayıcı uygulaması () ile uzak kaynakhttp://localhost:5000 (http://<app_name>.azurewebsites.net) arasındaki etki alanı uyumsuzluğu tarayıcınız tarafından çıkış noktaları arası kaynak isteği olarak tanınır. Ayrıca, App Service uygulaması üst bilgiyi göndermediğinden Access-Control-Allow-Origin tarayıcı etki alanları arası içeriğin yüklenmesini engellemiştir.

    Üretimde tarayıcı uygulamanızın localhost URL'si yerine genel BIR URL'si olur, ancak CORS'yi localhost URL'sine etkinleştirme işlemi, genel URL'nin işlemiyle aynıdır.

CORS'yi etkinleştirme

Cloud Shell'de komutunu kullanarak istemcinizin URL'sinde CORS'yi az webapp cors add etkinleştirin. Uygulama adı<>yerine geçin.

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

komutunu birden çok kez çalıştırarak veya içinde virgülle ayrılmış bir liste --allowed-originsekleyerek birden çok izin verilen kaynak ekleyebilirsiniz. Tüm çıkış noktalarına izin vermek için kullanın --allowed-origins '*'.

CORS'yi yeniden test etme

http://localhost:5000 adresindeki tarayıcı uygulamasını yenileyin. Konsol penceresindeki hata iletisi artık kaldırılır; dağıtılan API'den verileri görebilir ve etkileşimli çalışabilirsiniz. Uzak API'niz artık yerel olarak çalıştırılan tarayıcı uygulamanıza CORS'yi destekler.

Tarayıcı istemcisinde CORS desteğini gösteren ekran görüntüsü.

Tebrikler, Azure App Service'te CORS destekli bir API çalıştırıyorsunuz.

Sık sorulan sorular

App Service CORS'si ile sizin CORS'niz

Daha fazla esneklik elde etmek için App Service CORS yerine kendi CORS yardımcı programlarınızı kullanabilirsiniz. Örneğin, farklı yollar veya yöntemler için farklı izin verilen çıkış noktaları belirtmek isteyebilirsiniz. App Service CORS tüm API yolları ve yöntemleri için yalnızca bir kabul edilen kaynak kümesi belirtmenize olanak sağladığından, kendi CORS kodunuzu kullanmanız gerekir. ASP.NET Core'da CORS'yi etkinleştirmeyi öğrenmek için bkz. CORS'yi etkinleştirme.

Yerleşik App Service CORS özelliği, belirttiğiniz her kaynak için yalnızca belirli HTTP yöntemlerine veya fiillerine izin verme seçeneklerine sahip değildir. Tanımlanan her kaynak için tüm yöntemlere ve üst bilgilere otomatik olarak izin verir. Bu davranış, ASP.NET Çekirdek CORS ilkelerine benzer

Not

App Service CORS'si ile kendi CORS kodunuzu birlikte kullanmaya çalışmayın. Bunları birlikte kullanmaya çalışırsanız App Service CORS önceliklidir ve kendi CORS kodunuzun hiçbir etkisi yoktur.

İzin verilen çıkış noktalarını joker karakter alt etki alanına Nasıl yaparım??

gibi *.contoso.com bir joker karakter alt etki alanı joker karakter kaynağından *daha kısıtlayıcıdır. Uygulamanın Azure portalındaki CORS yönetim sayfası, joker karakter alt etki alanını izin verilen kaynak olarak ayarlamanıza izin vermez. Bununla birlikte, Azure CLI'yı kullanarak bunu yapabilirsiniz:

az webapp cors add --resource-group <group-name> --name <app-name> --allowed-origins 'https://*.contoso.com'

Yanıtta ACCESS-CONTROL-ALLOW-CREDENTIALS üst bilgisini etkinleştirmek Nasıl yaparım??

Uygulamanız tanımlama bilgileri veya kimlik doğrulama belirteçleri gibi kimlik bilgilerinin gönderilmesini gerektiriyorsa, tarayıcı yanıtta ACCESS-CONTROL-ALLOW-CREDENTIALS üst bilgi gerektirebilir. App Service'te bunu etkinleştirmek için olarak properties.cors.supportCredentialsayarlayıntrue:

az resource update --name web --resource-group <group-name> \
  --namespace Microsoft.Web --resource-type config \
  --parent sites/<app-name> --set properties.cors.supportCredentials=true

İzin verilen kaynaklar joker karakter kaynağını '*'içerdiğinde bu işleme izin verilmez. ve AllowAnyOrigin belirtilmesi AllowCredentials güvenli değildir. Bunun yapılması siteler arası istek sahteciliğiyle sonuçlanabilir. Kimlik bilgilerine izin vermek için joker karakter kaynağını joker karakter alt etki alanlarıyla değiştirmeyi deneyin.

Kaynakları temizleme

Önceki adımlarda, bir kaynak grubunda Azure kaynakları oluşturdunuz. Bu kaynakların gelecekte gerekli olacağını düşünmüyorsanız, Cloud Shell’de aşağıdaki komutu çalıştırarak kaynak grubunu silin:

az group delete --name myResourceGroup

Bu komutun çalıştırılması bir dakika sürebilir.

Sonraki adım

Öğrendikleriniz:

  • Azure CLI kullanarak App Service kaynakları oluşturun.
  • Git kullanarak Azure'a RESTful API'sini dağıtma.
  • App Service CORS desteğini etkinleştirin.

Kullanıcıların kimliğini doğrulamayı ve yetkilendirmeyi öğrenmek için aşağıdaki öğreticiye gidin.

Öğretici: Uçtan uca kullanıcıların kimliğini doğrulama ve kullanıcıları yetkilendirme

  • Last updated on