Contoso 부동산 엔터프라이즈 앱 시작

Contoso 부동산 애플리케이션에는 엔터프라이즈급 최신 구성 가능 프런트 엔드(또는 마이크로 프런트 엔드) 및 클라우드 네이티브 애플리케이션을 빌드하기 위한 참조 아키텍처 및 구성 요소가 포함되어 있습니다. 최신 JavaScript 애플리케이션을 빌드하고 Azure에 배포하는 데 사용할 수 있는 모범 사례, 아키텍처 패턴 및 기능 구성 요소의 컬렉션입니다.

Contoso 부동산 앱

Contoso 부동산 엔터프라이즈 앱을 사용하면 Contoso 회사의 직원이 웹앱을 통해 예비 이주 주택을 검색할 수 있습니다. 이 웹앱은 Contoso HR 및 신입 사원 또는 재배치 직원이 사용하는 내부 도구입니다. 인증된 인재 관리자와 신입 사원은 모두 애플리케이션 기능과 상호 작용할 수 있는 반면, 인증되지 않은 사용자는 일부 기능에 액세스할 수 있습니다.

필수 조건

이 전체 앱 솔루션을 Azure에 배포하려면 다음이 필요합니다.

  • Azure 구독 - 체험 구독 만들기
  • GitHub 계정. 없는 경우 평가판에 등록하세요.
  • 헤드리스 CMS에 대한 Strapi 계정
  • 결제를 위한 Stripe 계정

애플리케이션

Contoso 부동산 앱에는 포털과 블로그의 두 클라이언트 애플리케이션이 있습니다. 블로그새로운 부동산 제품을 공개하고 인증 없이 표시되는 경우 공개합니다. 포털 앱은 목록을 보고, 예약하고, 요금을 지불하기 위해 인증이 필요합니다. 별도의 개발 팀은 고유한 기술 스택을 사용하여 이 엔드 투 엔드 아키텍처를 빌드하고 지원합니다.

다음을 사용하여 공개 블로그:

블로그 및 해당 API는 Azure Container Apps에서 호스트됩니다. 블로그 콘텐츠는 Azure Database for PostrgreSQL에 저장된 데이터가 있는 헤드리스 Strapi CMS에서 제공됩니다. CMS는 또한 부동산 목록을 저장합니다. 목록의 속성 이미지는 Azure Blob Storage저장됩니다.

Screenshot of Contoso blog featuring information about technology, news, gastronomy, releases, and locations relevant to users of the HR relocation portal.

Angular를 사용하여 포털 클라이언트 보호

포털Azure Functions 앱의 API 지원을 통해 Azure 정적 웹앱에서 호스트됩니다. 또한 Azure Database for PostrgreSQL에 보관된 목록을 사용합니다. 포털은 Microsoft, Google 및 Facebook과 같은 소셜 공급자를 통해 인증을 제공합니다.

Screenshot of Contoso portal featuring several property listings with images, descriptions, and prices.

사용자가 로그인하고 속성을 선택하면 속성을 예약하도록 선택한 다음 Stripe 통합을 사용하여 비용을 지불할 수 있습니다.

Screenshot of Contoso portal property page showing property images, details, and offering a user the ability to reserve the property with a payment form.

사용되는 다른 Azure 서비스는 다음과 같습니다.

패키지

이 애플리케이션은 여러 패키지로 나뉩니다. 각 패키지는 패키지를 빌드하고 Azure에 배포하는 데 도움이 되는 패키지의 시나리오와 단계별 지침을 설명합니다.

Package(패키지) 기술 스택
블로그, Blob-CMS 모두 Azure Container 앱에서 호스트되는 Strapi CMS가 있는 Next.js 앱입니다.
포털, API 백 엔드에 대한 Azure Functions API 앱을 사용하여 Static Web Apps에서 호스트되는 Angular 웹 포털입니다.
스트라이프 Azure Container App에서 API Payment 서비스 API를 빠르게 만듭니다.
테스트 극작가를 사용한 종단 간 테스트.
문서 이 종단 간 솔루션에 대해 자세히 알아봅니다.

다음 단계