Table of content
Introduction
Modern web apps need to be fast and resilient. If your users are global, a single-region setup can become a bottleneck - both for latency and for availability when a region has issues.
In this post, we’ll look at how to host a static React application using:
- S3 Multi-Region Access Point (MRAP) for multi-region resilience and latency-based routing to your app assets.
- CloudFront with an Origin Access Control (OAC) to securely serve your content from edge locations.
---
title: Resilient WebApp via S3 MRAP
config:
theme: forest
---
graph LR
CF@{ img: "https://pujan.net/assets/aws/cf.svg", pos: "t", w: 80, h: 80, constraint: "on" }
Route53@{ img: "https://pujan.net/assets/aws/route53.svg", pos: "t", w: 80, h: 80, constraint: "on" }
S31@{ img: "https://pujan.net/assets/aws/s3.svg", label: "(S3 Bucket<br/>my-react-app-eu-west-1)", pos: "t", w: 80, h: 80, constraint: "on" }
S32@{ img: "https://pujan.net/assets/aws/s3.svg", label: "(S3 Bucket<br/>my-react-app-us-west-1)", pos: "t", w: 80, h: 80, constraint: "on" }
U(Browser) e1@--> Route53
Route53 e2@--> CF
CF e3@--Signed Request via OAC--> S3MRAP(S3 MRAP)
S3MRAP e4@--Latency-based Routing --> S31
S3MRAP e5@--Latency or failover routing--> S32
e1@{ animation: fast }
e2@{ animation: fast }
e3@{ animation: fast }
e4@{ animation: fast }
e5@{ animation: fast }What is S3 MRAP?
S3 Multi-Region Access Points provide a single global endpoint to access your data across multiple S3 buckets in different AWS regions. Instead of managing multiple endpoints and complex routing logic, MRAP handles cross-region failover automatically, ensuring your application maintains high availability and performance.
Benefits for Web Application Hosting
Enhanced Availability
With MRAP, web application can seamlessly access content from the nearest region. If one region experiences an outage, requests are automatically routed to other available regions, minimizing downtime and maintaining user experience.
Improved Performance
By serving content from geographically closer locations, MRAP reduces latency and improves load times. When combined with CloudFront’s edge caching, this creates a powerful global content delivery network.
Simplified Architecture
Rather than managing multiple regional endpoints and complex failover mechanisms, MRAP provides a single endpoint that abstracts the complexity of multi-region data access.
Best Practices
Content Synchronization
Ensure all your regional S3 buckets remain synchronized. Use S3 Cross-Region Replication or deployment pipelines to maintain consistency across regions.
Caching Strategy
Configure appropriate TTL values in CloudFront to balance performance and content freshness. Static assets can have longer cache times, while dynamic content should have shorter TTLs.
Monitoring and Observability
Implement comprehensive monitoring using CloudWatch to track performance metrics, error rates, and failover events across regions.
Cost Optimization
Monitor your data transfer costs between regions and optimize your caching strategy to minimize cross-region requests while maintaining resilience.
Wrap-Up
S3 Multi-Region Access Points combined with CloudFront offer a robust solution for hosting resilient web applications. By combining S3 Multi-Region Access Points and CloudFront with Origin Access Control, we get:
- Global performance: Edge caching and latency-based routing.
- Resilience: Multi-region S3 behind MRAP.
- Security: Private S3, public only via CloudFront with signed OAC requests.
- Clean deployments: Standard React build, synced via CI/CD.