DEV Community

Antek
Antek

Posted on

Choosing the Right AWS Hosting Architecture for a Multi-Tenant React Web App: Amplify, App Runner, and EC2 with API Gateway/ALB

#architecture #aws #serverless #react

In building a multi-tenant SaaS web application with a dynamic React frontend, selecting the optimal AWS hosting architecture is critical for balancing cost, scalability, performance, and operational control. This article compares three AWS-based solutions for hosting a React single-page application (SPA) that requires real-time data interactions, API-driven backend logic, and integration with AWS services like Amazon RDS (PostgreSQL) for data storage and Amazon Bedrock for AI-driven functionality. The architectures evaluated are AWS Amplify for serverless SPA hosting, AWS App Runner for serverless containerized apps, and Amazon EC2 with Auto Scaling Groups (ASG), API Gateway, and Application Load Balancer (ALB) for traditional, controlled hosting. After careful analysis, the EC2-based approach was chosen for its superior control and flexibility, despite higher costs and setup effort. This article explores the architectures, their trade-offs, and the rationale behind the decision, offering insights for developers and architects designing similar SaaS platforms.

Problem Statement and Requirements

The web app is a dynamic React SPA serving multiple tenants (e.g., 10 tenants, 200 users), with moderate traffic (~1,000 daily API requests, 1 GB data served/month). It requires:

  • Dynamic Frontend: Real-time interactions like filtering data, opening modals, and triggering AI-driven actions (e.g., via Bedrock).
  • Backend Integration: Queries to RDS for structured data and Bedrock for AI processing.
  • Multi-Tenancy: Tenant isolation (e.g., via customer_id filtering).
  • Constraints: Cost efficiency (~$20-50/month for MVP), scalability to 50+ tenants, minimal operational overhead, and flexibility for custom configurations (e.g., advanced monitoring, server-side logic).
  • Assumptions: Backend data processing is handled separately (e.g., via AWS Glue or Step Functions), and the focus is on hosting the React app and APIs.

The architectures were assessed for cost, setup effort, scalability, performance, and control, with pricing based on US East (N. Virginia) as of September 2025.

Architecture Overviews

1. AWS Amplify (Serverless SPA Hosting)

Amplify is a managed platform for hosting React SPAs, providing built-in CI/CD, backend integrations (e.g., API Gateway/Lambda for dynamics), and Amazon Cognito for authentication. The React build is hosted statically on S3 with CloudFront for global delivery, while APIs handle dynamic queries and AI interactions.

  • Key Components:

    • Frontend: React assets served via S3/CloudFront, with Git-based CI/CD.
    • Backend: API Gateway + Lambda for RDS queries and Bedrock calls.
    • Auth: Cognito for tenant isolation (e.g., customer_id in JWT claims).
    • Workflow: User loads app → CloudFront serves React → API calls fetch data, trigger Bedrock → renders charts/modals.

  • Strengths:

    • Minimal setup (~1-2 days) with Amplify CLI.
    • Pay-per-use pricing (~$0.51-1.74/month hosting).
    • Auto-scaling for traffic spikes.
    • Seamless integration with RDS/Bedrock via Lambda/AppSync.

2. AWS App Runner (Serverless Containerized Hosting)

App Runner hosts containerized apps (e.g., Dockerized React/Node.js), automating builds from Git or ECR, scaling, and routing. It supports dynamic APIs within the container, with optional VPC integration for RDS/Bedrock.

  • Key Components:

    • Container: Docker image with React build and Node.js server for APIs.
    • Backend: Container handles RDS/Bedrock requests.
    • Auth: Cognito integrated manually.
    • Workflow: App Runner serves app → processes API requests, queries RDS, calls Bedrock.

  • Strengths:

    • Simplified container management (~2-3 days setup).
    • Auto-scaling with moderate cost (~$6.39-7.49/month).
    • Supports custom runtimes.

3. Amazon EC2 with ASG, API Gateway, and ALB (Traditional Controlled Hosting)

EC2 instances (t4g.medium in ASG) run a Node.js server for React and APIs, with ALB for load balancing and API Gateway for external routing. This offers full control over the server environment.

  • Key Components:

    • Compute: EC2 ASG with Node.js (Express) serving React and APIs.
    • Routing: ALB for internal traffic, API Gateway for external.
    • Backend: Direct RDS/Bedrock access from EC2.
    • Auth: Cognito with custom integration.
    • Workflow: ALB routes requests → EC2 serves React/APIs → queries RDS, calls Bedrock.

  • Strengths:

    • Granular control over OS, network, and configurations.
    • Consistent performance with no cold starts.

Comparison of Architectures

The architectures were evaluated based on cost, setup effort, scalability, performance, and control for the MVP use case.

Cost

  • Amplify: ~$0.51-1.74/month (hosting: builds ~$0.10, 1 GB served ~$0.02, 30,000 requests ~$0.39; API Gateway/Lambda ~$0.13; Cognito ~$1.10, free tier ~$0) + data (RDS ~$12.41, Bedrock ~$1-10) = ~$15.92-25.15/month. Pay-per-use scales with traffic (e.g., 10x requests = ~$1.10/month).
  • App Runner: ~$6.39-7.49/month (compute ~$6.28, requests/data ~$0.11; Cognito ~$1.10, free tier ~$0) + data = ~$21.80-30.90/month. Base compute cost persists even at low traffic.
  • EC2 ASG/ALB/API Gateway: ~$25.33-26.43/month (t4g.medium ~$24.53, EBS ~$0.80, Cognito ~$1.10, free tier ~$0) + ALB ~$16.50 + API Gateway ~$0.11 + data = ~$53.85-62.95/month. Fixed instance cost dominates, but predictable.
  • Analysis: Amplify is cheapest for low traffic, followed by App Runner. EC2 is costlier but stable for steady loads.

