Schnellstart: Entwickeln von Azure Anwendungen mit agentgestützter KI

Verwenden Sie in dieser Schnellstartanleitung GitHub Copilot, um eine React to-do-Anwendung zu erstellen und mithilfe der KI-unterstützten Entwicklung auf Azure App Service bereitzustellen. Beginnen Sie bei der lokalen Entwicklung mit Copilot Planmodus, um einen detaillierten Implementierungsplan zu erstellen, und wechseln Sie dann zum Erstellen und Bereitstellen in den Agentmodus. Wenn Sie VS Code für das Web verwenden, nutzen Sie durchgehend den Agentmodus. Am Ende haben Sie praktische Erfahrungen mit:

  • GitHub Copilot Planmodus um Ihr Projekt zu erforschen und Implementierungspläne zu erstellen (lokale Entwicklung)
  • GitHub Copilot Agentenmodus zum Erstellen des Grundgerüsts, Konfigurieren und Bereitstellen einer vollständigen Anwendung
  • Azure Skills um Copilot mit Azure spezifischen Kenntnissen und Tools zu verbessern
  • Eine funktionierende to-do-App, die auf Azure App Service ausgeführt wird
  • Ein API-Endpunkt für Ihre to-do-App
  • Azure Developer CLI (azd) zur Bereitstellung und Implementierung von Azure-Ressourcen aus einer Infrastrukturvorlage

Im Planmodus kann Copilot Ihre Codebasis analysieren und einen strukturierten Implementierungsplan erstellen, bevor Sie überhaupt Code schreiben, und so sicherstellen, dass Ihre Anforderungen klar und Ihr Ansatz fundiert ist. Im Agentenmodus kann Copilot Befehle autonom ausführen, Dateien bearbeiten und Fehler iterativ beheben. Sie geben das Ziel an, und Copilot bestimmt die Schritte.

Voraussetzungen

Keine lokale Installation erforderlich. VS Code für das Web (vscode.dev/azure) bietet Ihnen eine browserbasierte VS Code-Umgebung mit der Azure Developer CLI, Node.jsund mehreren vorinstallierten Azure Erweiterungen.

Screenshot: Erstellen eines neuen Arbeitsbereichs

  1. Öffnen Sie vscode.dev/azure in Ihrem Browser.

  2. Melden Sie sich mit Ihrem Azure-Konto an, wenn Sie dazu aufgefordert werden.

  3. Erstellen Sie im Terminalfenster ein neues Verzeichnis für Ihr Projekt, und ändern Sie es.

    mkdir todo-app && cd todo-app

Aktivieren von Azure Fähigkeiten

Azure Skills bietet Copilot kuratierte Azure Know-how, Workflows und Guardrails, damit der Agent fundierte Entscheidungen über Azure Dienste, Infrastruktur und Bereitstellung treffen kann. Die Azure MCP-Erweiterung installiert eine Begleiterweiterung, die die Azure Fähigkeiten in VS Code bringt. Zusammen konfigurieren sie den Azure MCP-Server, Foundry MCP und die vollständige Kompetenzebene automatisch. Weitere Informationen finden Sie im Repository Azure Skills Plugin.

  1. Öffnen Sie die Befehlspalette.
  2. Wählen Sie MCP aus: Server auflisten.
  3. Wenn der Azure MCP-Server nicht ausgeführt wird, starten Sie ihn, indem Sie Azure MCP>Startserver auswählen.

Planen Ihrer Anwendung

Planmodus ermöglicht es Copilot, Ihr Projekt zu recherchieren und einen detaillierten Implementierungsplan zu generieren, bevor Code geschrieben wird. Sie überprüfen und verfeinern den Plan und übergeben ihn dann zur Ausführung an den Agentmodus.

  1. Öffnen Sie die Ansicht Copilot Chat, indem Sie das Chatsymbol in der Aktivitätsleiste auswählen.

  2. Melden Sie sich bei GitHub Copilot an, falls noch nicht geschehen. Wählen Sie die Schaltfläche GitHub Copilot Logo Sign-in in der Statusleiste Visual Studio Code aus, und folgen Sie den Anweisungen zur Authentifizierung mit Ihrem GitHub Konto.

  3. Wählen Sie im Chatfenster Plan aus dem Dropdownmenü „Agents“ aus oder geben Sie /plan gefolgt von der Beschreibung Ihrer Aufgabe ein.

    Kopieren Sie die folgende Eingabeaufforderung, und fügen Sie sie in den Chatbereich Copilot ein:

    /plan 
