Share via

Azure Developer CLI için etkinleştirilen uygulamaları çalıştırma ve hatalarını ayıklama

  • Makale

Azure Geliştirici CLI'sıazd () için Visual Studio Code uzantısını kullanarak yerel makinenizde uygulamaları çalıştırın ve hatalarını ayıklayın. Bu kılavuzda, Azure'da Node.js API ve MongoDB ile React Web App şablonunu kullanacaksınız. Bu makalede öğrendiğiniz ilkeleri Azure Geliştirici CLI şablonlarından herhangi birine uygulayabilirsiniz.

Önkoşullar

Azure Geliştirici CLI'sı için Visual Studio Code uzantısını yükleme

Visual Studio Code aracılığıyla

  1. Visual Studio Code'u açın.

  2. Görünüm menüsünde Uzantılar'ı seçin.

  3. Arama alanına yazın Azure Developer CLI.

  4. Yükle'yi seçin.

Market aracılığıyla

  1. Tarayıcınızı kullanarak Azure Geliştirici CLI - VS Code Uzantısı sayfasına gidin.

  2. Yükle'yi seçin.

Yeni bir uygulama başlatma

  1. Visual Studio Code'da yeni bir dizin oluşturun ve açın.

  2. Görünüm menüsünden Komut Paleti... öğesini seçin.

  3. yazın ve öğesini seçin Azure Developer: init.

    Screenshot of the option to initialize a new app.

  4. şablonunu Azure-Samples/todo-nodejs-mongoseçin.

    Screenshot of selecting the todo-nodejs-mongo sample template.

Dizine eklenen .vscode aşağıdaki dosyaları keşfedin:

Dosya Açıklama
launch.json Hata Ayıklama Web ve Hata Ayıklama API'si gibi hata ayıklama yapılandırmalarını tanımlar. hata ayıklama yapılandırma seçeneklerini görmek için Görünüm menüsünde Çalıştır'ı seçin. Kullanılabilir hata ayıklama yapılandırmaları bölmenin en üstünde listelenir. Visual Studio Code'da hata ayıklama hakkında daha fazla bilgi edinmek için bkz . Hata Ayıklama.
tasks.json Web veya API sunucusunu başlatmak için yapılandırmaları tanımlar. Bu yapılandırma seçeneklerini görmek için Komut Paleti'ni açın ve Görev: görevi çalıştır'ı çalıştırın. Visual Studio Code Görevleri hakkında daha fazla bilgi edinmek için bkz . Görevler aracılığıyla Dış Araçlarla Tümleştirme.

Dekont

C# SWA-func MS SQL şablonunu kullanıyorsanız, API'yi Başlat görevini el ile başlatmanız ve ardından API Hatalarını Ayıklama (F5) yapmanız gerekir. Çalışan .NET işlemleri listesinden seçim yapmak istendiğinde, uygulamanızın adını arayın ve seçin.

Azure kaynaklarını hazırlama

Hata ayıklamaya başlamadan önce gerekli Azure kaynaklarını sağlayın.

  1. Komut Paleti'ne tıklayın.

  2. Azure Geliştirici: Azure kaynaklarını sağlama girin.

    Screenshot of option to provision the Azure resources for a new app.

API'de hata ayıklama

