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

Azure App Service, yüksek oranda ölçeklenebilen, kendi kendine düzeltme eki uygulayan bir web barındırma hizmeti sunar. Buna ek olarak, App Service'de RESTful API'ler için yerleşik Çıkış Noktaları Arası Kaynak Paylaşımı (CORS) desteği vardır. 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 şunların nasıl yapıldığını öğreneceksiniz:

Bu öğreticideki adımları MacOS, Linux ve Windows üzerinde izleyebilirsiniz.

Azure aboneliğiniz yoksa başlamadan önce ücretsiz bir hesap oluşturun.

Önkoşullar

Bu öğreticiyi tamamlamak için:

• Git'i yükleyin
• En son .NET Core 3.1 SDK'sini yükleme

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, cd ile bir çalışma dizinine gidin.

2. Örnek depoyu klonlama ve depo köküne değiştirme.

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

   Bu depo, şu öğreticiye dayanarak oluşturulan bir uygulama içerir: Swagger kullanılan ASP.NET Core Web API'si yardım sayfaları. 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 emin main olun.

   git branch -m main
   

   İpucu

   Dal adı değişikliği, dal adı değişikliği App Service. Ancak, birçok depo varsayılan dallarını olarak değiştirmektedir (bkz. Dağıtım dallarını değiştirme) bu öğreticide, bir deponun 'den nasıl main dağıtın? main

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. Swagger kullanıcı arabirimiyle çalışmak için tarayıcıda http://localhost:5000/swagger adresine gidin.

   

3. http://localhost:5000/api/todo adresine gidin ve ToDo JSON öğelerinin listesine bakın.

4. http://localhost:5000 adresine gidin ve tarayıcı uygulamasıyla çalışın. Daha sonra CORS işlevselliğini test etmek için tarayıcı uygulamasının App Service'te bir uzak API'ye işaret etmesini sağlayacaksınız. Tarayıcı uygulamasının kodu deponun wwwroot dizininde bulunabilir.

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

Azure Cloud Shell kullanma

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

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

Seçenek	Örnek/Bağlantı
Kod bloğunun sağ üst köşesindeki Deneyin’i seçin. Deneyin seçeneği belirlendiğinde, kod otomatik olarak Cloud Shell’e kopyalanmaz.
Cloud Shell’i tarayıcınızda açmak için https://shell.azure.com bölümüne gidin veya Cloud Shell’i Başlat düğmesini seçin.
Azure portalın sağ üst köşesindeki menü çubuğunda yer alan Cloud Shell düğmesini seçin.

Azure Cloud Shell’de bu makaledeki kodu çalıştırmak için:

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

2. Kodu kopyalamak için kod bloğunda Kopyala düğmesini seçin.

3. Windows ve Linux sisteminde Ctrl+Shift+V tuşlarını kullanarak veya macOS’de Cmd+Shift+V tuşlarını kullanarak kodu Cloud Shell oturumuna yapıştırın.

4. Kodu çalıştırmak için Enter tuşuna basın.

Uygulamayı Azure’da dağıtma

Bu adımda, SQL Veritabanı’na bağlı .NET Core uygulamanızı App Service’e dağıtırsınız.

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

FTP ve yerel git, bir dağıtım kullanıcısı kullanarak bir Azure Web uygulamasına dağıtabilir. Dağıtım kullanıcısını yapılandırdıktan sonra 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ı.

Dağıtım kullanıcısını yapılandırmak için, Azure Cloud Shell bölümünde az WebApp Deployment User set komutunu çalıştırın. <username>Ve öğesini <password> bir dağıtım kullanıcısı Kullanıcı adı ve parolasıyla değiştirin.

• Kullanıcı adı Azure içinde benzersiz olmalıdır ve yerel git gönderimleri için ' @ ' sembolünü içermemelidir.
• Parola en az sekiz karakter uzunluğunda olmalıdır ve şu üç öğeden ikisi vardır: harfler, rakamlar ve semboller.

az webapp deployment user set --user-name <username> --password <password>

JSON çıktısı parolayı olarak gösterir null . '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 bir mantıksal kapsayıcıdır. Örneğin, daha sonra tek bir basit adımda kaynak grubun tamamını silmeyi seçebilirsiniz.

Cloud Shell, komutuyla bir kaynak grubu oluşturun az group create . 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, komutuyla bir App Service planı oluşturun az appservice plan create .

Aşağıdaki örnekte, Ücretsiz fiyatlandırma katmanı kullanılarak myAppServicePlan 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 Web uygulaması oluşturun myAppServicePlan .

Cloud Shell 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).

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

Git üzerinden Azure'a gönderme

1. Dalı dağıtıyorsanız, App Service uygulamanızın varsayılan dağıtım dalını olarak main main ayarlamalısınız (bkz. Dağıtım dalını değiştirme). Komut Cloud Shell uygulama DEPLOYMENT_BRANCH ayarını komutuyla az webapp config appsettings set ayarlayın.

   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. yerine <deploymentLocalGitUrl-from-create-step> Web uygulaması oluşturma sayfasından kaydedilen Git uzak url'sini yazın.

   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 bilgileri istendiğinde, dağıtım kullanıcısını yapılandırma'da oluşturduğunuz kimlik bilgilerini, kullanıcı arabiriminde oturum a açma için değil , kimlik bilgilerini Azure portal.

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

Azure uygulamasına göz atma

1. Tarayıcıda http://<app_name>.azurewebsites.net/swagger adresine gidin ve Swagger kullanıcı arabirimiyle çalışın.

   

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 etme

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

2. 51. satırda, apiEndpoint değişkenini dağıtılan API'nizin URL'sine (http://<app_name>.azurewebsites.net) ayarlayın. yerine <appname> uygulama adı App Service.

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

   dotnet run
   

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

   

   Tarayıcı uygulaması (http://localhost:5000) ile uzak kaynak (http://<app_name>.azurewebsites.net) arasındaki etki alanı uyuşmazlığından ve App Service'deki API'nizin Access-Control-Allow-Origin üst bilgisi göndermemesinden dolayı, tarayıcınız etki alanları arası içeriğin tarayıcı uygulamanıza yüklenmesini engelledi.

   Üretim ortamında, tarayıcı uygulamanızın localhost URL değeri yerine genel URL'si olabilir, ama localhost URL'ye CORS etkinleştirmesi genel URL ile aynıdır.

CORS'yi etkinleştirme

Komut Cloud Shell komutunu kullanarak istemcinizin URL'sinde CORS'yi az webapp cors add etkinleştirin. Uygulama adı < ve yer tutucusunu> değiştirin.

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

properties.cors.allowedOrigins içinde birden çok istemci URL'si belirtebilirsiniz ("['URL1','URL2',...]"). Ayrıca "['*']" ile tüm istemci URL'lerini etkinleştirebilirsiniz.

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.

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

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 izin verilen farklı çıkış noktaları belirtmek isteyebilirsiniz. App Service CORS'si tüm API yolları ve yöntemleri için tek bir izin verilen çıkış noktaları kümesi belirtmenize olanak tanıdığından, kendi CORS kodunuzu kullanmak isteyebilirsiniz. Çıkış Noktaları Arası İstekleri Etkinleştirme (CORS) konusunda, ASP.NET Core'un bunu nasıl yaptığını görebilirsiniz.

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ımlar

Öğrendikleriniz:

Kullanıcıların kimlik doğrulamasının ve yetkilendirmesinin nasıl yapılacağını öğrenmek için sonraki öğreticiye ilerleyin.