Szybki start: tworzenie aplikacji Azure przy użyciu sztucznej inteligencji wspomaganej przez agenta

W tym przewodniku Szybki start użyj GitHub Copilot, aby utworzyć aplikację platformy React to-do i wdrożyć ją w Azure App Service przy użyciu programowania wspomaganego przez sztuczną inteligencję. Podczas opracowywania lokalnego zacznij od trybu planu Copilot, aby utworzyć szczegółowy plan implementacji, a następnie przełącz się do trybu agenta, aby skompilować i wdrożyć. W przypadku korzystania z programu VS Code dla sieci Web użyj trybu agenta w całym. Na koniec masz praktyczne doświadczenie w pracy z:

  • GitHub Copilot Plan mode do badania projektu i tworzenia planów implementacji (programowanie lokalne)
  • Tryb agenta GitHub Copilot do utworzenia szkieletu, skonfigurowania i wdrożenia kompletnej aplikacji
  • Azure Skills do wzbogacenia rozwiązania Copilot o wiedzę i narzędzia specyficzne dla platformy Azure
  • Działająca aplikacja z listą zadań w usłudze Azure App Service
  • Punkt końcowy API dla aplikacji do zarządzania zadaniami
  • Interfejs wiersza polecenia Azure Developer CLI (azd) do aprowizowania i wdrażania zasobów platformy Azure na podstawie szablonu infrastruktury

Tryb planowania umożliwia Copilotowi analizę Twojego kodu źródłowego i utworzenie uporządkowanego planu implementacji, zanim napiszesz choćby fragment kodu, dzięki czemu masz pewność, że wymagania są jasno określone, a obrane podejście jest właściwe. Tryb agenta umożliwia Copilot autonomiczne uruchamianie poleceń, edytowanie plików i iterowanie błędów. Należy podać cel i Copilot określa kroki.

Wymagania wstępne

Nie jest wymagana instalacja lokalna. VS Code for the Web (vscode.dev/azure) udostępnia środowisko programu VS Code oparte na przeglądarce z wstępnie zainstalowanym interfejsem wiersza polecenia dewelopera Azure, Node.jsi kilkoma wstępnie zainstalowanymi rozszerzeniami Azure.

Utwórz nowy obszar roboczy

  1. Otwórz vscode.dev/azure w przeglądarce.

  2. Po wyświetleniu monitu zaloguj się przy użyciu konta platformy Azure.

  3. W oknie Terminal utwórz nowy katalog dla projektu i przejdź do niego.

    mkdir todo-app && cd todo-app

Włączanie umiejętności Azure

Azure Skills udostępnia Copilotowi starannie dobraną wiedzę ekspercką dotyczącą platformy Azure, przepływy pracy i mechanizmy kontrolne, dzięki czemu agent może podejmować świadome decyzje dotyczące usług Azure, infrastruktury i wdrożeń. Rozszerzenie Azure MCP instaluje dodatkowe rozszerzenie, które udostępnia funkcje platformy Azure w środowisku VS Code. Razem konfigurują Azure MCP Server, Foundry MCP i pełną warstwę umiejętności automatycznie. Aby uzyskać więcej informacji, zobacz repozytorium Azure Skills Plugin.

  1. Otwórz paletę poleceń.
  2. Wybierz pozycję MCP: Wyświetl listę serwerów.
  3. Jeśli serwer MCP Azure nie jest uruchomiony, uruchom go, wybierając Azure MCP>Start server.

Planowanie aplikacji

Plan mode pozwala Copilot zbadać projekt i wygenerować szczegółowy plan implementacji przed napisaniem jakiegokolwiek kodu. Przeglądasz i dopracowujesz plan, a następnie przekazujesz go do trybu agenta do wykonania.

  1. Otwórz widok Copilot Chat, wybierając ikonę czatu na pasku działań.

  2. Zaloguj się do GitHub Copilot, jeśli jeszcze tego nie zrobiono. Wybierz przycisk logo GitHub Copilot Sign-in na pasku stanu Visual Studio Code i postępuj zgodnie z monitami, aby uwierzytelnić się przy użyciu konta GitHub.

  3. Wybierz pozycję Plan z listy rozwijanej agentów w panelu czatu lub wpisz /plan, a następnie opis zadania.

    Skopiuj i wklej następujący monit do panelu czatu Copilot:

    /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

    Jeśli jeszcze nie skonfigurowano GitHub Copilot, zostanie wyświetlony monit o zalogowanie się do konta GitHub i skonfigurowanie Copilot przed wysłaniem monitu. Jeśli nie masz subskrypcji usługi Copilot, korzystasz z bezpłatnego konta, które zapewnia miesięczny limit podpowiedzi i interakcji na czacie.

  4. Odpowiedz na wszelkie wyjaśnienia pytań, które agent planu zadaje po zbadaniu zadania. Na przykład: TypeScript lub JavaScript dla aplikacji React? Jakiego podejścia do stylów należy użyć? Czy szablon azd powinien obejmować proces CI/CD GitHub Actions?

  5. Przejrzyj wygenerowany plan. Twój plan wygląda następująco:

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

    Agent planu tworzy ogólne podsumowanie, kroki implementacji i kroki weryfikacji. Możesz wysyłać kolejne monity, aby iteracyjnie dopracowywać plan, aż spełni Twoje wymagania.

