Menjalankan dan men-debug aplikasi yang mendukung Azure Developer CLI

Jalankan dan debug aplikasi di komputer lokal Anda menggunakan ekstensi Visual Studio Code untuk Azure Developer CLI (azd). Dalam panduan ini, Anda akan menggunakan React Web App dengan Node.js API dan MongoDB pada templat Azure . Anda dapat menerapkan prinsip yang Anda pelajari dalam artikel ini ke salah satu templat Azure Developer CLI.

Prasyarat

• Menginstal azd
• Jalankan azd dengan templat Node.js
• Node.js dengan npm (v 16.13.1 LTS)

Menginstal ekstensi Visual Studio Code untuk Azure Developer CLI

Melalui Visual Studio Code

1. Buka Visual Studio Code.

2. Dari menu Tampilan, pilih Ekstensi.

3. Di bidang pencarian, masukkan Azure Developer CLI.

4. Pilih Instal.

Melalui Marketplace

1. Menggunakan browser Anda, buka halaman Ekstensi Azure Developer CLI - VS Code.

2. Pilih Instal.

Menginisialisasi aplikasi baru

1. Buat dan buka direktori baru di Visual Studio Code.

2. Dari menu Tampilan, pilih Pallet Perintah....

3. Ketik dan pilih Azure Developer: init.

   

4. Pilih templat Azure-Samples/todo-nodejs-mongo.

   

Jelajahi file berikut yang disertakan .vscode dalam direktori:

File	Deskripsi
launch.json	Menentukan konfigurasi debug seperti Debug Web dan Debug API. untuk melihat opsi konfigurasi debug, pilih Jalankan dari menu Tampilan . Konfigurasi debug yang tersedia tercantum di bagian atas panel. Untuk mempelajari selengkapnya tentang penelusuran kesalahan di Visual Studio Code, lihat Penelusuran kesalahan.
tasks.json	Menentukan konfigurasi untuk memulai server web atau API. Untuk melihat opsi konfigurasi ini, buka Palet Perintah dan jalankan Tugas: jalankan tugas. Untuk mempelajari selengkapnya tentang Tugas Visual Studio Code, lihat Mengintegrasikan dengan Alat Eksternal melalui Tugas.

Catatan

Jika Anda menggunakan templat C# SWA-func MS SQL, Anda harus memulai tugas Start API secara manual lalu Debug API (F5). Ketika diminta untuk memilih dari daftar proses .NET yang sedang berjalan, cari nama aplikasi Anda dan pilih.

Memprovisikan sumber daya Azure

Sebelum Anda mulai men-debug, provisikan sumber daya Azure yang diperlukan.

1. Buka Palet Perintah.

2. Masukkan Pengembang Azure: memprovisikan sumber daya Azure.

   

Men-debug API

Api Debug konfigurasi debug secara otomatis menjalankan server API dan melampirkan debugger. Untuk menguji pola ini, lakukan langkah-langkah berikut:

1. Dari direktori proyek src/api/src/routes Anda, buka lists.ts.

2. Atur titik henti pada baris 16.

3. Di Bilah Aktivitas, pilih jalankan dan Debug debug>konfigurasi >API Debug Mulai panah Debugging.

   

4. Dari menu Tampilan , pilih Konsol Debug.

5. Tunggu pesan yang menunjukkan debugger mendengarkan port 3100.

   

6. Di shell terminal pilihan Anda, masukkan perintah berikut: curl http://localhost:3100/lists

   

7. Saat titik henti yang Anda tetapkan sebelumnya terpukul, eksekusi aplikasi akan dijeda. Pada titik ini, Anda dapat melakukan tugas penelusuran kesalahan standar, seperti:

   • Memeriksa variabel
   • Lihat tumpukan panggilan
   • Atur titik henti lainnya.

8. Tekan <F5> untuk terus menjalankan aplikasi. Aplikasi sampel mengembalikan daftar kosong.

Men-debug aplikasi React Frontend

Untuk menggunakan konfigurasi Web Debug, Anda harus memulai keduanya:

• Server API
• Server web pengembangan

Untuk menguji pola ini, lakukan langkah-langkah berikut:

1. Buka Palet Perintah dan jalankan Tugas: Jalankan tugas.

   

2. Masukkan dan pilih Mulai API dan Web

   

   Anda dapat memeriksa apakah server web lokal berjalan dengan menavigasi ke URL berikut di browser web: http://localhost:3000.

3. Di direktori proyek src/web/src/components Anda, buka todoItemListPane.tsx.

4. Atur titik henti pada baris 150 (baris deleteItems pertama fungsi).

5. Di Bilah Aktivitas, pilih Konfigurasi debug Web Jalankan dan Debug>Debug > panah Mulai Penelusuran Kesalahan.

   

