Azure Functions를 사용하여 API 빌드
이제 쇼핑 목록 앱용 API를 만들 차례입니다.
Azure Functions
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에는 이러한 요구 사항에 맞는 엔드포인트가 있다는 것이 합리적입니다.
다음은 4개의 엔드포인트입니다.
| 메서드 | 경로 엔드포인트 | 전체 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를 추가하고 이를 프런트 엔드 앱에 연결합니다. 리포지토리에는 불완전한 Azure Functions 프로젝트와 제품의 PUT, POST 및 DELETE를 위한 HTTP 엔드포인트를 포함하는 Api 프로젝트가 있습니다. API에 HTTP GET 함수가 없습니다. Azure Functions 프로젝트의 API를 완료하고 누락된 함수를 추가한 다음 API를 프런트 엔드 웹앱에 연결합니다.
웹앱의 변경 내용 미리 보기
앱을 변경하기 전에 변경 내용에 사용할 새 분기를 만드는 것이 좋습니다. 앱에 대한 API를 완료할 때 몇 가지 변경 내용을 적용하므로 이러한 변경 내용에 대한 분기를 만듭니다.
변경한 후에는 변경 내용을 병합하도록 결정하기 전에 변경 내용이 실행되고 있는지 확인하려고 합니다. 새 분기에서 main 분기로 끌어오기 요청을 만들면 GitHub 작업이 앱 및 API를 빌드하여 미리 보기 URL에 배포합니다. 이 미리 보기 URL을 사용하면 Azure Static Web Apps를 사용하여 Web Apps를 계속 실행할 수 있을 뿐만 아니라 끌어오기 요청의 결과가 포함된 두 번째 URL도 볼 수 있습니다.
웹앱과 API 간에 통신 구성
API를 로컬로 실행하면 이 API는 기본적으로 포트 7071에서 실행됩니다. 웹앱은 다른 로컬 포트에서 실행됩니다. 웹앱이 해당 포트에서 API의 포트 7071로 HTTP 요청을 만들려고 시도하는 경우 이 작업을 CORS(원본 간 리소스 공유)라고 합니다. API 서버가 요청 진행을 허용하지 않으면 브라우저에서 HTTP 요청이 완료되지 않습니다.
Azure Static Web Apps에 게시할 때 CORS에 대해 걱정할 필요가 없습니다. Azure Static Web Apps는 역방향 프록시를 사용하여 Azure에서 API와 통신할 수 있도록 앱을 자동으로 구성합니다. 역방향 프록시는 웹앱 및 API를 동일한 웹 도메인에서 가져오는 것처럼 표시할 수 있는 기능입니다. 따라서 로컬로 실행하는 경우에만 CORS를 설정해야 합니다.
다음 단계
이제 API를 만들고 쇼핑 목록 앱에 대해 HTTP 엔드포인트를 구성할 준비가 되었습니다.