Erkunden und Anpassen einer Azure Developer CLI-Vorlage

In dieser Schnellstartanleitung erkunden und anpassen Sie eine Azure Developer CLI-Vorlage. Die Vorlage "hello-azd " bietet einen einfachen Ausgangspunkt zum Erstellen und Bereitstellen von Anwendungen in Azure mithilfe der Azure Developer CLI (azd). Diese Schnellstartanleitung erweitert die konzepte, die in der Schnellstartanleitung – Bereitstellen eines Azd-Vorlagenartikels veranschaulicht werden.

Voraussetzungen

Um diese Schnellstartanleitung in Ihrem Browser abzuschließen, benötigen Sie Folgendes:

  • Zugriff auf GitHub-Codespaces

Alternativ können Sie diesen Schnellstart mit lokalen Tools ausführen:

Erkunden der Azure Developer CLI-Vorlagenstruktur

azd Vorlagen sind Standardcoderepositorys mit zusätzlichen Ressourcen. Alle azd Vorlagen verwenden eine ähnliche Dateistruktur basierend auf azd Konventionen:

  • infra-Ordner- Enthält die alle Bicep- bzw. Terraform-Infrastructure-as-Code-Dateien für die azd-Vorlage. azd führt diese Dateien aus, um die azure-Ressourcen zu erstellen, die von Ihrer App benötigt werden.
  • src ordner – Enthält den App-Quellcode. azd packt und stellt den Code basierend auf den Konfigurationen in azure.yaml bereit.
  • azure.yaml datei – Eine Konfigurationsdatei, die Quellcodeordner in Ihrem Projekt Azure-Ressourcen zuordnet, die im Ordner für die infra Bereitstellung definiert sind. Sie können z. B. einen API-Dienst und einen Web-Front-End-Dienst in separaten Ordnern definieren und diesen verschiedenen Azure-Ressourcen für die Bereitstellung zuordnen.
  • .azure folder – Enthält wichtige Azure-Konfigurationen, z. B. den Speicherort für die Bereitstellung von Ressourcen.

Die meisten azd Vorlagen entsprechen beispielsweise der folgenden Ordnerstruktur:

Screenshot: Azure Developer CLI-Vorlagenstruktur

Weitere Informationen zur Vorlagenstruktur finden Sie im Übersichtsartikel zu azd.

Einrichten der Beispielvorlage

hello-azd ist eine Beispielvorlage, die für die Darstellung wesentlicher Features azd konzipiert ist, die Sie mithilfe eines einzigen Befehls in Azure bereitstellen können. Die Vorlage bietet eine benutzerfreundliche Benutzeroberfläche mit Informationen zu azd und einem kleinen Demotool, mit dem Sie Supporttickets hochladen und anzeigen können.

Die Vorlage unterstützt die folgenden Features:

  • Paketieren und Bereitstellen einer containerisierten App für Azure Container Apps
  • Erstellt die von der App benötigten Azure-Ressourcen, z. B. eine Azure Cosmos DB-Datenbank
  • Kann mithilfe des Befehls automatisch azd pipeline config

Führen Sie die folgenden Schritte aus, um die Vorlage einzurichten:

  1. Öffnen Sie das Hello-azd-Vorlagen-Repository auf GitHub.

  2. Wählen Sie die Schaltfläche "Code " und dann "Codespaces" aus.

  3. Erstellen Sie einen neuen Codespace, um eine vollständig konfigurierte Entwicklungsumgebung in Ihrem Browser zu starten. Möglicherweise müssen Sie einen Moment warten, bis die Umgebung initialisiert wird.

  4. Nachdem die Codespaces-Umgebung geladen wurde, initialisieren Sie die azd Vorlage mit dem azd init Befehl:

    azd init -t hello-azd

  5. Wenn Sie dazu aufgefordert werden, geben Sie einen Namen für die azd-Umgebung ein, z. B.: helloazd.

Untersuchen der Vorlage

