이 빠른 시작에서는 GitHub Copilot을 사용하여 React 할 일 애플리케이션을 빌드하고 AI 지원 개발을 통해 Azure App Service에 배포합니다. 로컬로 개발할 때 Copilot 계획 모드로 시작하여 자세한 구현 계획을 만든 다음 에이전트 모드로 전환하여 빌드 및 배포합니다. 웹용 VS Code를 사용하는 경우 전체 에이전트 모드를 사용합니다. 결국 다음과 같은 실습 경험을 쌓을 수 있습니다.
- GitHub Copilot 계획 모드 프로젝트를 연구하고 구현 계획(로컬 개발)을 만듭니다.
- 전체 애플리케이션을 스캐폴드, 구성 및 배포하는 GitHub Copilot 에이전트 모드
- Azure 기술을 통해 Azure 관련 지식 및 도구로 Copilot 향상
- Azure App Service에서 실행되는 작동하는 할 일 앱
- 사용자의 할 일 앱용 API 엔드포인트
- 인프라 템플릿에서 Azure 리소스를 프로비전하고 배포하는 Azure 개발자 CLI(azd)
계획 모드를 사용하면 Copilot 코드를 작성하기 전에 코드베이스를 조사하고 구조화된 구현 계획을 만들 수 있으므로 요구 사항이 명확하고 접근 방식이 건전합니다. 에이전트 모드를 사용하면 Copilot 명령을 자율적으로 실행하고, 파일을 편집하고, 오류를 반복할 수 있습니다. 목표를 제공하고 Copilot 단계를 결정합니다.
사전 요구 사항
- 활성 구독이 있는 Azure 계정. 체험 계정 만들기
- GitHub Copilot 구독입니다.
로컬 설치가 필요하지 않습니다. V Code for the Web(vscode.dev/azure)는 Azure Developer CLI, Node.js및 여러 Azure 확장이 미리 설치된 브라우저 기반 VS Code 환경을 제공합니다.
새 작업 영역 만들기
브라우저에서 vscode.dev/azure 엽니다.
메시지가 표시되면 Azure 계정을 사용하여 로그인합니다.
터미널 창에서 프로젝트에 대한 새 디렉터리를 만들고 해당 디렉터리로 변경합니다.
mkdir todo-app && cd todo-app
Azure 스킬 사용하도록 설정
Azure Skills는 큐레이팅된 Azure 전문 지식, 워크플로 및 가드레일을 Copilot 제공하여 에이전트가 Azure 서비스, 인프라 및 배포에 대해 정보에 입각한 결정을 내릴 수 있도록 합니다. Azure MCP 확장은 Azure 기술을 VS Code에 제공하는 도우미 확장을 설치합니다. 함께 Azure MCP 서버, Foundry MCP 및 전체 기술 계층을 자동으로 구성합니다. 자세한 내용은 Azure Skills 플러그 인 리포지토리 참조하세요.
- 명령 팔레트를 엽니다.
- MCP: 서버 나열을 선택합니다.
- Azure MCP 서버가 실행되고 있지 않으면 Azure MCP> 시작 서버를 선택하여 시작합니다.
애플리케이션을 계획하세요
계획 모드 사용하면 코드를 작성하기 전에 Copilot 프로젝트를 연구하고 자세한 구현 계획을 생성할 수 있습니다. 계획을 검토하고 구체화한 다음 실행을 위해 에이전트 모드로 전달합니다.
활동 모음에서 채팅 아이콘을 선택하여 Copilot Chat 보기를 엽니다.
아직 로그인하지 않은 경우 GitHub Copilot 로그인합니다. Visual Studio Code 상태 표시줄에서 GitHub Copilot 로고 사인 단추를 선택하고 프롬프트에 따라 GitHub 계정으로 인증합니다.
채팅 패널의 에이전트 드롭다운에서 계획을 선택하거나 작업 설명 뒤에 입력
/plan합니다.다음 프롬프트를 복사하여 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.메모
아직 GitHub Copilot 설정하지 않은 경우 프롬프트를 보내기 전에 GitHub 계정에 로그인하고 Copilot 설정하라는 메시지가 표시됩니다. Copilot 구독이 없는 경우 매월 완료 및 채팅 상호 작용 한도를 제공하는 무료 계정과 연결됩니다.
계획 에이전트가 작업을 조사한 후 묻는 명확한 질문에 답변합니다. 예: React 앱의 TypeScript 또는 JavaScript? 어떤 스타일링 방법을 사용해야 하나요? azd 템플릿에 GitHub Actions CI/CD 워크플로가 포함되어야 하나요?
생성된 계획을 검토합니다. 계획은 다음과 같습니다.
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. ...계획 에이전트는 개략적인 요약, 구현 단계 및 확인 단계를 생성합니다. 요구 사항을 충족할 때까지 후속 프롬프트를 제출하여 계획을 반복할 수 있습니다.
에이전트 모드
에이전트 모드는 GitHub Copilot 터미널 명령을 실행하고, 파일을 만들고 편집하며, 문제가 발생할 때 자체 수정할 수 있는 기능을 제공합니다. 개략적인 목표를 제공하고 에이전트가 수행할 단계를 결정합니다.
채팅 패널에서 Claude Sonnet 4.6 모델, 에이전트 모드 및 Autopilot(미리 보기) 을 선택합니다.
- 기본 Auto 모델을 사용하면 Copilot 각 단계에 가장 적합한 모델을 동적으로 선택할 수 있습니다. 이 퀵스타트에서는 Copilot이 계획을 구현하기 위해 수행하는 단계가 더 예측 가능해지도록 Claude Sonnet 4.6과 같은 특정 모델을 사용하여 더 결정론적인 동작을 유도합니다.
- 에이전트 모드 및 autopilot을 사용하면 Copilot 터미널 명령을 실행하고 파일을 자율적으로 변경할 수 있습니다. Autopilot 모드는 Copilot 추가 입력 없이도 자체 수정하고 반복할 수 있는 기능을 제공합니다. 더 많은 제어를 원하는 경우 실행하기 전에 각 단계를 승인하려면 기본 승인 모드를 선택합니다.
채팅 패널에서 구현 시작 또는 Autopilot으로 시작을 선택하여 실행을 위한 에이전트 모드로 계획을 전달합니다. Autopilot 모드는 Copilot 추가 입력 없이도 반복할 수 있는 기능을 제공합니다. 더 많은 제어를 원하는 경우 실행하기 전에 각 단계를 승인하려면 기본 승인 모드를 선택합니다.
Copilot 구현이 완료되면 다음과 유사한 출력이 채팅 패널에 표시됩니다.
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.
이제 앱이 지정된 기능으로 스캐폴드되고 Azure 인프라 템플릿을 배포할 준비가 되었습니다. 추가 정보 파일에는 앱을 테스트하고 배포하는 방법에 대한 지침이 포함되어 있습니다. Azure 배포하기 전에 로컬에서 앱을 테스트하여 예상대로 작동하는지 확인합니다.
앱 테스트
계획 모드에서 질문에 대답하는 방법에 따라 로컬에서 앱을 테스트하는 것은 구현에 따라 달라질 수 있습니다. 로컬로 테스트하기 위해 추가 정보 파일을 검토합니다.
애플리케이션이 계획 단계에서 생성된 Vite + React SPA라고 가정하고 다음 명령을 사용하여 개발 서버를 시작합니다.
npm install && npm run dev
이 명령은 Vite 개발 서버를 시작합니다. 터미널 출력에는 앱이 실행되는 localhost URL이 포함됩니다.
VITE v5.4.21 ready in 271 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
포트 탭에서 브라우저에서 전달된 주소 포트 URL을 열어 브라우저에서 to-do 앱을 확인합니다.
작업을 추가, 토글 및 제거하여 기능을 테스트하여 모든 것이 예상대로 작동하는지 확인합니다.
테스트를 마쳤으면 터미널에서 눌러 Ctrl + C 개발 서버를 중지합니다.
Azure 서비스에 대한 질문
이제 작업 앱이 있으므로 에이전트에게 영구 데이터에 대한 앱 및 스토리지를 호스팅하는 데 적합한 Azure 서비스에 대해 문의하세요.
다음 프롬프트를 복사하여 붙여넣습니다.
I want to change the storage persistence. What are my no-cost or low-cost storage options for this app in Azure?
에이전트는 Azure Skills를 사용하여 앱의 아키텍처, 데이터 스토리지 요구 사항 및 API 패턴을 분석하여 to-do 데이터를 호스트하기 위한 적절한 Azure 서비스를 권장합니다. 에이전트는 앱 워크로드에 대한 비용, 확장성, 통합의 용이성 및 적합성과 같은 요소를 고려합니다. 그런 다음 에이전트는 다음 예제와 같이 권장 사항을 설명합니다.
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.
...
Azure에 배포하기
로컬에서 앱을 테스트하고 예상대로 작동하는지 확인한 후 클라우드에서 실행되는 앱을 볼 수 있도록 Azure 배포합니다.
azd사용하여 배포하고 있으므로 아직 배포하지 않은 경우 터미널에서 Azure 로그인합니다. Run:azd auth loginAzure 애플리케이션을 배포합니다.
azd up메시지가 표시되면 배포에 대한 고유한 환경 이름을 선택합니다. 이 이름은 Azure 리소스 그룹을 만드는 데 사용되며 전역적으로 고유해야 합니다.
메시지가 표시되면 배포하려는 Azure 구독을 선택합니다.
azd up 명령은 infra/ 폴더에 정의된 Azure 리소스를 프로비전하고, 애플리케이션을 빌드하고, Azure 배포합니다. 터미널 출력에는 배포된 앱의 URL이 포함됩니다.
Troubleshooting
배포가 실패하거나 라이브 사이트에서 빌드된 프로덕션 파일을 제공하지 않는 경우 다음 프롬프트를 사용하여 에이전트를 진단하고 배포를 자동으로 수정합니다.
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.
개발하는 동안 GitHub Copilot 사용하여 문제를 디버그할 수 있습니다. 오류가 발생하면 채팅 창에 오류 출력을 복사하여 붙여넣고 에이전트에게 문제를 이해하고 해결하는 데 도움을 요청합니다.
배포된 리소스 살펴보기
터미널 출력 또는 GitHub Copilot 채팅에서 배포된 앱 URL을 사용하여 브라우저에서 액세스합니다. 앱으로 이동하여 클라우드에서 예상대로 작동하는지 테스트합니다. 작업을 추가, 토글 및 제거하여 모든 것이 작동하는지 확인합니다.
VS Code에서 직접 Azure 리소스를 탐색할 수 있습니다.
- 작업 표시줄에서 Azure 아이콘을 선택하여 Azure 보기를 엽니다.
- 리소스 노드에서 그룹별 아이콘을 선택하고 리소스 그룹별로 리소스 그룹을 선택하여 리소스 그룹을 기준으로 리소스를 구성합니다.
-
Resources를 확장한 다음
azd up에서 만든 배포에 대한 리소스 그룹을 찾습니다. - 리소스 그룹을 확장하여 웹 앱을 호스팅하는 App Service와
azd up에서 만든 기타 리소스 등 배포된 서비스를 확인하세요. - 웹앱을 마우스 오른쪽 단추로 클릭하고 Browse Website를 선택하여 배포된 to-do 앱을 열거나 포털에서 보기를 선택하여 Azure Portal 리소스와 배포 URL을 확인합니다.
자원을 정리하세요
탐색을 완료하면 요금이 발생하지 않도록 Azure 리소스를 삭제합니다.
azd down
이 명령은 리소스 그룹을 포함하여 배포 중에 만든 모든 Azure 리소스를 삭제합니다.
다음 단계
GitHub Copilot 계획 모드 및 에이전트 모드를 사용하여 코드를 수동으로 작성하지 않고 Azure React to-do 앱을 계획, 스캐폴드 및 배포했습니다. 학습한 내용을 계속 빌드합니다.
- Azure용 GitHub Copilot 설명서 - AI 지원 Azure 개발에 대해 자세히 알아봅니다.
- Azure 개발을 위한 VS 코드 - 브라우저 기반 개발 환경에 대해 자세히 알아봅니다.
- Azure Skills 플러그 인 - Copilot 사용하여 향상된 Azure 개발을 위해 Azure 기술을 설치합니다.
- Azure 개발자 CLI 템플릿 - 다양한 언어 및 아키텍처에 대한 템플릿을 찾습니다.