Contoso の不動産向けのパッケージ 化されたソリューション

  • [アーティクル]

Contoso Real Estate アプリケーションには、エンタープライズ レベルの最新のコンポーザブル フロントエンド (またはマイクロフロントエンド) とクラウドネイティブ アプリケーションを構築するための参照アーキテクチャとコンポーネントが含まれています。 これは、最新の JavaScript アプリケーションをビルドして Azure にデプロイするために使用できるベスト プラクティス、アーキテクチャ パターン、および機能コンポーネントのコレクションです。

Diagram showing cloud architecture of Contoso real estate with Hero services on the left and the complete interaction of the services on the right.

次のパッケージは、学習の優先順位に従って一覧表示されます。

Container Apps と Azure Database for PostgreSQL のパブリック ブログ

このパッケージは、垂直マイクロフロントエンド アプリケーション (ブログとポータル) の両方のデータ作成と格納機能を提供します。 これらの機能は、Strapi を搭載したヘッドレス CMS の実装を通じて実現します。

Architectural diagram of the blog client and API scenario.

このソリューションのアーキテクチャを構成するコンポーネントは 2 つあります。

  • ストラップを使用して実装されたヘッドレス CMS。
  • Next.js を使用して実装されたフロントエンド アプリケーション。ヘッドレス CMS からのデータを使用し、ブログ ページをレンダリングします。
  • ヘッドレス CMS のデータを格納する PostegreSQL データベース。 CMS は Azure Container Apps でホストされ、データベースは Azure Database for PostgreSQL でホストされます。 これらは、Strapi サーバー実装に組み込まれているエンドポイントを介して相互に接続します。

これらのアプリケーションはどちらも Azure Container Apps でホストされています。

パッケージ:

Static Web Apps と Azure Functions API を使用してポータルをセキュリティで保護する

このフロントエンド アプリケーションは、JavaScript フレームワークとして Angular を実装するユーザーのメインエントリ ポイントです。

Architectural diagram of the portal client and API scenario.

このサービスは、次のような機能を含む Azure Static Web Apps にデプロイされます

  • 簡単な認証による認証と承認

API バックエンドは Azure Functions にデプロイされます。これは、インフラストラクチャを明示的に管理することなく、オンデマンドでコードを実行できるサーバーレス コンピューティング サービスです。

サーバーレス API バックエンドに統合されたコンテンツ用のデータベースは 、シナリオ 1 のヘッドレス CMS 実装から設定された Azure Database for PostgreSQL です。

サーバーレス API バックエンドに統合されたユーザー イベントとユーザー プロファイルのデータベースは Azure Cosmos DB です。これは、MongoDB API を含む複数の API を提供するフル マネージドの NoSQL データベース サービスです。

パッケージ:

セキュリティで保護されたポータル用の組み込み機能を使用したユーザー認証

ユーザー認証は、ポータル の Azure Static Web アプリの組み込み機能として提供されます。 認証を 完了するためにユーザーを承認プロバイダーにリダイレクトし、認証されたユーザーをアプリケーションにリダイレクトする一般的なサインイン フローは、いくつかのソーシャル メディア プロバイダーで提供されます。

Architectural diagram of the user authentication in the portal application.

ユーザーがログインすると、ユーザー情報は、お気に 入りプロパティやプロパティ予約などの MongoDB 用 Cosmos DB API に格納されます。

ストライプによる支払い

このパッケージは、ポータルでプロパティ予約の支払いを行うチェックアウト プロセスをサポートします。 支払いフローは、オンラインで支払いを受け入れることができる支払い処理プラットフォームである Stripe で実装されます。 このパッケージは、Azure Container Apps にデプロイされた Fastify アプリケーションの支払い処理機能をコンテナー化します

Architectural diagram of the payments service to the Stripe payment provider.

Azure API Management は、Stripe から Webhook エンドポイント URL の要求を受信すると、Fastify API に要求を転送します。 API は受信 Webhook イベントを処理し、チェックout、チェックout completed、チェックout の有効期限切れなどの支払いアクションを実行します。

ストライプ パッケージのソース コード

プレイライト テスト

このパッケージは、Contoso の不動産のエンド ツー エンドテストを提供します。 Playwright を使用してブラウザーを自動化し、アプリケーションのユーザー エクスペリエンスをテストします。

パッケージのソース コードのテスト

ドキュメント サイト

このパッケージは、Contoso の不動産参照アーキテクチャに関する広範なドキュメントを提供します。 これは、モダンな静的なWebサイトジェネレータであるDocusaurusで構築されています。

ドキュメント パッケージのソース コード

次のステップ

最新のクラウド ソリューションを開発する方法について説明します