Hata ayıklama yapılandırması Hata Ayıklama API'si , API sunucusunu otomatik olarak çalıştırır ve hata ayıklayıcısını ekler. Bu düzeni test etmek için aşağıdaki adımları uygulayın:

  1. Projenizin src/api/src/routes dizininden dosyasını açın lists.ts.

  2. 16. satırda bir kesme noktası ayarlayın.

  3. Etkinlik Çubuğu'nda Çalıştır ve Hata Ayıklama API'sinde> hata ayıklama yapılandırması >Hata Ayıklamayı Başlat okunu seçin.

    Screenshot of setting the debug configuration to Debug API.

  4. Görünüm menüsünden Hata Ayıklama Konsolu'nu seçin.

  5. Hata ayıklayıcının 3100 numaralı bağlantı noktasında dinlediğini belirten iletiyi bekleyin.

    Screenshot of the message in the Debug Console indicating the debugger is listening on port 3100.

  6. Tercih ettiğiniz terminal kabuğuna aşağıdaki komutu girin: curl http://localhost:3100/lists

    Screenshot of using cURL to connect to the API server.

  7. Daha önce ayarladığınız kesme noktasına isabet edildiğinde uygulama yürütme duraklatılır. Bu noktada, aşağıdakiler gibi standart hata ayıklama görevlerini gerçekleştirebilirsiniz:

    • Değişkenleri inceleme
    • Çağrı yığınına bakın
    • Diğer kesme noktalarını ayarlayın.

  8. Uygulamayı çalıştırmaya devam etmek için basın <F5> . Örnek uygulama boş bir liste döndürür.

React Ön Uç uygulamasında hata ayıklama

Hata Ayıklama Web yapılandırmasını kullanmak için her ikisini de başlatmanız gerekir:

  • API sunucusu
  • Geliştirme web sunucusu

Bu düzeni test etmek için aşağıdaki adımları uygulayın:

  1. Komut Paleti'ni açın ve Görev: Görevi çalıştır'ı çalıştırın.

    Screenshot of running a Visual Studio Code Task.

  2. API'yi ve Web'i Başlat'ı girin ve seçin

    Screenshot of selecting the option to Start API and Web.

    Bir web tarayıcısında aşağıdaki URL'ye giderek yerel web sunucusunun çalışıp çalışmadığını de kontrol edebilirsiniz: http://localhost:3000.

  3. Projenizin src/web/src/components dizininde dosyasını açın todoItemListPane.tsx.

  4. 150. satırda bir kesme noktası ayarlayın (işlevin deleteItems ilk satırı).

  5. Etkinlik Çubuğu'nda, Hata Ayıklamayı Başlat okunu Çalıştır ve Hata Ayıkla>Web hata ayıklama yapılandırması'nı > seçin.

    Screenshot of setting the debug configuration to Debug Web.

  6. Web uygulamasını çalıştırmak, varsayılan tarayıcınızın şu URL'yi açmasına neden olur: http://localhost:3000. Artık bir öğe ekleyerek, listeden seçerek ve Sil'i seçerek uygulamada hata ayıklayabilirsiniz.

    Screenshot of the sample Node JS Mongo DB app.

  7. Daha önce ayarladığınız kesme noktasına isabet edildiğinde uygulama yürütme duraklatılır. Bu noktada, aşağıdakiler gibi standart hata ayıklama görevleri gerçekleştirebilirsiniz:

    • Değişkenleri inceleme
    • Çağrı yığınına bakın
    • Diğer kesme noktalarını ayarlama

  8. Uygulamayı çalıştırmaya devam etmek için basın <F5> ; seçili öğe silinir.

Visual Studio ve Azure Geliştirici CLI'sı (azd) kullanarak yerel makinenizde oluşturulan uygulamaları çalıştırın ve hatalarını ayıklayın. Bu kılavuzda Azure'da C# API ve MongoDB ile React Web App şablonunu kullanacaksınız. Bu makalede öğrendiğiniz ilkeleri Azure Geliştirici CLI şablonlarından herhangi birine uygulayabilirsiniz.

Önkoşullar

Önizleme özelliğini yükleme ve etkinleştirme

  1. Visual Studio Preview'ı yükleme

    Dekont

    Bu, Visual Studio'dan farklıdır. Visual Studio'nun önizleme sürümüne sahip değilseniz, bunu yine de yüklemeniz gerekir.

  2. Visual Studio Önizleme'yi açın.

  3. Araçlar menüsünden Seçenekler>Önizleme Özellikleri'ni seçin.

  4. Azure Geliştirici CLI'sı olan azd ile tümleştirmenin etkinleştirildiğinden emin olun.

    Screenshot of the Visual Studio option to turn on integration with the Azure Developer CLI.

