Azure Functions를 사용하여 API 빌드

완료됨

이제 쇼핑 목록 앱용 API를 만들 차례입니다.

Azure 기능

Azure Static Web Apps의 가장 큰 이점 중 하나는 Azure Functions를 사용하여 빌드된 API 및 웹앱을 함께 호스트한다는 것입니다. Azure Static Web Apps는 웹앱의 정적 자산을 전역으로 배포하고 Azure Functions에서 API를 호스트합니다. 이 설정을 사용하여 웹앱 자산의 글로벌 배포와 함께 제공되는 가용성 및 속도를 얻습니다.

얻을 수 없는 것도 중요합니다.

프런트 엔드 또는 백 엔드용으로 전체 서버를 구성하고 유지 관리할 필요가 없습니다. Azure Static Web Apps를 사용하면 최소한의 구성과 기본 테넌트를 통해 앱 및 API를 쉽게 게시할 수 있습니다.

Azure Functions는 경로 엔드포인트를 제공하며, 구성하거나 유지 관리할 전체 백 엔드 서버가 필요하지 않고, 수요에 따라 자동 스케일 아웃 및 스케일 인을 제공합니다. 이러한 함수를 통해 Azure Functions는 정적 자산을 제공하는 쇼핑 목록 웹앱을 위한 훌륭한 API 파트너가 됩니다.

Azure Static Web Apps는 포털의 개요 탭에서 찾을 수 있는 사이트의 고유 URL을 생성합니다. URL에 /api를 추가하여 이 동일한 URL을 통해 API가 제공됩니다.

쇼핑 목록 API

사용자는 쇼핑 목록 앱을 사용하여 목록에서 항목을 가져오고, 추가하고, 업데이트하고, 삭제할 수 있습니다. 따라서 API에는 이러한 요구 사항과 일치하는 엔드포인트가 있어야 합니다.

만드는 네 가지 엔드포인트는 다음과 같습니다.

메서드	경로 엔드포인트	전체 API 엔드포인트
GET	products	api/products
POST	products	api/products
PUT	products/:id	api/products/:id
Delete	products/:id	api/products/:id

HTTP GET 요청은 .로 api/products라우팅됩니다. api 접두사는 앱의 API 엔드포인트용으로 예약됩니다. 사이트 요구 사항에 맞게 다른 경로를 정의할 수 있지만, api는 항상 Azure Functions 앱을 가리킵니다.

웹앱의 API 만들기

지금까지 프런트 엔드 프레임워크를 사용하고 있습니다. 곧 API를 추가하고 프런트 엔드 앱에 연결할 수 있습니다. 리포지토리에는 api-starter 불완전한 Azure Functions 프로젝트와 제품의 PUT, POST 및 DELETE에 대한 HTTP 엔드포인트가 포함된 폴더가 있습니다. API에 HTTP GET 함수가 없습니다. Azure Functions 프로젝트의 API를 완료하고 누락된 함수를 추가합니다. 그런 다음, API를 프런트 엔드 웹앱에 연결합니다.

웹앱의 변경 내용 미리 보기

앱을 변경하기 전에 변경 내용에 사용할 새 분기를 만드는 것이 좋습니다. 앱에 대한 API를 완료하기 위해 몇 가지 변경을 수행하므로 이러한 변경 내용에 대한 분기를 만들어야 합니다.

변경한 후에는 변경 내용을 병합하도록 결정하기 전에 변경 내용이 실행되고 있는지 확인하려고 합니다. 새 분기에서 기본 분기로 끌어오기 요청을 만들면 GitHub 작업은 앱 및 API를 빌드하고 미리 보기 URL에 배포합니다. 이 기능을 사용하면 Azure Static Web Apps를 사용하여 웹앱을 실행 상태로 둘 수 있지만 끌어오기 요청의 결과가 포함된 두 번째 미리 보기 인스턴스도 볼 수 있습니다.

웹앱과 API 간 통신

Azure Functions를 사용하여 로컬로 API를 실행하는 경우 기본적으로 포트 7071에서 실행됩니다. 웹앱은 다른 로컬 포트에서 실행됩니다. 웹앱이 해당 포트에서 API의 포트 7071로 HTTP 요청을 만들려고 하면 이 요청을 CORS(원본 간 리소스 공유)라고 합니다. API 서버가 요청 진행을 허용하지 않으면 브라우저에서 HTTP 요청이 완료되지 않습니다.

Azure Static Web Apps에 게시할 때 CORS에 대해 걱정할 필요가 없습니다. Azure Static Web Apps는 역방향 프록시를 사용하여 Azure에서 API와 통신할 수 있도록 앱을 자동으로 구성합니다. 역방향 프록시는 웹앱 및 API를 동일한 웹 도메인에서 가져오는 것처럼 표시할 수 있는 기능입니다. 따라서 로컬로 실행하는 경우에만 CORS를 설정해야 합니다.

다음 단계

이제 API를 만들고 쇼핑 목록 앱에 대해 HTTP 엔드포인트를 구성할 준비가 되었습니다.