İngilizce dilinde oku

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. Komut satırı araçlarını kullanarak uygulamayı yapılandırır ve Git kullanarak dağıtırsınız.

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

  • Azure CLI kullanarak App Service kaynakları oluşturma.
  • 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 aboneliğiniz yoksa başlamadan önce birücretsiz Azure hesabı 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.

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

    Bu depo, Swagger / OpenAPI ile Core web API'si belgeleri ASP.NET öğreticisi temelinde oluşturulmuş 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.

    Bash
    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 öğreticide bir deponun 'den mainnası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.

    Bash
    dotnet restore
    dotnet run
    
  2. Swagger kullanıcı arabirimini http://localhost:5000/swagger denemek için tarayıcıda 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 Ctrl+Shift V'yi seçerek veya macOS üzerinde Cmd+Shift++V'yi 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.
Azure CLI
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.

Azure CLI
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, Ücretsiz fiyatlandırma katmanı kullanılarak myAppServicePlan adlı bir App Service planı oluşturulmaktadır:

Azure CLI
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

myAppServicePlan App Service planında bir web uygulaması oluşturun.

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

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

Web uygulaması oluşturulduğunda Azure CLI aşağıda yer alan çıktıdaki gibi bilgiler 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. Bu URL’ye daha sonra ihtiyacınız olacağı için URL’yi kaydedin.

Git üzerinden Azure'a gönderme

  1. Dalı dağıttığınızdan main App Service uygulamanız main için varsayılan dağıtım dalını olarak ayarlamanız gerekir (bkz . Dağıtım dalını değiştirme). Cloud Shell'de, komutuyla az webapp config appsettings set uygulama ayarını ayarlayınDEPLOYMENT_BRANCH.

    Azure CLI
    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ı oluştur'dan kaydettiğiniz Git uzak penceresinin URL'si ile değiştirin<.>

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

    Bash
    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. Dağıtılan API'nizin swagger.json dosyasını görmek için http://<app_name>.azurewebsites.net/swagger/v1/swagger.json adresine gidin.

  3. Dağıtılan API'nizin çalıştığını görmek için http://<app_name>.azurewebsites.net/api/todo 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 App Service'teki uygulama adınız ile değiştirin<.>

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

    Bash
    dotnet run
    
  4. http://localhost:5000 adresindeki tarayıcı uygulamasına gidin. 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 görmeniz gerekir: No 'Access-Control-Allow-Origin' header is present on the requested resource.

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

    Tarayıcı uygulaması () ile uzak kaynakhttp://<app_name>.azurewebsites.net (http://localhost:5000) 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ı> yer tutucusunun <yerine geçin.

Azure CLI
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'si 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 tanır, bu nedenle kendi CORS kodunuzu kullanmak istersiniz. CORS'yi etkinleştirme bölümünde ASP.NET Core'da CORS'nin nasıl etkinleştirildiğini görün.

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. Bu davranış, seçenekleri .AllowAnyHeader() ve .AllowAnyMethod() kodda kullandığınızda kullanılmaktadır.

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. Ancak, azure CLI kullanarak bunu yapabilirsiniz, örneğin:

Azure CLI
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 trueayarlayınproperties.cors.supportCredentials:

Azure CLI
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 AllowCredentials belirtilmesi AllowAnyOrigin 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:

Azure CLI
az group delete --name myResourceGroup

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

Sonraki adımlar

Öğrendikleriniz:

  • Azure CLI kullanarak App Service kaynakları oluşturma.
  • 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 sonraki öğreticiye gidin.