Wenn die Vorlage in Ihrem Wahltool geöffnet ist, können Sie die Ordnerstruktur durchsuchen, um zu erkunden, wie azd Vorlagen funktionieren:

  1. Erweitern Sie den src Ordner, um den Quellcode der App anzuzeigen.

    • Die hello-azd-Vorlage enthält eine containerisierte .NET-App, die eine einfache Benutzeroberfläche zum Anzeigen von azd und Verwalten von Beispielticketdaten bereitstellt. azd unterstützt auch andere Sprachen wie JavaScript und Python.
    • Wenn Sie ausführen azd up, wird die App als Containerimage verpackt und in Azure-Container-Apps bereitgestellt.

  2. Erweitern Sie den infra Ordner, um die Infrastruktur als Codedateien zu erkunden.

    • Diese Vorlage verwendet Bicep-Dateien (.bicep) zum Erstellen von Azure-Ressourcen, sie können aber auch Terraform (.tf) verwenden.

    • Die main.bicep Datei erstellt Azure-Ressourcen, indem auf andere Bicep-Module im infra Ordner verwiesen wird, z. B. ein Azure Storage-Konto:

      // 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. Öffnen Sie die azure.yaml-Datei im Stammverzeichnis der Vorlage, um die wesentlichen Vorlagenkonfigurationen anzuzeigen:

    • Die Vorlage definiert einen Dienst namens aca.

    • Die aca-Dienstkonfiguration weist azd an, den Quellcode im src-Ordner in der Azure-Container-App zu packen und bereitzustellen, die von den zuvor beschriebenen Bicep-Modulen bereitgestellt wurde.

    • Die docker Konfigurationen weisen azd an, die App als Container zu packen und bereitzustellen.

      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

Aktualisieren der Vorlage

Sie können Änderungen an der Vorlage vornehmen, um die bereitgestellte App und Ressourcen zu beeinflussen. In diesem Beispiel nehmen Sie zwei kleine Änderungen an der App vor und untersuchen die bereitgestellten Ergebnisse:

  • Aktualisieren des Begrüßungstexts der App-Kopfzeile mit der eigenen Nachricht
  • Aktualisieren des erstellten Speicherkontos, sodass zwei Blobcontainer anstelle eines erstellt werden

Führen Sie die folgenden Schritte aus, um diese Änderungen vorzunehmen:

  1. Öffnen Sie die src > Components > Pages Komponente im Home.razor Ordner.

  2. Ersetzen Sie den Kopfzeilentext von Hello, Azure Developer CLI! oben auf der Seite durch eine andere Nachricht, z. B. Hello, angepasste Vorlage! und speichern Sie Ihre Änderungen.

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

  3. Öffnen Sie die infra Datei im main.bicep Ordner.

  4. Suchen Sie den Bicep-Codeblock in der Nähe der Zeile 75, der ein Speicherkonto und einen BLOB-Container erstellt:

    // 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'
      }
    ]
  }
}

    Ersetzen Sie den Code durch den folgenden Ausschnitt:

    // 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'
      }
    ]
  }
}

Vorlage ausführen

Nachdem Sie Ihre Änderungen vorgenommen haben, verwenden Sie den azd up Befehl, um die App-Ressourcen bereitzustellen und einzusetzen.

  1. Öffnen Sie ein Terminal im Projektverzeichnis.

  2. Führen Sie den azd up Befehl aus, um die Vorlage bereitzustellen und zu implementieren.

    azd up

    Dieser Befehl bewirkt Folgendes:

    • Verpacken der App für die Bereitstellung
    • Bereitstellen der erforderlichen Azure-Ressourcen
    • Stellen Sie Ihre Anwendung mit den aktualisierten Änderungen bereit
    • Drucken der URL für die bereitgestellte Anwendung

  3. Um Ihre aktualisierte Anwendung live anzuzeigen, öffnen Sie die URL, die in den azd Konsolenausgabeprotokollen in Ihrem Browser gedruckt wird.

    Screenshot des aktualisierten App-Headers.

  4. Um die beiden erstellten Blobcontainer anzuzeigen, navigieren Sie zum erstellten Speicherkonto im Azure-Portal.

    Screenshot der erstellten BLOB-Container.

Schlussfolgerung

In dieser Schnellstartanleitung haben Sie die Struktur der hello-azd Vorlage untersucht, ihre Anwendung und Infrastruktur angepasst und mithilfe der Azure Developer CLI in Azure bereitgestellt. Für fortgeschrittenere Szenarien erkunden Sie weitere Vorlagen oder beschäftigen Sie sich eingehender mit der azd-Dokumentation.

Nächste Schritte

  • Last updated on