Menjelajahi dan mengkustomisasi templat Azure Developer CLI

Dalam panduan cepat ini, Anda akan menjelajahi dan menyesuaikan templat Azure Developer CLI. Templat hello-azd menyediakan titik awal sederhana untuk membangun dan menyebarkan aplikasi ke Azure menggunakan Azure Developer CLI (azd). Panduan mulai cepat ini memperluas konsep yang ditunjukkan di artikel Mulai Cepat - Menyebarkan templat azd.

Prasyarat

Untuk menyelesaikan panduan memulai cepat ini, Anda memerlukan di browser:

  • Akses ke GitHub Codespaces

Atau, untuk menyelesaikan panduan cepat ini menggunakan alat-alat lokal:

Menjelajahi struktur templat Azure Developer CLI

azd templat adalah repositori kode standar dengan aset tambahan yang disertakan. Semua azd templat berbagi struktur file serupa berdasarkan azd konvensi:

  • infra folder - Berisi semua infrastruktur Bicep atau Terraform sebagai file kode untuk templat azd. azd menjalankan file-file ini untuk membuat sumber daya Azure yang diperlukan oleh aplikasi Anda.
  • src folder - Berisi kode sumber aplikasi. azd mengemas dan menyebarkan kode berdasarkan konfigurasi di azure.yaml.
  • azure.yaml file - File konfigurasi yang memetakan folder kode sumber dalam proyek Anda ke sumber daya Azure yang didefinisikan dalam folder untuk tujuan penyebaran. Misalnya, Anda dapat menentukan layanan API dan layanan front-end web di folder terpisah dan memetakannya ke sumber daya Azure yang berbeda untuk penyebaran.
  • .azure folder - Berisi konfigurasi Azure penting, seperti lokasi untuk menyebarkan sumber daya.

Misalnya, sebagian besar azd templat cocok dengan struktur folder berikut:

Cuplikan layar yang memperlihatkan struktur templat Azure Developer CLI.

Kunjungi artikel gambaran umum templat Azure Developer CLI untuk detail selengkapnya tentang azd struktur templat.

Menyiapkan templat sampel

hello-azd adalah templat sampel yang dirancang untuk menampilkan fitur azd penting yang dapat Anda sebarkan ke Azure menggunakan satu perintah. Templat ini menyediakan antarmuka pengguna yang ramah dengan informasi tentang azd dan alat demo kecil yang memungkinkan Anda mengunggah dan melihat tiket dukungan.

Templat mendukung fitur berikut:

  • Mengemas dan menyebarkan aplikasi dalam kontainer ke Azure Container Apps
  • Membuat sumber daya Azure yang diperlukan oleh aplikasi, seperti database Azure Cosmos DB
  • Dapat mengonfigurasi alur CI/CD secara otomatis menggunakan azd pipeline config perintah

Ikuti langkah-langkah berikut untuk menyiapkan templat:

  1. Buka repositori templat hello-azd di GitHub.

  2. Pilih tombol Kode lalu pilih Codespace.

  3. Buat Codespace baru untuk meluncurkan lingkungan pengembangan yang dikonfigurasi sepenuhnya di browser Anda. Anda mungkin perlu menunggu sejenak sampai lingkungan terinisialisasi.

  4. Setelah lingkungan Codespaces dimuat, inisialisasi templat azd menggunakan perintah azd init.

    azd init -t hello-azd

  5. Saat diminta, masukkan nama untuk azd lingkungan, seperti helloazd.

Jelajahi templat

Dengan templat yang dibuka di alat pilihan Anda, Anda dapat menelusuri struktur folder untuk menjelajahi cara kerja azd templat:

  1. src Perluas folder untuk melihat kode sumber aplikasi.

    • Template hello-azd ini mencakup aplikasi .NET terkontainer yang menyediakan UI sederhana untuk mempelajari topik atau konsep azd dan mengelola data tiket sampel. azd juga mendukung bahasa lain seperti JavaScript dan Python.
    • Saat Anda menjalankan azd up, aplikasi dipaketkan sebagai gambar kontainer dan disebarkan ke Azure Container Apps.

  2. infra Perluas folder untuk menjelajahi infrastruktur sebagai file kode.

    • Templat ini menggunakan file Bicep (.bicep) untuk membuat sumber daya Azure, tetapi Anda juga dapat menggunakan Terraform (.tf).

    • File main.bicep membuat sumber daya Azure dengan merujuk modul Bicep lainnya di infra folder, seperti akun Azure Storage:

      // Omitted...

