# Guidance for Web Store on AWS

## Overview

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.

## How it works

### How it works

[Download the architecture diagram](https://d1.awsstatic.com/solutions/guidance/architecture-diagrams/web-store-on-aws.pdf)Step 1Customers 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 2The web application uses Amazon Cognito to perform authentication and authorization of backend APIs.Step 3Amazon S3 is a highly available and durable object storage service that stores and serves the static assets, such as images and videos.Step 4Application Load Balancer serves the frontend web requests by automatically distributing the incoming traffic across multiple Web Tier targets, deployed in multiple Availability Zones.Step 5Amazon 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 6Ecommerce 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 7Ecommerce 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 8Amazon 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 9Both 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 10A 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 11Amazon 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 12Amazon 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 13Key third-party services integrate with the ecommerce application to deliver business capabilities.### How it works

[Download the architecture diagram](https://d1.awsstatic.com/solutions/guidance/architecture-diagrams/web-store-on-aws.pdf)Step 1Customers 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 2The web application uses Amazon Cognito to perform authentication and authorization of backend APIs.Step 3Amazon S3 is a highly available and durable object storage service that stores and serves the static assets, such as images and videos.Step 4Application Load Balancer serves the frontend web requests by automatically distributing the incoming traffic across multiple Web Tier targets, deployed in multiple Availability Zones.Step 5Amazon 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 6Ecommerce 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 7Ecommerce 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 8Amazon 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 9Both 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 10A 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 11Amazon 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 12Amazon 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 13Key third-party services integrate with the ecommerce application to deliver business capabilities.## Well-Architected Pillars

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 Excellence

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. [Read the Operational Excellence whitepaper](/wellarchitected/latest/operational-excellence-pillar/welcome.html)


### Security

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. [Read the Security whitepaper](/wellarchitected/latest/security-pillar/welcome.html)


### Reliability

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. [Read the Reliability whitepaper](/wellarchitected/latest/reliability-pillar/welcome.html)


### Performance Efficiency

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. [Read the Performance Efficiency whitepaper](/wellarchitected/latest/performance-efficiency-pillar/welcome.html)


### Cost Optimization

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. [Read the Cost Optimization whitepaper](/wellarchitected/latest/cost-optimization-pillar/welcome.html)


### Sustainability

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. [Read the Sustainability whitepaper](/wellarchitected/latest/sustainability-pillar/sustainability-pillar.html)


[Read usage guidelines](/solutions/guidance-disclaimers/)