Snabbstart: Utveckla Azure program med agentassisterad AI

I den här snabbstarten använder du GitHub Copilot för att skapa ett React to-do-program och distribuera det till Azure App Service med hjälp av AI-assisterad utveckling. När du utvecklar lokalt börjar du med Copilot planläge för att skapa en detaljerad implementeringsplan och växlar sedan till agentläge för att skapa och distribuera. När du använder VS Code för webben använder du agentläget hela vägen. I slutet har du praktisk erfarenhet av:

  • GitHub Copilot Planläge för att undersöka projektet och skapa implementeringsplaner (lokal utveckling)
  • GitHub Copilot-agentläge för att generera grunden till, konfigurera och distribuera en fullständig applikation
  • Azure Skills för att förbättra Copilot med Azure specifika kunskaper och verktyg
  • En fungerande to-do app som körs på Azure App Service
  • En API-slutpunkt för din to-do-app
  • Azure Developer CLI (azd) för att etablera och distribuera Azure resurser från en infrastrukturmall

Med planläget kan Copilot undersöka din kodbas och skapa en strukturerad implementeringsplan innan du skriver någon kod, vilket säkerställer att dina krav är tydliga och att din metod är sund. I agentläge kan Copilot självständigt köra kommandon, redigera filer och iterera utifrån fel. Du anger målet och Copilot avgör stegen.

Förutsättningar

Ingen lokal installation krävs. VS Code for the Web (vscode.dev/azure) ger dig en webbläsarbaserad VS Code-miljö med Azure Developer CLI, Node.jsoch flera Azure tillägg förinstallerade.

Skapa en ny arbetsyta

  1. Öppna vscode.dev/azure i webbläsaren.

  2. Logga in med ditt Azure-konto när du uppmanas att göra det.

  3. I terminalfönstret skapar du en ny katalog för projektet och ändrar till den.

    mkdir todo-app && cd todo-app

Aktivera Azure kunskaper

Azure Skills tillhandahåller Copilot med utvalda Azure expertis, arbetsflöden och skyddsräcken så att agenten kan fatta välgrundade beslut om Azure tjänster, infrastruktur och distribution. Azure MCP-tillägget installerar ett tillägg som ger Azure kunskaper i VS Code. Tillsammans konfigurerar de Azure MCP Server, Foundry MCP och det fullständiga kunskapsskiktet automatiskt. Mer information finns i Azure Skills Plugin-repot.

  1. Öppna kommandopaletten.
  2. Välj MCP: Listservrar.
  3. Om Azure MCP-servern inte körs startar du den genom att välja Azure MCP>Start server.

Planera ditt program

Plan mode låter Copilot undersöka projektet och generera en detaljerad implementeringsplan innan du skriver någon kod. Du granskar och förfinar planen och lämnar sedan över den till agentläget för att utföra den.

  1. Öppna vyn Copilot Chat genom att välja chattikonen i aktivitetsfältet.

  2. Logga in på GitHub Copilot om du inte redan har gjort det. Välj knappen GitHub Copilot logo Sign-in i statusfältet Visual Studio Code och följ anvisningarna för att autentisera med ditt GitHub konto.

  3. Välj Planera i listrutan agenter i chattpanelen eller skriv /plan följt av din uppgiftsbeskrivning.

    Kopiera och klistra in följande fråga i Copilot chattpanelen:

    /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

    Om du inte har konfigurerat GitHub Copilot ännu uppmanas du att logga in på ditt GitHub-konto och konfigurera Copilot innan du kan skicka meddelandet. Om du inte har en Copilot prenumeration är du associerad med ett kostnadsfritt konto som ger dig en månatlig gräns för slutföranden och chattinteraktioner.

  4. Besvara eventuella klargörande frågor som planagenten ställer efter att ha undersökt din uppgift. Exempel: TypeScript eller JavaScript för React-appen? Vilken stylingmetod ska användas? Ska azd-mallen innehålla ett GitHub Actions CI/CD-arbetsflöde?

  5. Granska den genererade planen. Din plan ser ut ungefär så här:

    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.
...

    Planagenten skapar en övergripande sammanfattning, implementeringssteg och verifieringssteg. Du kan skicka uppföljningsprompter för att iterera planen tills den uppfyller dina krav.

Agentläge

Agentläget ger GitHub Copilot möjlighet att köra terminalkommandon, skapa och redigera filer och självrätta när något går fel. Du anger ett övergripande mål och agenten bestämmer vilka åtgärder som ska utföras.

  1. Välj Claude Sonnet 4.6-modell , Agentläge och Autopilot (förhandsversion) i chattpanelen.

    • Med standardmodellen Auto kan Copilot välja den bästa modellen för varje steg dynamiskt. I den här snabbstarten använder du en specifik modell som Claude Sonnet 4.6 för mer deterministiskt beteende så att de steg som Copilot vidtar för att implementera din plan blir mer förutsägbara.
    • Med agentläge och autopilot kan Copilot köra terminalkommandon och göra filändringar autonomt. Autopilot-läget ger Copilot möjlighet att självrätta och iterera utan att behöva ytterligare indata från dig. Om du föredrar mer kontroll väljer du standardläge för godkännanden för att godkänna varje steg innan det körs.

  2. I chattpanelen väljer du Starta implementering eller Starta med Autopilot för att lämna över planen till agentläget för körning. Autopilot-läge ger Copilot möjlighet att iterera utan att behöva ytterligare indata från dig. Om du föredrar mer kontroll väljer du standardläge för godkännanden för att godkänna varje steg innan det körs.