Tryb agenta

Tryb agenta zapewnia GitHub Copilot możliwość uruchamiania poleceń terminalu, tworzenia i edytowania plików oraz samodzielnego poprawiania, gdy coś pójdzie nie tak. Należy podać cel wysokiego poziomu, a agent decyduje o tym, jakie kroki należy wykonać.

  1. Wybierz model Claude Sonnet 4.6 , tryb agenta i rozwiązanie Autopilot (wersja zapoznawcza) na panelu czatu.

    • Domyślny model Auto pozwala Copilot wybrać najlepszy model dla każdego kroku dynamicznie. W tym przewodniku Szybki start użyj konkretnego modelu, takiego jak Claude Sonnet 4.6, aby uzyskać bardziej deterministyczne działanie, dzięki czemu kroki podejmowane przez Copilota podczas wdrażania Twojego planu będą bardziej przewidywalne.
    • Tryb agenta i rozwiązanie Autopilot umożliwiają Copilot uruchamianie poleceń terminalu i autonomiczne wprowadzanie zmian plików. Tryb Autopilot daje Copilotowi możliwość samodzielnego korygowania się i wprowadzania kolejnych poprawek bez potrzeby dalszych działań z Twojej strony. Jeśli wolisz większą kontrolę, wybierz domyślny tryb zatwierdzeń, aby zatwierdzić każdy krok przed jego wykonaniem.

  2. W panelu czatu wybierz Rozpocznij implementację lub Rozpocznij z Autopilotem, aby przekazać plan do trybu agenta do wykonania. Tryb Autopilot pozwala Copilotowi iterować bez potrzeby dalszego udziału z Twojej strony. Jeśli wolisz większą kontrolę, wybierz domyślny tryb zatwierdzeń, aby zatwierdzić każdy krok przed jego wykonaniem.

Gdy Copilot zakończy implementację, w panelu czatu zobaczysz wynik podobny do poniższego:

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.

Aplikacja jest teraz szkieletowa z określonymi funkcjami, a szablon infrastruktury Azure jest gotowy do wdrożenia. Plik README zawiera instrukcje dotyczące testowania i wdrażania aplikacji. Przed wdrożeniem w Azure przetestuj aplikację lokalnie, aby potwierdzić, że działa zgodnie z oczekiwaniami.

Testowanie aplikacji

W zależności od tego, jak udzielono odpowiedzi na pytania w trybie planowania, testowanie aplikacji lokalnie może zależeć od implementacji. Przejrzyj plik README na potrzeby testowania lokalnego.

Zakładając, że aplikacja jest aplikacją Vite + React SPA wygenerowaną w krokach planowania, uruchom serwer dewelopera za pomocą następującego polecenia:

npm install && npm run dev

Polecenie uruchamia serwer deweloperski Vite. Dane wyjściowe terminalu zawierają adres URL hosta lokalnego, pod którym działa aplikacja.

  VITE v5.4.21  ready in 271 ms

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

Na karcie Porty otwórz w przeglądarce adres URL portu Adres przekazywany, aby wyświetlić aplikację z listą zadań.

Zrzut ekranu przedstawiający kartę Porty w programie VS Code z wyróżnionym adresem URL przekierowania dla portu 5173.

Przetestuj funkcje, dodając, przełączając i usuwając zadania, aby potwierdzić, że wszystko działa zgodnie z oczekiwaniami.

Zrzut ekranu przedstawiający aplikację To-Do z 2 z 3 zadań pozostałych z jednym ukończonym zadaniem i polem wejściowym w celu dodania nowych zadań.

Po zakończeniu testowania zatrzymaj serwer deweloperów, naciskając klawisz Ctrl + C w terminalu.

