VS Code에서 Azure Static Web Apps 디버깅

Azure Static Web Apps extension for VS Code 의 v0.9.0을 방금 출시했습니다. 이 릴리스에는 Azure Functions API 경로, 인증 및 라우팅을 포함하여 정적 웹앱을 로컬에서 디버그하는 데 도움이 되는 기능이 포함되어 있습니다.

Azure Static Web Apps를 처음 사용하는 경우 What is Azure Static Web Apps? 설명서 페이지를 확인하는 것이 좋습니다.

이 게시물에서는 로컬에서 정적 웹 앱 디버깅을 시작하는 방법을 배웁니다. 그런 다음 Azure Functions API 경로를 추가하고 백엔드 + 프런트엔드를 함께 디버그합니다.

전제 조건 🛠️

Google Chrome 설치, (디버거 사용)

VS Code용 Azure Static Web Apps 확장 - View on Marketplace

Azure Static Web Apps CLI 0.8.0 이상 - View on GitHub

npm install -g @azure/static-web-apps-cli@latest

시작하기 🟢

이러한 저장소 중 하나를 복제하고 VS Code에서 엽니다.

뼈대
저장소


모난
https://github.com/staticwebdev/angular-basic

반응하다
https://github.com/staticwebdev/react-basic

날씬한
https://github.com/staticwebdev/svelte-basic

뷰
https://github.com/staticwebdev/vue-basic

달리다 npm install

Theme: Cobalt2 Theme Official by Wes Bos

실행 및 디버그 🐞

"실행 및 디버그"보기로 이동합니다.

"모든 자동 디버그 구성 표시"를 클릭합니다.

드롭다운에서 "Azure Static Web Apps..."를 선택합니다.

디버깅할 앱을 선택합니다.

이렇게 하면 VS Code 터미널에서 Azure Static Web Apps CLI가 시작되고 http://localhost:4280에서 Chrome 디버거가 시작됩니다.

이제 프런트엔드 코드에서 중단점을 설정하고 적중할 수 있습니다.

API 경로 추가 ⚡️

Azure Static Web Apps에는 Azure Functions에서 제공하는 통합 API 지원이 있습니다. API 경로를 추가하고 디버그하려면 일부 Azure Functions 도구를 설치해야 합니다.

VS Code용 Azure Functions 확장 - Install from Marketplace

Azure Functions 핵심 도구 - View on GitHub

npm i -g azure-functions-core-tools@3 --unsafe-perm true

이제 Azure Static Web Apps 보기에서 "HTTP 함수 추가..."단추를 클릭하여 앱에 API 경로를 추가할 수 있습니다.



언어를 선택한 다음(저는 JavaScript를 선택했습니다) 함수 이름을 지정합니다(저는 "hello"를 넣었습니다). 그런 다음 /api/hello에서 요청할 수 있는 API 경로가 생성됩니다.

Functions API로 앱 디버그 ✨

VS Code에서 API 경로와 프런트엔드 앱을 동시에 디버깅할 수 있습니다.

"SWA: Run ..."디버그 구성을 선택하고 녹색 "실행 및 디버그"버튼을 클릭합니다.



VS Code는 이제 Functions API 경로와 프런트엔드를 실행합니다. 모두 시작되면 http://localhost:4280에서 Chrome 창이 열립니다.

함수 끝점에서 중단점을 설정합니다.



Chrome 창에서 http://localhost:4280/api/hello로 이동하여 중단점에 도달합니다.

다음 단계 🏃‍♀️

정적 웹 응용 프로그램을 로컬에서 실행했으므로 이제 할 수 있습니다deploy your static web app to Azure for free.

문제 해결 🔍

문제가 있는 경우 troubleshooting section in our wiki 을 확인하십시오.

링크 + 리소스 🔗

Azure Static Web Apps documentation

Awesome Azure Static Web Apps
create-swa-app
Azure Static Web Apps CLI
Azure Static Web Apps extension for VS Code


안녕하세요 👋 저는 Alex 🤠이고 VS Code용 Azure Static Web Apps 확장을 담당하는 개발자입니다. 나는 당신이 게시물을 즐겼기를 바랍니다!

GitHub @alexweininger