Create a Vite + React single-page application (SPA) to-do app
with the following features:
- Add, remove, and mark complete/incomplete to-do items.
- Use localStorage to persist to-do items between sessions.
- Choose low-cost Azure resources.
- Create a deployment template for Azure Developer CLI (azd).
- Create a README file with instructions on how to test, run, and deploy the app.

    Note

    Wenn Sie GitHub Copilot noch nicht eingerichtet haben, werden Sie aufgefordert, sich bei Ihrem GitHub Konto anzumelden und Copilot einzurichten, bevor Sie die Eingabeaufforderung senden können. Wenn Sie nicht über ein Copilot-Abonnement verfügen, sind Sie einem kostenlosen Konto zugeordnet, das Ihnen ein monatliches Limit an Abschlussen und Chatinteraktionen bietet.

  4. Beantworten Sie alle klarstellenden Fragen, die der Plan-Agent nach dem Recherchieren Ihrer Aufgabe stellt. Beispiel: TypeScript oder JavaScript für die React-App? Welcher Stilansatz sollte verwendet werden? Sollte die Azd-Vorlage einen GitHub Actions CI/CD-Workflow enthalten?

  5. Überprüfen Sie den generierten Plan. Ihr Plan sieht ungefähr wie folgt aus:

    Plan: Vite + React To-Do SPA with Azure Deployment
A Vite + React + TypeScript SPA scaffolded inside todo-app, with localStorage persistence,
and deployed to Azure Static Web Apps (Free tier) via azd. 
No backend required — all state is client-side.
...

    Der Plan-Agent erstellt eine allgemeine Zusammenfassung, Implementierungsschritte und Überprüfungsschritte. Sie können weitere Prompts eingeben, um den Plan zu überarbeiten, bis er Ihren Anforderungen entspricht.

Agentmodus

Der Agentmodus bietet GitHub Copilot die Möglichkeit, Terminalbefehle auszuführen, Dateien zu erstellen und zu bearbeiten, und selbstkorrektur, wenn etwas schief geht. Sie stellen ein übergeordnetes Ziel bereit, und der Agent entscheidet, welche Schritte ausgeführt werden sollen.

  1. Wählen Sie Claude Sonnet 4.6-Modell , Agent-Modus und Autopilot (Vorschau) im Chatbereich aus.

    • Mit dem Standardmodell Auto können Copilot das beste Modell für jeden Schritt dynamisch auswählen. Verwenden Sie für diese Schnellstartanleitung ein bestimmtes Modell wie Claude Sonnet 4.6, um ein deterministisches Verhalten zu erhalten, damit die schritte, die Copilot zur Implementierung Ihres Plans ergreifen, besser vorhersehbar sind.
    • Agentmodus und Autopilot ermöglichen Copilot, Terminalbefehle auszuführen und Dateiänderungen autonom vorzunehmen. Der Autopilot-Modus bietet Copilot die Möglichkeit, sich selbst zu korrigieren und zu iterieren, ohne weitere Eingaben von Ihnen zu benötigen. Wenn Sie mehr Kontrolle bevorzugen, wählen Sie den Standardgenehmigungsmodus aus, um jeden Schritt zu genehmigen, bevor er ausgeführt wird.

  2. Wählen Sie im Chatbereich "Implementierung starten" oder "Mit Autopilot starten " aus, um den Plan für die Ausführung an den Agentmodus zu übergeben. Der Autopilot-Modus ermöglicht es Copilot, iterativ zu arbeiten, ohne dass weitere Eingaben von Ihnen erforderlich sind. Wenn Sie mehr Kontrolle bevorzugen, wählen Sie den Standardgenehmigungsmodus aus, um jeden Schritt zu genehmigen, bevor er ausgeführt wird.

Wenn Copilot die Implementierung abgeschlossen hat, wird die Ausgabe im Chatbereich ähnlich wie folgt angezeigt:

All done. Here's a summary of what was built:

App (src/)

