Alıştırma - Azure İşlevleri ve Angular'ı çalıştırma ve hata ayıklama
Bu alıştırmada Angular uygulamasını ve Azure İşlevleri uygulamasını birlikte çalıştırıp hatalarını ayıklaacaksınız. Web uygulamasını tarayıcıda görüntüleyen Angular kodunda ve tatilleri getiren ve işleyen İşlevler kodunda kesme noktaları ayarlarsınız. Ardından, İşlevler ve Angular kodunda hata ayıklayıcı ile adım adım ilerleyebilmek için Angular ve İşlevler kesme noktalarını kullanırsınız.
Not
.vscode/launch.json ve .vscode/tasks.json dosyaları, bu proje için hata ayıklama deneyiminin bir parçasıdır.
Yerel işlevler depolaması için Azurite'i başlatma
Azure İşlevleri verilerini depolamak için Azure Depolama kullanır. İşlevler uygulamasını yerel olarak çalıştırmak için Azure Depolama için yerel bir öykünücü olan Azurite'yi kullanabilirsiniz. Azurite, geliştirme amacıyla Azure Blob, Kuyruk ve Tablo hizmetlerini öykünen yerel bir ortam sağlar.
Visual Studio Code'da yeni bir terminal açın.
Azurite'yi başlatmak için aşağıdaki komutu çalıştırın.
npx -y azurite --location ./.azurite/data --debug ./.azurite/logs
Bu komut azurite'yi yükler ve geçerli dizinde başlatır.
--location
bayrağı verilerin konumunu, bayrağı ise--debug
günlüklerin konumunu belirtir..gitignore
Dosyayı açın ve Azurite verilerini ve günlüklerini yoksaymak için aşağıdaki satırı ekleyin..azurite
Bu satır, Azurite verilerinin ve günlüklerinin depoya işlenmemesini sağlar.
Kesme noktaları ayarlama
Tam yığın uygulaması başlatıldığında, Angular ön uç istemcisi İşlevler arka uç uygulamasından tatil verilerini istemektedir. İki uygulama birlikte çalışarak verileri alır ve tarayıcıda işler.
Tatillerin listesini görüntülemek için Angular uygulaması, Azure İşlevleri API'sindeki uç noktayı çağıran vacations
vacations.component.ts dosyasında işlevini çalıştırırgetVacations()
. dosya işlevleri/getVacations.ts uç noktanın yolunu tanımlar. Hata ayıklama sırasında tatilleri getiren kodda adım adım ilerleyebilmeniz için bu dosyalardaki kesme noktalarını ayarlayın.
Visual Studio Code'da uygulamanın src/app/vacations/vacations.component.ts dosyasını açın ve işlevi bulun
getVacations()
.İşlevin içindeki
getVacations()
ilk kodthis.vacationService.getAll();
satırının solundaki düzenleyicinin cilt payı 'nı seçerek bir kesme noktası ayarlayın.functions/src/functions/getVacations.ts dosyasını açın ve satırın solundaki
try {
düzenleyicinin cilt payı'nı seçerek bir kesme noktası ayarlayın.
Uygulamayı çalıştırma ve hatalarını ayıklama
Artık hem Angular hem de İşlevler uygulamalarında kesme noktalarınız olduğuna göre, adım adım ilerleyebilir ve bunların hatalarını ayıklayabilirsiniz.
Not
İşlevleri henüz Azure'da çalıştırmadınız. Yerel olarak çalıştırmak ve hata ayıklamak için Azure İşlevleri Core Tools (CLI) kullanıyorsunuz.
Angular'dan İşlevler'e istekleri ara sunucu olarak ekleme
Azure İşlevleri API'si bağlantı noktasında7071
, Angular uygulaması ise üzerinde 4200
çalışır. Angular uygulaması, etki alanları genelinde İşlevler uygulamasına istekte bulunamaz, bu nedenle Angular uygulamasından İşlevler uygulamasına yapılan çağrılara ara sunucu oluşturursunuz.
Angular uygulamasının İşlevler uygulamasıyla iletişim kurabilmesini ve ara sunucu isteklerini etkinleştirmesi için proxy.conf.json açın ve bağlantı noktasını olarak 7071
değiştirin.
{
"/api": {
"target": "http://localhost:7071",
"secure": false
}
}
Not
Node.js Express uygulaması bağlantı noktasını 7070
kullandı. Node.js Express uygulamasını kaldırdıysanız İşlevler uygulaması için bağlantı noktasını 7070
da kullanabilirsiniz. Ancak öğrenme amacıyla her iki uygulamayı da saklarsınız.
Her iki uygulamanın da hatalarını ayıklama
Uygulamaları birlikte çalıştırıp hatalarını ayıkladığınızda, uygulama kesme noktalarında duraklatılır, böylece bu uygulamaların birlikte nasıl çalıştığını keşfetme fırsatınız olur.
Visual Studio Code komut paletini açmak için F1’e basın.
Görünüm: Çalıştırmayı Ve Hata Ayıklamayı Göster'i yazın ve seçin.
Çalıştır ve Hata Ayıkla bölmesinin en üstünde, açılan listeden İşlevleri ve Angular Hatalarını Ayıkla'yı seçin.
Hata ayıklayıcıyı başlatmak için F5 tuşuna basın.
Uygulama, tatillerin listesini almak için başlatılır. Angular
VacationComponent
, tatilleri almak için HTTP isteğini başlatır. Tarayıcı açıldığında kod yürütme işlevindeki vacations.component.ts dosyasındakigetVacations()
ilk kesme noktasında duraklatılır.Yürütmeyi çıkarın ve F5 tuşuna basarak devam edin.
Angular uygulaması İşlevler
vacations
yoluna ulaştığından kod functions/vacations-get/index.ts dosyasındaki ikinci kesme noktasında duraklatılır. Yürütmeyi çıkarın ve F5 tuşuna basarak devam edin.Çalışan iki hata ayıklama işlemi vardır: biri Angular için, biri de Azure İşlevleri için. Etkin hata ayıklayıcıyı durdurmak için Shift+F5 tuşlarına basın.
Kalan hata ayıklayıcıyı durdurmak için Shift+F5 tuşlarına basın.