6. Menjalankan aplikasi web akan menyebabkan browser default Anda membuka URL berikut: http://localhost:3000. Sekarang Anda dapat men-debug aplikasi dengan menambahkan item, memilihnya dari daftar, dan memilih Hapus.

   

7. Saat titik henti yang Anda tetapkan sebelumnya terpukul, eksekusi aplikasi akan dijeda. Pada titik ini, Anda dapat melakukan tugas penelusuran kesalahan standar, seperti:

   • Memeriksa variabel
   • Lihat tumpukan panggilan
   • Mengatur titik henti lainnya

8. Tekan <F5> untuk terus menjalankan aplikasi dan item yang dipilih akan dihapus.

Jalankan dan debug aplikasi yang dibangun di komputer lokal Anda menggunakan Visual Studio dan Azure Developer CLI (azd). Dalam panduan ini, Anda akan menggunakan Aplikasi Web React dengan C# API dan MongoDB di templat Azure . Anda dapat menerapkan prinsip yang Anda pelajari dalam artikel ini ke salah satu templat Azure Developer CLI.

Prasyarat

• Menginstal azd
• Jalankan azd dengan templat Node.js
• NET SDK 6.0

Menginstal dan mengaktifkan fitur pratinjau

1. Menginstal Pratinjau Visual Studio

   Catatan

   Ini berbeda dari Visual Studio. Jika Anda memiliki versi Visual Studio non-pratinjau, Anda masih perlu menginstal ini.

2. Buka Pratinjau Visual Studio.

3. Dari menu Alat, pilih Opsi>Fitur Pratinjau.

4. Pastikan Integrasi dengan azd, Azure Developer CLI diaktifkan.

   

Buka solusi API

1. Todo.Api.sln Buka solusi di /src/api direktori.

   Jika Anda telah mengaktifkan azd fitur integrasi, azure.yaml file akan terdeteksi. Visual Studio secara otomatis menginisialisasi model aplikasi dan menjalankan azd env refresh.

2. Perluas Layanan Koneksi untuk melihat semua dependensi.

   Meskipun front-end web yang berjalan di Azure App Service bukan bagian dari solusi API, itu terdeteksi dan disertakan di bawah Dependensi Layanan

   

Jalankan dan debug

1. Dari direktori proyek src/api Anda, buka ListController.cs.

2. Atur titik henti di baris 20.

   

3. Tekan <F5>.

4. Tunggu pesan yang menunjukkan server web mendengarkan port 3101.

   

5. Di browser pilihan Anda, masukkan alamat berikut: https://localhost:3101/lists

6. Saat titik henti yang Anda tetapkan sebelumnya terpukul, eksekusi aplikasi akan dijeda. Pada titik ini, Anda dapat melakukan tugas penelusuran kesalahan standar, seperti:

   • Memeriksa variabel
   • Lihat tumpukan panggilan
   • Mengatur titik henti lainnya

7. Tekan <F5> untuk terus menjalankan aplikasi.

   Aplikasi sampel mengembalikan daftar (atau daftar kosong [] jika Anda belum meluncurkan front-end web sebelumnya):

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

Integrasi lainnya azd

Kelola azd lingkungan

Untuk mengelola azd lingkungan:

1. Pilih ... di sudut kanan atas panel Dependensi Layanan.

2. Pilih salah satu opsi berikut di menu dropdown:

   • Membuat lingkungan baru
   • Memilih dan mengatur lingkungan tertentu sebagai lingkungan aktif saat ini
   • Mendeprovisi lingkungan

   

Memprovisikan sumber daya lingkungan

Anda dapat memprovisikan sumber daya Azure ke lingkungan Anda.

1. Di Layanan Koneksi, klik ikon di kanan atas untuk memulihkan/menyediakan sumber daya lingkungan.

   

2. Konfirmasikan nama lingkungan, langganan, dan lokasi.

Memublikasikan aplikasi Anda

Jika Anda membuat pembaruan, Anda dapat memublikasikan aplikasi dengan melakukan langkah-langkah berikut:

1. Di Penjelajah Solusi, perluas Layanan Koneksi.

2. Pilih Terbitkan.

3. Pilih Tambahkan profil publikasi.

4. Pilih TargetAzure, dan pilih Berikutnya.

5. Pilih Lingkungan CLI Pengembang Azure, dan pilih Berikutnya.

   

6. Pilih lingkungan.

7. Pilih Selesai.

Sumber daya lainnya

• Layanan Koneksi Visual Studio
• Gambaran Umum Alat Penerbitan di Visual Studio

Meminta bantuan

Untuk informasi tentang cara mengajukan bug, meminta bantuan, atau mengusulkan fitur baru untuk Azure Developer CLI, silakan kunjungi halaman pemecahan masalah dan dukungan .

Langkah berikutnya

Mengonfigurasi pembaruan alur dan push menggunakan GitHub Actions