src/types.ts — Todo interface
src/hooks/useTodos.ts — addTodo, removeTodo, toggleTodo with localStorage persistence
src/components/TodoForm.tsx, TodoItem.tsx, TodoList.tsx — UI components
src/App.tsx — wired together with task remaining counter
src/App.css / src/index.css — vanilla CSS, light/dark mode
Azure / azd

azure.yaml — host: staticwebapp, dist: dist
infra/main.bicep — subscription-scoped resource group + Static Web App (Free tier)
infra/staticwebapp.bicep, main.parameters.json, abbreviations.json
Docs — README.md with local dev, build, azd up deploy, and azd down teardown instructions.

Build passes with no errors (tsc + Vite). Run npm run dev to start locally, 
or azd up to provision and deploy to Azure.

Die App ist jetzt mit den angegebenen Features gerüstet, und die Azure Infrastrukturvorlage ist bereit für die Bereitstellung. Die README-Datei enthält Anweisungen zum Testen und Bereitstellen der App. Testen Sie vor der Bereitstellung für Azure die App lokal, um zu bestätigen, dass sie erwartungsgemäß funktioniert.

Testen der App

Je nachdem, wie Sie Während des Planungsmodus Fragen beantwortet haben, hängt das lokale Testen Ihrer App möglicherweise von der Implementierung ab. Überprüfen Sie die README-Datei für lokale Tests.

Wenn die Anwendung ein Vite + React SPA ist, wie in den Planungsschritten generiert, starten Sie den Entwicklungsserver mit dem folgenden Befehl:

npm install && npm run dev

Der Befehl startet den Vite-Entwicklungsserver. Die Terminalausgabe enthält die localhost-URL, in der die App ausgeführt wird.

  VITE v5.4.21  ready in 271 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Öffnen Sie im Tab Ports die Port-URL Weitergeleitete Adresse in Ihrem Browser, um die To-do-App im Browser zu sehen.

Screenshot der Registerkarte

Testen Sie die Funktionalität, indem Sie Aufgaben hinzufügen, umschalten und entfernen, um sicherzustellen, dass alles wie erwartet funktioniert.

Screenshot der To-Do-App, der 2 von 3 verbleibenden Aufgaben, eine abgeschlossene Aufgabe und ein Eingabefeld zum Hinzufügen neuer Aufgaben zeigt.

Wenn Sie mit dem Testen fertig sind, beenden Sie den Entwicklungsserver, indem Sie im Terminal drücken Ctrl + C .

Fragen zu Azure Diensten

Nachdem Sie nun über eine funktionierende App verfügen, fragen Sie den Agenten, welche Azure-Dienste sich gut zum Hosten der App und zum Speichern persistenter Daten eignen.

Kopieren Sie die folgende Eingabeaufforderung, und fügen Sie sie ein:

I want to change the storage persistence. What are my no-cost or low-cost storage options for this app in Azure?

Der Agent verwendet Azure Fähigkeiten, um die Architektur, die Datenspeicheranforderungen und API-Muster Ihrer App zu analysieren, um einen geeigneten Azure Dienst zum Hosten Ihrer to-do Daten zu empfehlen. Der Agent berücksichtigt Faktoren wie Kosten, Skalierbarkeit, Einfache Integration und Eignung für die Arbeitsauslastung der App. Der Agent erläutert dann seine Empfehlung wie das folgende Beispiel:

For this to-do app, these are the best no-cost or low-cost Azure persistence options, ordered from cheapest/simple to stronger capability.

1. Azure Cosmos DB for NoSQL with free tier
- Cost profile: can be zero if you stay within free-tier limits.
- Best for: JSON to-do items, easy API fit, good scaling path.
- Pros: schema-flexible, globally available, SDK support, free tier available.
- Cons: RU-based model can become costly if queries are inefficient.
- Good default choice if you want cloud-native persistence with minimal redesign.

2. Azure Table Storage
- Cost profile: typically very low (often cents to a few dollars at small scale).
- Best for: simple key-based to-do storage.
- Pros: cheapest at low volume, straightforward, durable.
- Cons: limited query features versus Cosmos DB/SQL.
- Great choice if your app only needs basic CRUD by id/user partition.
...

In Azure bereitstellen

