This Guidance demonstrates how to build a headless ecommerce web application, using AWS services to implement a frontend web user interface (UI), backend services, and core ecommerce capabilities. These core capabilities include search, personalization, marketing, fraud detection, customer authentication, location services, and chatbots. The Guidance is designed to enrich the customer experience through an ecommerce web application that is both scalable and cost-effective.
Architecture Diagram
-
Part 1
-
Part 2
-
Part 1
-
This architecture diagram demonstrates how to build an ecommerce web application on AWS with decoupled UI and back-end service layers. Follow the steps in this architecture diagram to deploy Part 1 of this Guidance.
Click to enlarge
Step 1
Customers access the web application through different channels. Amazon Route 53 enables frontend clients to resolve the website hostname to Amazon CloudFront, which routes the web requests to origin servers and caches the static content and assets served from Amazon Simple Storage Service (Amazon S3) and origin servers.
It also secures the application traffic using AWS WAF (Web Application Firewall), which helps protect the application against common exploits and bots.
Step 2
The web application uses Amazon Cognito to perform authentication (user sign-up, sign-in) and authorization of backend APIs.
Step 3
Amazon S3 is a highly available and durable object storage service that stores and serves the static assets, such as images and videos.Step 4
Application Load Balancer serves the frontend web requests by automatically distributing the incoming traffic across multiple Web Tier targets, deployed in multiple Availability Zones.
Step 5
Amazon API Gateway is a fully managed service that interfaces the backend microservices to access data and execute the business logic. These microservices are exposed as restful APIs for consumption by the Web Tier and the mobile app.
Step 6
Ecommerce Frontend/Web Tier is a headless and responsive web UI, built on your choice of frontend technologies (like ReactJS, VueJS, AngularJS, NodeJS, etc.) and deployed on AWS Fargate. This Web Tier uses Amazon ElasticCache to cache static content and orchestrated backend API responses. The Amazon DynamoDB table persists the user sessions and frontend application configurations.
Step 7
Ecommerce backend services (App Tier), a set of stateless restful microservices, are built to access the data and execute specific business logic, such as OrderMx for cart and checkout and PaymentMx for handling payments. These microservices are deployed on Fargate and Lambda.DynamoDB in the App Tier provides the ecommerce application data store, storing data on products, customers, and customer transactions. DynamoDB Accelerator (DAX) caches the database query results, while ElastiCache caches the transformed response of individual microservices.
Step 1
Customers access the web application through different channels. Amazon Route 53 enables frontend clients to resolve the website hostname to Amazon CloudFront, which routes the web requests to origin servers and caches the static content and assets served from Amazon Simple Storage Service (Amazon S3) and origin servers.
It also secures the application traffic using AWS WAF (Web Application Firewall), which helps protect the application against common exploits and bots.
Step 2
The web application uses Amazon Cognito to perform authentication and authorization of backend APIs.
Step 3
Amazon S3 is a highly available and durable object storage service that stores and serves the static assets, such as images and videos.Step 4
Application Load Balancer serves the frontend web requests by automatically distributing the incoming traffic across multiple Web Tier targets, deployed in multiple Availability Zones.
Step 5
Amazon API Gateway is a fully managed service that interfaces the backend microservices to access data and execute the business logic. These microservices are exposed as restful APIs for consumption by the Web Tier and the mobile app.
Step 6
Ecommerce Frontend/Web Tier is a headless and responsive web UI, built on your choice of frontend technologies (like ReactJS, VueJS, AngularJS, NodeJS, etc.) and deployed on AWS Fargate. This Web Tier uses Amazon ElasticCache to cache static content and orchestrated backend API responses. The Amazon DynamoDB table persists the user sessions and frontend application configurations.
Step 7
Ecommerce backend services (App Tier), a set of stateless restful microservices, are built to access the data and execute specific business logic, such as OrderMx for cart and checkout and PaymentMx for handling payments. These microservices are deployed on Fargate and Lambda.DynamoDB in the App Tier provides the ecommerce application data store, storing data on products, customers, and customer transactions. DynamoDB Accelerator (DAX) caches the database query results, while ElastiCache caches the transformed response of individual microservices.
-
Part 2
-
This architecture diagram demonstrates how the serverless event bus is used by both Web and App Tiers to emit events that will be consumed asynchronously. Follow the steps in this architecture diagram to deploy Part 2 of this Guidance.
Click to enlarge
Step 8
Amazon EventBridge is a serverless event bus used by both the Web and App Tiers to emit events that will be consumed asynchronously by the microservices in the App Tier and other supported sources to perform specific actions.As an example, a Customer Consent sign-up action on the frontend invokes an event to EventBridge. In response, Eventbridge invokes multiple backend microservices to execute independent business logic and update isolated applications and data stores such as DynamoDB, Amazon Pinpoint, and third-party customer management system (CMS) and marketing systems.
Step 9
Both the Web and App Tiers use Amazon Elastic File System (Amazon EFS) to share common code and files such as properties and configurations, JavaScript, CSS, and JSON templates.Step 10
A set of AWS services delivers core ecommerce business capabilities. Amazon Open Search Service provides intelligent search and filtering of products. Amazon Personalize offers artificial intelligence and machine learning (AI/ML)-powered product recommendations. Amazon Pinpoint supports marketing campaigns and push notifications. Amazon Location Service provides maps, a store locator, and delivery tracking.Amazon Fraud Detector detects fraudulent transactions, such as malicious attempts of customer log-in and payment. Amazon Lex deploys an AI/ML-powered chatbot.
Step 11
Amazon Simple Queue Service (Amazon SQS) first in, first out (FIFO) publishes the order messages for the orders placed by customers using the ecommerce application. These are published to the Order Management System (OMS) for processing and fulfillment.
Step 12
Amazon Managed Streaming for Apache Kafka (Amazon MSK) performs extract, transform, and load activities (ETL) at scale, such as importing data feeds into ecommerce data stores. These include product and catalog data from product information management (PIM), near real-time inventory, and order status updates from supply chain systems.
Step 13
Key third-party services integrate with the ecommerce application to deliver business capabilities.
Step 8
Amazon EventBridge is a serverless event bus used by both the Web and App Tiers to emit events that will be consumed asynchronously by the microservices in the App Tier and other supported sources to perform specific actions.As an example, a Customer Consent sign-up action on the frontend invokes an event to EventBridge. In response, Eventbridge invokes multiple backend microservices to execute independent business logic and update isolated applications and data stores such as DynamoDB, Amazon Pinpoint, and third-party customer management system (CMS) and marketing systems.
Step 9
Both the Web and App Tiers use Amazon Elastic File System (Amazon EFS) to share common code and files such as properties and configurations, JavaScript, CSS, and JSON templates.Step 10
A set of AWS services delivers core ecommerce business capabilities. Amazon Open Search Service provides intelligent search and filtering of products. Amazon Personalize offers artificial intelligence and machine learning (AI/ML)-powered product recommendations. Amazon Pinpoint supports marketing campaigns and push notifications. Amazon Location Service provides maps, a store locator, and delivery tracking.Amazon Fraud Detector detects fraudulent transactions, such as malicious attempts of customer log-in and payment. Amazon Lex deploys an AI/ML-powered chatbot.
Step 11
Amazon Simple Queue Service (Amazon SQS) first in, first out (FIFO) publishes the order messages for the orders placed by customers using the ecommerce application. These are published to the Order Management System (OMS) for processing and fulfillment.
Step 12
Amazon Managed Streaming for Apache Kafka (Amazon MSK) performs extract, transform, and load activities (ETL) at scale, such as importing data feeds into ecommerce data stores. These include product and catalog data from product information management (PIM), near real-time inventory, and order status updates from supply chain systems.
Step 13
Key third-party services integrate with the ecommerce application to deliver business capabilities.
Well-Architected Pillars
The AWS Well-Architected Framework helps you understand the pros and cons of the decisions you make when building systems in the cloud. The six pillars of the Framework allow you to learn architectural best practices for designing and operating reliable, secure, efficient, cost-effective, and sustainable systems. Using the AWS Well-Architected Tool, available at no charge in the AWS Management Console, you can review your workloads against these best practices by answering a set of questions for each pillar.
The architecture diagram above is an example of a Solution created with Well-Architected best practices in mind. To be fully Well-Architected, you should follow as many Well-Architected best practices as possible.
-
Operational ExcellenceRead the Operational Excellence whitepaper
The majority of the services in this Guidance are either AWS managed or serverless, reducing your operational overhead. This allows the undifferentiated "heavy lifting" of maintaining infrastructure and servers or services to be offloaded to AWS.
-
SecurityRead the Security whitepaper
The “front door” of the architecture is CloudFront, which allows you to enable TLS to secure data in transit. You can also use AWS WAF and AWS Shield to protect from any malicious attacks. Data at rest in AWS is encrypted in a way that allows you to choose an encryption key.
All the services in the architecture diagram can be protected with fine-grained, resource-level permissions. Services communicate with one another through service roles.
-
ReliabilityRead the Reliability whitepaper
The core compute services in this Guidance can be deployed in multiple Availability Zones for high availability. Amazon S3 provides 99.9999999% (11 9s) of data durability. Additionally, all other services in the architecture diagram can be configured for resiliency to address your recovery time objective (RTO) and recovery point objective (RPO) requirements.
-
Performance EfficiencyRead the Performance Efficiency whitepaper
This Guidance efficiently handles varying request volumes through the serverless architecture diagram. It also makes use of CloudFront, ElastiCache, and DAX to cache data at various tiers, improving application performance.
You have complete control to choose the most appropriate configurations for each of the services to meet your requirements for performance efficiency, such as allocating the right vCPUs and storage for Amazon Elastic Container Service (Amazon ECS) tasks or choosing the read capacity units (RCUs) and web access control list (ACL) capacity units (WCU) for DynamoDB.
-
Cost OptimizationRead the Cost Optimization whitepaper
The serverless services used in this Guidance allow you to pay only for the exact resources you use. A benefit of AWS managed services is that there are no costs for maintaining servers. Additionally, cache layering at different tiers eliminates the frequency of data or service access, further reducing costs.
-
SustainabilityRead the Sustainability whitepaper
Compute services in the architecture diagram are serverless, contributing to the overall sustainability of this Guidance. For more efficient sustainability, you can choose latest AWS Graviton processors for the compute services.
Implementation Resources
A detailed guide is provided to experiment and use within your AWS account. Each stage of building the Guidance, including deployment, usage, and cleanup, is examined to prepare it for deployment.
The sample code is a starting point. It is industry validated, prescriptive but not definitive, and a peek under the hood to help you begin.
Related Content
[Title]
Disclaimer
The sample code; software libraries; command line tools; proofs of concept; templates; or other related technology (including any of the foregoing that are provided by our personnel) is provided to you as AWS Content under the AWS Customer Agreement, or the relevant written agreement between you and AWS (whichever applies). You should not use this AWS Content in your production accounts, or on production or other critical data. You are responsible for testing, securing, and optimizing the AWS Content, such as sample code, as appropriate for production grade use based on your specific quality control practices and standards. Deploying AWS Content may incur AWS charges for creating or using AWS chargeable resources, such as running Amazon EC2 instances or using Amazon S3 storage.
References to third-party services or organizations in this Guidance do not imply an endorsement, sponsorship, or affiliation between Amazon or AWS and the third party. Guidance from AWS is a technical starting point, and you can customize your integration with third-party services when you deploy the architecture.