API çözümünü açma

  1. Todo.Api.sln Çözümü dizininde /src/api açın.

    Tümleştirme özelliğini etkinleştirdiyseniz azd dosya azure.yaml algılanır. Visual Studio, uygulama modelini otomatik olarak başlatır ve çalıştırır azd env refresh.

  2. Tüm bağımlılıkları görmek için Bağlan Hizmetler'i genişletin.

    Azure Uygulaması Hizmetinde çalışan web ön ucu API çözümünün bir parçası olmasa da algılanıp Hizmet Bağımlılıkları'nın altına eklenir

    Screenshot of the message indicating the Azure Developer CLI is initialized.

Çalıştırma ve hata ayıklama

  1. Projenizin src/api dizininden dosyasını açın ListController.cs.

  2. 20. satırda bir kesme noktası ayarlayın.

    Screenshot of the breakpoint set in the sample code.

  3. <F5> işaretine basın.

  4. Web sunucusunun 3101 numaralı bağlantı noktasında dinlediğini belirten iletiyi bekleyin.

    Screenshot of the status bar message indicating the debugger is listening on port 3101.

  5. Tercih ettiğiniz tarayıcıya aşağıdaki adresi girin: https://localhost:3101/lists

  6. Daha önce ayarladığınız kesme noktasına isabet edildiğinde uygulama yürütme duraklatılır. Bu noktada, aşağıdakiler gibi standart hata ayıklama görevlerini gerçekleştirebilirsiniz:

    • Değişkenleri inceleme
    • Çağrı yığınına bakın
    • Diğer kesme noktalarını ayarlama

  7. Uygulamayı çalıştırmaya devam etmek için basın <F5> .

    Örnek uygulama, web ön ucunu daha önce başlatmadıysanız bir liste (veya boş bir liste [] döndürür):

    [{"id":"fb9c1cb3811349b993421fc0e815c4c1","name":"My List","description":null,"createdDate":"2022-06-27T01:10:16.7721172+00:00","updatedDate":null}]

Diğer azd tümleştirmeler

Ortamı yönetme azd

Ortamı yönetmek azd için:

  1. Hizmet Bağımlılıkları bölmesinin sağ üst köşesinde ... öğesini seçin.

  2. Açılan menüde aşağıdaki seçeneklerden birini belirleyin:

    • Yeni bir ortam oluşturun
    • Belirli bir ortamı geçerli etkin ortam olarak seçme ve ayarlama
    • Ortamın sağlamasını kaldırma

    Screenshot of the options to manage the Azure Developer CLI environment in Visual Studio.

Ortam kaynaklarını sağlama

Ortamınıza Azure kaynakları sağlayabilirsiniz.

  1. Bağlan ed Services'da, ortam kaynaklarını geri yüklemek/sağlamak için sağ üstteki simgeye tıklayın.

    Screenshot of option to provision Azure Developer CLI environment resources in Visual Studio.

  2. Ortam adını, aboneliği ve konumu onaylayın.

Uygulamanızı yayımlama

Herhangi bir güncelleştirme yaparsanız, aşağıdaki adımları uygulayarak uygulamanızı yayımlayabilirsiniz:

  1. Çözüm Gezgini Bağlan Hizmetler'i genişletin.

  2. Yayımla'yı seçin.

  3. Yayımlama profili ekle'yi seçin.

  4. Bir Azure hedefiseçin ve İleri'yi seçin.

  5. Azure Geliştirici CLI Ortamı'nın ardından İleri'yi seçin.

    Screenshot of message in Debug Console indicating debugger is listening on port 3100.

  6. Ortamı seçin.

  7. Bitir'i seçin.

Diğer kaynaklar

Yardım isteme

Azure Geliştirici CLI'sı için hata oluşturma, yardım isteme veya yeni bir özellik önerme hakkında bilgi için lütfen sorun giderme ve destek sayfasını ziyaret edin.

Sonraki adımlar

GitHub Actions kullanarak işlem hattı yapılandırma ve güncelleştirmeleri gönderme