Önceki

Sonraki

Alıştırma - Azure İşlevleri ve Angular'ı çalıştırma ve hata ayıklama

Tamamlandı

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.

1. Visual Studio Code'da yeni bir terminal açın.

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

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

1. Visual Studio Code'da uygulamanın src/app/vacations/vacations.component.ts dosyasını açın ve işlevi bulun getVacations() .

2. İşlevin içindeki getVacations() ilk kod this.vacationService.getAll();satırının solundaki düzenleyicinin cilt payı 'nı seçerek bir kesme noktası ayarlayın.

   

3. 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 7071değiştirin.

{
  "/api": {
    "target": "http://localhost:7071",
    "secure": false
  }
}

Not

Node.js Express uygulaması bağlantı noktasını 7070kullandı. 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.

1. Visual Studio Code komut paletini açmak için F1’e basın.

2. Görünüm: Çalıştırmayı Ve Hata Ayıklamayı Göster'i yazın ve seçin.

3. Ç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.

4. 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ındaki getVacations() ilk kesme noktasında duraklatılır.

   

5. Yürütmeyi çıkarın ve F5 tuşuna basarak devam edin.

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

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

8. Kalan hata ayıklayıcıyı durdurmak için Shift+F5 tuşlarına basın.

Devam et