Setup Effort

  • Amplify: Low (~1-2 days, 10-20 dev hours). CLI automates S3/CloudFront, API Gateway/Lambda, and Cognito setup. Example: amplify add api/auth/hosting, deploy with amplify publish.
  • App Runner: Medium (~2-3 days, 15-30 hours). Requires Docker/ECR setup, manual Cognito integration, but auto-builds from Git.
  • EC2 ASG/ALB/API Gateway: High (~3-5 days, 20-40 hours). Manual EC2 configuration (Node.js, security groups), ASG/ALB setup, and custom CI/CD (e.g., GitHub Actions).
  • Analysis: Amplify minimizes setup; EC2 requires significant infrastructure scripting.

Scalability

  • Amplify: Automatic scaling (S3/CloudFront/Lambda handle infinite traffic).
  • App Runner: Automatic (container instances scale dynamically).
  • EC2 ASG/ALB/API Gateway: Configurable scaling (ASG min/max instances, ALB targets).
  • Analysis: Serverless options scale effortlessly; EC2 requires tuning but offers precise control.

Performance

  • Amplify: Low latency (~ms for APIs, CloudFront caching). Lambda cold starts (~100-500ms) mitigated with Provisioned Concurrency (~$0.01/month).
  • App Runner: Good (~100ms container starts, no significant cold starts).
  • EC2 ASG/ALB/API Gateway: Consistent (~ms, no cold starts), customizable with instance types.
  • Analysis: EC2 ensures predictable performance; serverless risks minor delays.

Control and Flexibility

  • Amplify: Low (AWS abstractions limit OS/network configs).
  • App Runner: Medium (container runtime control, but no OS access).
  • EC2 ASG/ALB/API Gateway: High (full control over OS, network, ALB rules, logging).
  • Analysis: EC2 excels for tailored environments, critical for complex SaaS needs.

Rationale for Selecting EC2 with ASG, API Gateway, and ALB

The EC2-based architecture with Auto Scaling Groups, API Gateway, and Application Load Balancer was chosen for its unmatched control and flexibility, aligning with the long-term needs of a multi-tenant SaaS platform despite higher costs and setup effort.

  • Granular Control: The platform demands precise network configurations (e.g., VPC peering for RDS), advanced monitoring (e.g., ALB logs for audit compliance), and potential server-side rendering (SSR) for future SEO or real-time features (e.g., WebSocket for live updates). EC2 with ALB enables these, unlike Amplify’s rigid abstractions or App Runner’s container constraints. For example, ALB rules can prioritize tenant-specific traffic, and EC2 allows custom logging for security analytics.
  • Performance Consistency: EC2 delivers consistent ~ms latency without cold starts, critical for real-time dashboard interactions (e.g., filtering data, triggering Bedrock actions). Amplify and App Runner risk Lambda/container cold starts (~100-500ms), impacting user experience during MVP testing.
  • Cost Predictability: Fixed pricing (~$53-63/month) aids budgeting for a startup, avoiding Amplify’s variable per-request fees (~$0.013/1,000 requests) or App Runner’s base compute cost (~$6.28/month), which could spike with traffic growth.
  • Extensibility: EC2 supports advanced integrations (e.g., WebSockets, custom middleware) and hybrid scaling (ASG for compute, API Gateway for external APIs), preparing the platform for enterprise features like compliance or real-time notifications. Amplify’s abstractions and App Runner’s container model limit such customizations.
  • Operational Familiarity: Teams familiar with traditional server management can leverage existing EC2 expertise, reducing the learning curve compared to Amplify’s serverless abstractions.

Why Not Amplify?

Amplify offers the lowest cost (~$15-26/month) and fastest setup (~1-2 days), with seamless CI/CD and integrations for RDS/Bedrock via Lambda/AppSync. Its serverless model excels for SPAs, auto-scaling effortlessly. However, its limited control over infrastructure (e.g., no custom VPC rules) and preview-only SSR support restrict its ability to handle advanced configurations or future expansions like real-time features, making it less suitable for a production-grade SaaS requiring tailored environments.

Why Not App Runner?

App Runner provides serverless simplicity (~$21-31/month) with containerized hosting, reducing management overhead compared to EC2. It auto-scales and supports custom runtimes, suitable for Dockerized React/Node.js apps. However, it lacks granular OS/network control (e.g., no direct access for custom logging) and incurs a base compute cost even at low traffic, unlike EC2’s predictable pricing. For a SaaS needing fine-tuned configurations, App Runner falls short.

Benefits of the Chosen EC2 Architecture

  • Customizability: Full control over server environment, enabling complex configurations (e.g., VPC, custom logging).
  • Performance: Consistent ~ms latency without cold starts, ideal for real-time dashboards.
  • Scalability: ASG adjusts instances based on load, with ALB optimizing traffic routing.
  • Cost Management: Fixed pricing (~$53-63/month) supports budgeting, with potential savings via Reserved Instances (~20-30% discount).
  • Extensibility: Supports WebSockets, SSR, or advanced monitoring, preparing for enterprise-grade features.

Conclusion

The comparison highlights the trade-offs in AWS hosting for a multi-tenant React web app: Amplify and App Runner excel in simplicity and cost for serverless MVPs, while EC2 with ASG, API Gateway, and ALB offers the control needed for a production-ready SaaS. The EC2 choice prioritizes flexibility and reliability, ensuring the platform can evolve to meet complex requirements. Developers and architects building similar systems should weigh control against operational simplicity, leveraging AWS’s diverse offerings to align with their goals. For detailed implementations, consult AWS documentation or engage with certified solutions architects.

Top comments (0)