Zapytaj o usługi Azure

Teraz, gdy masz działającą aplikację, zapytaj agenta o to, które usługi Azure byłyby dobrym rozwiązaniem do hostowania aplikacji i magazynu dla danych trwałych.

Skopiuj i wklej następujący monit:

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

Agent używa umiejętności Azure do analizowania architektury aplikacji, potrzeb związanych z magazynem danych i wzorców interfejsu API, aby zalecić odpowiednią usługę Azure do hostowania danych to-do. Agent uwzględnia czynniki takie jak koszt, skalowalność, łatwość integracji i użyteczność obciążenia aplikacji. Następnie agent wyjaśnia swoje zalecenie, jak w poniższym przykładzie:

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

Wdrażanie na platformie Azure

Po przetestowaniu aplikacji lokalnie i potwierdzeniu, że działa zgodnie z oczekiwaniami, wdróż ją w Azure, aby można było zobaczyć, jak działa w chmurze.

  1. Ponieważ do wdrożenia używasz azd, zaloguj się do Azure w terminalu, jeśli jeszcze tego nie zrobiono. Run:

    azd auth login

  2. Wdróż aplikację w Azure.

    azd up

    Po wyświetleniu monitu wybierz unikatową nazwę środowiska wdrożenia. Ta nazwa służy do tworzenia grupy zasobów w Azure i musi być globalnie unikatowa.

    Wybierz subskrypcję Azure, do której chcesz wdrożyć po wyświetleniu monitu.

Polecenie azd up aprowizuje zasoby Azure zdefiniowane w folderze infra/, kompiluje aplikację i wdraża ją w Azure. Dane wyjściowe terminalu zawierają adres URL wdrożonej aplikacji.

Troubleshooting

Jeśli wdrożenie zakończy się niepowodzeniem lub witryna na żywo nie obsługuje skompilowanych plików produkcyjnych, użyj następującego monitu, aby automatycznie zdiagnozować i naprawić wdrożenie.

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.

Podczas programowania możesz użyć GitHub Copilot, aby ułatwić debugowanie problemów. Jeśli wystąpi błąd, skopiuj i wklej dane wyjściowe błędu w oknie czatu i poproś agenta o pomoc w zrozumieniu i rozwiązaniu problemu.

Eksplorowanie wdrożonych zasobów

Użyj adresu URL wdrożonej aplikacji z danych wyjściowych terminala lub z czatu GitHub Copilot, aby otworzyć ją w przeglądarce. Przejdź do aplikacji i przetestuj, czy działa zgodnie z oczekiwaniami w chmurze. Dodaj, przełącz i usuń zadania, aby potwierdzić, że wszystko działa.

Zrzut ekranu wdrożonej aplikacji internetowej To-Do w usłudze Azure Static Web Apps z dwoma ukończonymi zadaniami i jednym pozostałym zadaniem.

Zasoby Azure można eksplorować bezpośrednio w programie VS Code.

  1. Otwórz widok Azure, wybierając ikonę Azure na pasku działań.
  2. W węźle Zasoby wybierz ikonę Grupuj według , a następnie wybierz pozycję Grupuj według grupy zasobów , aby zorganizować zasoby według grup zasobów.
  3. Rozwiń Zasoby i znajdź grupę zasobów dla wdrożenia utworzonego przez azd up.
  4. Rozwiń grupę zasobów, aby wyświetlić wdrożone usługi, takie jak usługa App Service obsługująca Twoją aplikację internetową oraz wszelkie inne zasoby utworzone przez azd up.
  5. Kliknij prawym przyciskiem myszy aplikację internetową i wybierz pozycję Przeglądaj witrynę, aby otworzyć wdrożoną aplikację listy zadań, lub wybierz pozycję Wyświetl w portalu, aby wyświetlić zasób w witrynie Azure Portal i adres URL wdrożenia.

Uprzątnij zasoby

Po zakończeniu eksplorowania usuń zasoby platformy Azure, aby uniknąć naliczania opłat:

azd down

To polecenie usuwa wszystkie zasoby Azure utworzone podczas wdrażania, w tym grupę zasobów.

Następne kroki

Korzystając z trybu Plan i trybu agenta w GitHub Copilot, zaplanowano, wygenerowano szkielet i wdrożono aplikację listy zadań w React na platformie Azure bez ręcznego pisania kodu. Rozwijaj dalej to, czego się nauczyłeś:

  • Ostatnia aktualizacja o