Not
Bu sayfaya erişim yetkilendirme gerektiriyor. Oturum açmayı veya dizinleri değiştirmeyi deneyebilirsiniz.
Bu sayfaya erişim yetkilendirme gerektiriyor. Dizinleri değiştirmeyi deneyebilirsiniz.
Bir bakışta
Hedef: Bulut hizmeti API isteklerini yerel olarak inceleme
Süre: 20 dakika
Eklentiler:RewritePlugin, DevToolsPlugin
Önkoşullar:Geliştirme Ara Sunucusu, Geliştirme Tünellerini Ayarlama
Uygulamanızı bulut hizmetleriyle tümleştirdiğinizde karşılaşabileceğiniz zorluklardan biri, bulut hizmetinin kullandığı API'lerle nasıl etkileşime geçtiğini anlamaktır. Api isteklerini inceleyebilmek, özellikle sorunları giderirken veya bulut hizmetinin nasıl çalıştığını anlamaya çalışırken önemlidir. Genellikle, bulut hizmetinin çalışma zamanına erişiminiz olmadığından ve bulut API'sinin izleme araçlarına da erişiminiz olmadığından bu zor olabilir. Dev Proxy ve geliştirme tünellerini kullanarak bulut hizmetlerinin bulut API'lerine verdiği API isteklerini inceleyebilirsiniz.
Önemli
Devam etmeden önce geliştirme tünellerini yükleyin ve aracı kullanmak üzere yapılandırın.
Bulut hizmetleri bulut API'lerini nasıl çağırır?
Uygulamanızı bulut hizmetleriyle tümleştirdiğinizde bulut hizmeti API'nizi bulutta çağırır. Aşağıdaki diyagramda bu senaryo gösterilmektedir:
Bulut hizmetinin karşılaştığı API isteklerini incelemek için bulut API'sinin izleme araçlarına erişmeniz gerekir. Genellikle bu araçlara erişemezsiniz. Bir hazırlama ortamı kullanarak bu sınırlamaya geçici bir çözüm sağlayabilirsiniz. Ancak, bir hazırlama ortamı ayarlamak ve bakımını yapmak zaman alır. Dahası, bulut API'sine sahip değilseniz bir hazırlama ortamı ayarlayamayabilirsiniz.
Geliştirme Proxy'si ve geliştirme tünellerini kullanarak API isteklerini inceleme
Dev Proxy ve geliştirme tünellerini kullanarak bulut hizmetinin bulut API'sine verdiği API isteklerini inceleyebilirsiniz.
Bulut API'sini doğrudan çağırmak yerine, bulut hizmetini yerel makinenizde çalıştırdığınız geliştirme tünelini (1) çağıracak şekilde yapılandırabilirsiniz. Geliştirme tünelini, Dev Proxy'nin yakaladığı bir konak üst bilgisi kullanacak şekilde yapılandırırsınız. Bulut hizmeti geliştirme tünelini her çağırışında, isteği kesmesini sağlayan Dev Proxy'ye geçirir (2). Dev Proxy RewritePlugin kullanarak, kesilen isteğin URL'sini değiştirir ve bulut API'sine (3) iletirsiniz. Bulut API'si isteği işler ve Geliştirme Proxy'sine (4) bir yanıt döndürür. Dev Proxy, yanıtı bulut hizmetine (6) ileten geliştirme tüneline (5) geçirir. İstek yerel makineniz üzerinden yönlendirildiğinden URL, üst bilgiler ve gövde gibi bilgilerini ve bulut API'sinden gelen yanıtı inceleyebilirsiniz.
Senaryo
Bir bulut hizmetinin konumundaki https://jsonplaceholder.typicode.comdemo JSONPlaceholder API'sine yönelik api isteklerini incelemek istediğinizi varsayalım. Dev Proxy ve geliştirme tünellerini birleştirerek istekleri engelleyebilir ve bilgilerini inceleyebilirsiniz.
İstekleri, geliştirme tünelleri inceleme araçlarını veya Dev Proxy DevToolsPlugin kullanarak inceleyebilirsiniz. Her iki araç da yakalanan istekler ve yanıtlar hakkındaki bilgileri göstermek için Chrome DevTools'u kullanır. Geliştirme tünelleri inceleme araçlarını kullandığınızda, istek URL'si olarak geliştirme tüneli URL'sini görürsünüz. Karşılaştırıldığında, Dev Proxy DevToolsPlugin kullandığınızda, yerel veya yeniden yazılmış URL'yi kullanarak Development Proxy'nin isteği nasıl kestiğini görürsünüz.
Dev Proxy, dev tünelleri ve dev tünelleri inceleme araçlarını kullanarak API isteklerini inceleme
https://jsonplaceholder.typicode.comvehttp://jsonplaceholder.typicode.localisteklerini engellemek için Geliştirme Proxy'sini yapılandırın:Dosya: devproxyrc.json
{ "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/rc.schema.json", "plugins": [ { "name": "RewritePlugin", "enabled": true, "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll", "configSection": "rewritePlugin" } ], "urlsToWatch": [ "https://jsonplaceholder.typicode.com/*", "http://jsonplaceholder.typicode.local/*" ], "rewritePlugin": { "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/rewriteplugin.schema.json", "rewritesFile": "devproxy-rewrites.json" }, "logLevel": "information", "newVersionNotification": "stable", "showSkipMessages": true }Yapılandırma dosyası, kesilen isteklerin URL'sini yeniden yazmak için RewritePlugin kullanır. Ayrıca
https://jsonplaceholder.typicode.comvehttp://jsonplaceholder.typicode.localURL'lerine yönelik istekleri kesmek için Dev Proxy'yi yapılandırır.Not
.localetki alanı kullanmak gerekli olmasa da, gerçek ve engellenmiş istekleri ayırt etmeye yardımcı olan iyi bir uygulamadır. Ayrıca,.localetki alanı için HTTPS yerine HTTP protokolünü kullandığınıza da dikkat edin. Geliştirme tünelleri, istekleri yerel makinenizdeki özel konak üst bilgilerine yönlendirmek için HTTPS'yi desteklemez. Bu nedenle HTTP kullanmanız gerekir.Kesilen isteklerin URL'sini değiştiren adlı
devproxy-rewrites.jsonbir yeniden yazma dosyası oluşturun:Dosya: devproxy-rewrites.json
{ "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/rewriteplugin.rewritesfile.schema.json", "rewrites": [ { "in": { "url": "^http://jsonplaceholder.typicode.local(.*)" }, "out": { "url": "https://jsonplaceholder.typicode.com$1" } } ] }Yeniden yazma dosyası, kesilen isteklerin URL'sini
http://jsonplaceholder.typicode.local'denhttps://jsonplaceholder.typicode.com'e değiştirir.Komut satırında
devproxyçalıştırarak Dev Proxy'yi başlatın.komut satırında
devtunnel host --host-header jsonplaceholder.typicode.local --port-numbers 8000 --allow-anonymousçalıştırarak geliştirme tünelini başlatın.Bu komutu kullanarak makinenizde yeni bir geliştirme tüneli açarsınız. Bunu, Dev Proxy'nin gelen istekleri dinlediği 8000 bağlantı noktasıyla eşlersiniz. Ayrıca, Dev Proxy'nin araya girerek engellediği ana makine üst bilgilerini belirtirsiniz.
Bulut hizmetini yerel makinenizi çağıracak şekilde yapılandırmak için kullanabileceğiniz geliştirme tüneliNIN URL'sini not edin, örneğin
https://tunnel_id-8000.euw.devtunnels.ms.Web tarayıcısında geliştirme tüneli inceleme URL'sini açın, örneğin
https://tunnel_id-8000-inspect.euw.devtunnels.ms.Komut satırında çalıştırarak geliştirme tüneli URL'sini kullanarak bulut API'sini çağıran bir bulut hizmetinin simülasyonunu yapın.
curl https://tunnel_id-8000.euw.devtunnels.ms/posts/1Not
Ana bilgisayar adının makinenizdeki geliştirme tünelinin URL'sine karşılık geldiğini unutmayın. Yol, incelemek istediğiniz API'nin yoluyla eşleşir.
Dev Proxy'nin isteği nasıl kestiğine ve bulut API'sine nasıl ilettiğine dikkat edin ve sonunda yanıtı istemciye döndürür.
Web tarayıcısında, durdurulan istek ve bulut API'sinden gelen yanıt hakkındaki bilgilere dikkat edin.
Not
Kaydedilen istek URL'sinin geliştirme tünelinin URL'si olduğuna dikkat edin. Kaydedilen konak üst bilgisi, Dev Proxy'nin kestiği konak üst bilgisidir.
Komut satırında, ilgili oturumlarda Ctrl+C'ye basarak geliştirme tünelini kapatın ve Dev Proxy'yi durdurun.
Dev Proxy ve DevToolsPlugin kullanarak API isteklerini inceleme
Bulut hizmetinin karşılaştığı API isteklerini incelemenin bir diğer yolu da Dev Proxy DevToolsPlugin kullanmaktır. DevToolsPlugin ile geliştirme tünelleri inceleme araçlarının kullanılması arasındaki fark, DevToolsPlugin'in Yerel url'yi veya yeniden yazılan URL'yi kullanarak Dev Proxy'nin isteği nasıl kestiğini göstermesidir.
DevToolsPlugin'i kullanarak ele geçirilen URL aracılığıyla API isteklerini incelemek için Dev Proxy yapılandırması yapın.
İlk olarak, Bulut API'si isteklerini incelemek için Dev Proxy'yi yapılandıralım. Geliştirme Proxy'si yeniden yazmadan önce URL hakkındaki bilgileri göstermek için DevToolsPlugin'i yapılandıralım.
DevToolsPlugin'i kullanmak için Dev Proxy yapılandırma dosyasını güncelleştirin:
Dosya: devproxyrc.json
{ "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/rc.schema.json", "plugins": [ { "name": "DevToolsPlugin", "enabled": true, "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll" }, { "name": "RewritePlugin", "enabled": true, "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll", "configSection": "rewritePlugin" } ], "urlsToWatch": [ "https://jsonplaceholder.typicode.com/*", "http://jsonplaceholder.typicode.local/*" ], "rewritePlugin": { "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/rewriteplugin.schema.json", "rewritesFile": "devproxy-rewrites.json" }, "logLevel": "information", "newVersionNotification": "stable", "showSkipMessages": true }Not
RewritePlugin'in önüne DevToolsPlugin'i eklediğimize dikkat edin. DevToolsPlugin'i önce ekleyerek, yeniden yazılmadan önce engellenen istek hakkındaki bilgileri gösterir.
Komut satırında
devproxyçalıştırarak Dev Proxy'yi başlatın. Dev Proxy'nin Chrome Geliştirme Araçları'nın görünür olduğu bir web tarayıcısı penceresi açtığına dikkat edin.komut satırında
devtunnel host --host-header jsonplaceholder.typicode.local --port-numbers 8000 --allow-anonymousçalıştırarak geliştirme tünelini başlatın.Komut satırında çalıştırarak geliştirme tüneli URL'sini kullanarak bulut API'sini çağıran bir bulut hizmetinin simülasyonunu yapın.
curl https://tunnel_id-8000.euw.devtunnels.ms/posts/1Chrome Geliştirme Araçları ile web tarayıcısında, kesilen istek ve bulut API'sinden gelen yanıt hakkındaki bilgilere dikkat edin.
Not
Kaydedilen istek URL'sinin bulut API'sinin URL'si olduğuna dikkat edin. Kaydedilen konak üst bilgisi, Dev Proxy'nin kestiği konak üst bilgisidir.
Komut satırında, ilgili oturumlarda Ctrl+C'ye basarak geliştirme tünelini kapatın ve Dev Proxy'yi durdurun.
Dev Proxy'yi, yeniden yazılan URL'yi kullanarak API isteklerini incelemek için DevToolsPlugin kullanacak şekilde yapılandırma
Şimdi, yeniden yazılan URL hakkındaki bilgileri göstermek için Dev Proxy yapılandırmasını güncelleştirelim.
DevToolsPlugin'i RewritePlugin'in ardından taşıyarak Dev Proxy yapılandırma dosyasını güncelleştirin:
Dosya: devproxyrc.json
{ "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/rc.schema.json", "plugins": [ { "name": "RewritePlugin", "enabled": true, "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll", "configSection": "rewritePlugin" }, { "name": "DevToolsPlugin", "enabled": true, "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll" } ], "urlsToWatch": [ "https://jsonplaceholder.typicode.com/*", "http://jsonplaceholder.typicode.local/*" ], "rewritePlugin": { "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/rewriteplugin.schema.json", "rewritesFile": "devproxy-rewrites.json" }, "logLevel": "information", "newVersionNotification": "stable", "showSkipMessages": true }Komut satırında
devproxyçalıştırarak Dev Proxy'yi başlatın. Dev Proxy'nin Chrome Geliştirme Araçları'nın görünür olduğu bir web tarayıcısı penceresi açtığına dikkat edin.komut satırında
devtunnel host --host-header jsonplaceholder.typicode.local --port-numbers 8000 --allow-anonymousçalıştırarak geliştirme tünelini başlatın.Komut satırında çalıştırarak geliştirme tüneli URL'sini kullanarak bulut API'sini çağıran bir bulut hizmetinin simülasyonunu yapın.
curl https://tunnel_id-8000.euw.devtunnels.ms/posts/1Chrome Geliştirme Araçları ile web tarayıcısında, kesilen istek ve bulut API'sinden gelen yanıt hakkındaki bilgilere dikkat edin.
Not
Hem kaydedilen istek URL'sinin hem de konak üst bilgisinin bulut API'sinin URL'sini gösterdiğine dikkat edin.
Komut satırında, ilgili oturumlarda Ctrl+C'ye basarak geliştirme tünelini kapatın ve Dev Proxy'yi durdurun.
Özet
Dev Proxy ve geliştirme tünellerini kullanarak bulut hizmetlerinin bulut API'lerine verdiği API isteklerini inceleyebilirsiniz. İstekleri incelemek için geliştirme tünelleri inceleme araçlarını veya Dev Proxy DevToolsPlugin'i kullanabilirsiniz. Her iki araç da URL, üst bilgiler ve gövde ile bulut API'sinden gelen yanıt dahil olmak üzere kesilen isteklerle ilgili bilgileri gösterir. Dev Proxy ve geliştirme tünellerini kullanarak bulut hizmetlerinin bulut API'leriyle nasıl etkileşime geçtiğini daha iyi anlayabilir ve sorunları daha etkili bir şekilde giderebilirsiniz.
Sonraki adımlar
RewritePlugin hakkında daha fazla bilgi edinin.