Nachdem Sie die App lokal getestet und bestätigt haben, dass sie wie erwartet funktioniert, stellen Sie sie auf Azure bereit, damit sie in der Cloud ausgeführt wird.

  1. Da Sie azd zum Bereitstellen verwenden, melden Sie sich im Terminal bei Azure an, falls Sie noch nicht angemeldet sind. Laufen:

    azd auth login

  2. Stellen Sie die Anwendung für Azure bereit.

    azd up

    Wählen Sie einen eindeutigen Umgebungsnamen für die Bereitstellung aus, wenn Sie dazu aufgefordert werden. Dieser Name wird verwendet, um eine Ressourcengruppe in Azure zu erstellen und muss global eindeutig sein.

    Wählen Sie das Azure Abonnement aus, für das Sie bereitstellen möchten, wenn Sie dazu aufgefordert werden.

Der Befehl azd up stellt die im Ordner infra/ definierten Azure Ressourcen bereit, erstellt die Anwendung und stellt sie für Azure bereit. Die Terminalausgabe enthält die URL Ihrer bereitgestellten App.

Troubleshooting

Wenn die Bereitstellung fehlschlägt oder die Live-Website die generierten Produktionsdateien nicht bereitstellt, verwenden Sie den folgenden Prompt, damit der Agent die Bereitstellung automatisch diagnostiziert und behebt.

Deploy the app using `azd up`. If deployment is misconfigured, diagnose and fix automatically until the live site serves built production files, not source or default pages.
Final verification must confirm HTML references production assets and that the main JS/CSS asset URLs return HTTP 200.
Update the README. Return a concise summary and the app website URL.

Während der Entwicklung können Sie GitHub Copilot verwenden, um Probleme zu debuggen. Wenn ein Fehler auftritt, kopieren Sie die Fehlerausgabe und fügen Sie sie in das Chatfenster ein und bitten Sie den Assistenten, Ihnen dabei zu helfen, das Problem zu verstehen und zu beheben.

Entdecken Sie Ihre bereitgestellten Ressourcen

Verwenden Sie die bereitgestellte App-URL aus der Terminalausgabe oder GitHub Copilot Chat, um in einem Browser darauf zuzugreifen. Wechseln Sie zu Ihrer App, und testen Sie, ob sie wie erwartet in der Cloud funktioniert. Hinzufügen, Umschalten und Entfernen von Aufgaben, um sicherzustellen, dass alles funktioniert.

Screenshot der bereitgestellten To-Do-Web-App auf Azure Static Web Apps mit zwei abgeschlossenen Aufgaben und einer verbleibenden Aufgabe.

Sie können Ihre Azure Ressourcen direkt in VS Code erkunden.

  1. Öffnen Sie die Azure Ansicht, indem Sie in der Aktivitätsleiste das symbol Azure auswählen.
  2. Wählen Sie im Knoten "Ressourcen" das Symbol " Gruppieren nach " und dann " Nach Ressourcengruppe gruppieren " aus, um Ressourcen nach ihren Ressourcengruppen zu organisieren.
  3. Erweitern Sie Ressourcen, und suchen Sie die Ressourcengruppe für die Bereitstellung, die durch azd up erstellt wurde.
  4. Erweitern Sie die Ressourcengruppe, um die bereitgestellten Dienste anzuzeigen, z. B. den App Service, der Ihre Web-App hostet, sowie alle anderen Ressourcen, die von azd up erstellt wurden.
  5. Klicken Sie mit der rechten Maustaste auf die Web-App, und wählen Sie Browse-Website aus, um Ihre bereitgestellte to-do App zu öffnen, oder wählen Sie Ansicht in Portal aus, um die Ressource in der Azure-Portal und der Bereitstellungs-URL anzuzeigen.

Bereinigen von Ressourcen

Wenn Sie damit fertig sind, löschen Sie die Azure-Ressourcen, um Gebühren zu vermeiden:

azd down

Mit diesem Befehl werden alle Azure Ressourcen gelöscht, die während der Bereitstellung erstellt wurden, einschließlich der Ressourcengruppe.

Nächste Schritte

Sie haben den Planmodus und den Agentmodus von GitHub Copilot verwendet, um eine React-To-do-App zu planen, ihr Grundgerüst zu erstellen und sie in Azure bereitzustellen, ohne Code manuell zu schreiben. Bauen Sie weiter auf dem, was Sie gelernt haben:

  • Last updated on