När Copilot har slutfört implementeringen visas utdata i chattpanelen som liknar följande:

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.

Appen är nu skapad med de angivna funktionerna och mallen Azure infrastruktur är redo för distribution. README-filen innehåller instruktioner om hur du testar och distribuerar appen. Innan du distribuerar till Azure testar du appen lokalt för att bekräfta att den fungerar som förväntat.

Testa programmet

Beroende på hur du besvarade frågor under planeringsläget kan testning av appen lokalt bero på implementeringen. Granska README-filen för att testa lokalt.

Förutsatt att programmet är ett Vite + React SPA som genereras i planeringsstegen startar du utvecklingsservern med följande kommando:

npm install && npm run dev

Kommandot startar Vite-utvecklingsservern. Terminalutdata innehåller url:en för localhost där appen körs.

  VITE v5.4.21  ready in 271 ms

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

På fliken Portar öppnar du port-URL:en för vidarebefordrad adress i webbläsaren för att se appen to-do i en webbläsare.

Skärmbild av fliken VS Code Ports med URL:en för vidarebefordrad adress markerad för port 5173.

Testa funktionerna genom att lägga till, växla och ta bort uppgifter för att bekräfta att allt fungerar som förväntat.

Skärmbild av To-Do app som visar 2 av 3 aktiviteter som återstår med en slutförd uppgift och ett indatafält för att lägga till nya aktiviteter.

När du är klar med testningen stoppar du utvecklingsservern genom att trycka Ctrl + C på i terminalen.

Fråga om Azure tjänster

Nu när du har en fungerande app frågar du agenten om vilka Azure tjänster som passar bra för att vara värd för appen och lagring för beständiga data.

Kopiera och klistra in följande fråga:

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

Agenten använder Azure Kunskaper för att analysera appens arkitektur, datalagringsbehov och API-mönster för att rekommendera en lämplig Azure tjänst för att hantera dina to-do data. Agenten tar hänsyn till faktorer som kostnad, skalbarhet, enkel integrering och lämplighet för appens arbetsbelastning. Agenten förklarar sedan rekommendationen som i följande exempel:

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.
...

Distribuera till Azure

När du har testat appen lokalt och bekräftat att den fungerar som förväntat distribuerar du den till Azure så att du kan se den köras i molnet.

  1. Eftersom du använder azd för att distribuera loggar du in på Azure i terminalen om du inte redan är det. Kör:

    azd auth login

  2. Distribuera programmet till Azure.

    azd up

    Välj Ett unikt miljönamn för distributionen när du uppmanas att göra det. Det här namnet används för att skapa en resursgrupp i Azure och måste vara globalt unikt.

    Välj den Azure prenumeration som du vill distribuera till när du uppmanas att göra det.

Kommandot azd up etablerar de Azure resurser som definierats i mappen infra/, skapar programmet och distribuerar det till Azure. Terminalutdata innehåller URL:en för din distribuerade app.

Felsökning

Om distributionen misslyckas eller om den aktiva platsen inte hanterar de skapade produktionsfilerna använder du följande uppmaning för att låta agenten diagnostisera och åtgärda distributionen automatiskt.

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.

Under utvecklingen kan du använda GitHub Copilot för att felsöka problem. Om du får ett fel kopierar och klistrar du in felutdata i chattfönstret och ber agenten att hjälpa dig att förstå och åtgärda problemet.

Utforska dina distribuerade resurser

Använd den distribuerade app-URL:en från terminalutdata eller GitHub Copilot chatt för att komma åt den i en webbläsare. Gå till din app och testa att den fungerar som förväntat i molnet. Lägg till, växla och ta bort uppgifter för att bekräfta att allt fungerar.

Skärmbild av distribuerad To-Do webbapp på Azure Static Web Apps med två slutförda uppgifter och en återstående.

Du kan utforska dina Azure resurser direkt i VS Code.

  1. Öppna vyn Azure genom att välja ikonen Azure i aktivitetsfältet.
  2. På noden Resurser väljer du ikonen Gruppera efter och väljer Gruppera efter resursgrupp för att ordna resurser efter deras resursgrupper.
  3. Expandera Resurser och leta reda på resursgruppen för distributionen som skapats av azd up.
  4. Expandera resursgruppen för att se de distribuerade tjänsterna, till exempel App Service som är värd för webbappen och andra resurser som skapats av azd up.
  5. Högerklicka på webbappen och välj Browse Website för att öppna din distribuerade to-do app eller välj View in Portal för att se resursen i Azure Portal och distributions-URL:en.

Rensa resurser

När du är klar med att utforska tar du bort Azure-resurserna för att undvika avgifter:

azd down

Det här kommandot tar bort alla Azure resurser som skapades under distributionen, inklusive resursgruppen.

Nästa steg

Du använde GitHub Copilots planeringsläge och agentläge för att planera, bygga upp och distribuera en att göra-app i React till Azure utan att skriva kod manuellt. Fortsätt att bygga vidare på det du har lärt dig:

  • Last updated on