// Create a storage account
module storage './core/storage/storage-account.bicep' = {
    name: 'storage'
    scope: rg
    params: {
    name: !empty(storageAccountName) ? storageAccountName : '${abbrs.storageStorageAccounts}${resourceToken}'
    location: location
    tags: tags
    containers: [
        {
        name: 'attachments'
        }
    ]
    }
}

// Omitted...

  3. Di akar templat, buka azure.yaml file untuk melihat konfigurasi templat penting:

    • Templat mendefinisikan satu layanan yang disebut aca.

    • Konfigurasi aca layanan menginstruksikan azd untuk mengemas dan menyebarkan kode sumber di src folder ke Aplikasi Kontainer Azure yang disediakan oleh modul Bicep yang Anda jelajahi sebelumnya.

    • Konfigurasi docker menginstruksikan azd untuk mengemas dan menyebarkan aplikasi sebagai kontainer.

      metadata:
  template: hello-azd-dotnet  # Specifies the template being used
name: azd-starter  # Name of the project
services:
  aca:  # Define the Azure Container App service
    project: ./src  # Path to the source code
    language: csharp  # Programming language
    host: containerapp  # Hosting service
    docker:
      path: ./Dockerfile  # Location of the Dockerfile

Memperbarui Templat

Anda dapat membuat perubahan pada templat untuk memengaruhi aplikasi dan sumber daya yang disebarkan. Dalam contoh ini, Anda membuat dua perubahan kecil pada aplikasi dan menjelajahi hasil yang disebarkan:

  • Ubah teks selamat datang pada header aplikasi sesuai dengan pesan Anda sendiri
  • Perbarui akun penyimpanan yang dibuat sehingga membuat dua kontainer blob alih-alih satu

Untuk membuat perubahan ini, selesaikan langkah-langkah berikut:

  1. Di folder src > Components > Pages, buka komponen Home.razor.

  2. Ganti teks header Hello, Azure Developer CLI! di bagian atas halaman dengan pesan yang berbeda, seperti Halo, templat yang dikustomisasi! dan simpan perubahan Anda.

    <MudText Typo="Typo.h2" GutterBottom="true">Hello, customized template!</MudText>

  3. Di folder infra, buka file main.bicep.

  4. Temukan blok kode Bicep di sekitar baris 75 yang membuat akun penyimpanan dan kontainer blob:

    // Create a storage account
module storage './core/storage/storage-account.bicep' = {
  name: 'storage'
  scope: rg
  params: {
    name: !empty(storageAccountName) ? storageAccountName : '${abbrs.storageStorageAccounts}${resourceToken}'
    location: location
    tags: tags
    containers: [
      {
        name: 'attachments'
      }
    ]
  }
}

    Ganti kode dengan cuplikan berikut:

    // Create a storage account
module storage './core/storage/storage-account.bicep' = {
  name: 'storage'
  scope: rg
  params: {
    name: !empty(storageAccountName) ? storageAccountName : '${abbrs.storageStorageAccounts}${resourceToken}'
    location: location
    tags: tags
    containers: [
      {
        name: 'attachments'
      },
      {
        name: 'archive'
      }
    ]
  }
}

Jalankan Templat

Setelah membuat perubahan, gunakan azd up perintah untuk memprovisikan dan menyebarkan sumber daya aplikasi:

  1. Buka terminal di direktori proyek.

  2. Untuk memprovisikan dan menyebarkan templat, jalankan azd up perintah :

    azd up

    Perintah ini akan:

    • Mengemas aplikasi untuk penyebaran
    • Menyediakan sumber daya Azure yang diperlukan
    • Menyebarkan aplikasi Anda dengan perubahan yang diperbarui
    • Mencetak URL untuk aplikasi yang disebarkan

  3. Untuk melihat aplikasi yang diperbarui secara langsung, buka URL yang dicetak di azd log output konsol di browser Anda.

    Cuplikan layar memperlihatkan header aplikasi yang diperbarui.

  4. Untuk melihat dua kontainer blob yang dibuat, navigasikan ke akun penyimpanan yang dibuat di portal Microsoft Azure.

    Cuplikan layar memperlihatkan kontainer blob yang dibuat.

Kesimpulan

Dalam panduan cepat ini, Anda mempelajari struktur templat hello-azd, menyesuaikan aplikasi dan infrastrukturnya, serta menyebarkannya ke Azure menggunakan Azure Developer CLI. Untuk skenario yang lebih canggih, jelajahi templat lain atau selaraskan lebih dalam azd dokumentasi.

Langkah selanjutnya

  • Terakhir diperbarui pada