Architect scalable e-commerce web app

Solution Idea

If you'd like to see us expand this article with more information (implementation details, pricing guidance, code examples, etc), let us know with GitHub Feedback!

Architecture

2 1 7 8 9 6 5 4 3

User accesses the web app in browser and signs in.

Browser pulls static resources such as images from Azure Content Delivery Network.

User searches for products and queries SQL database.

Web site pulls product catalog from database.

Web app pulls product images from Blob Storage.

Page output is cached in Azure Cache for Redis for better performance.

User submits order and order is placed in the queue.

Azure Functions processes order payment.

Azure Functions makes payment to third party and records payment in SQL database.

Data Flow

  1. User accesses the web app in browser and signs in.
  2. Browser pulls static resources such as images from Azure Content Delivery Network.
  3. User searches for products and queries SQL database.
  4. Web site pulls product catalog from database.
  5. Web app pulls product images from Blob Storage.
  6. Page output is cached in Azure Cache for Redis for better performance.
  7. User submits order and order is placed in the queue.
  8. Azure Functions processes order payment.
  9. Azure Functions makes payment to third party and records payment in SQL database.

Components

  • Web Apps: An App Service Web App runs in a single region, accessible to web and mobile browsers
  • Azure SQL Database: Managed, intelligent SQL in the cloud
  • Azure Functions: Process events with serverless code
  • Application Insights: Detect, triage, and diagnose issues in your web apps and services

Next Steps