Designing Scalable Web Architecture: From Front‑End to Data Center

1. Front‑End Architecture

The front end covers the steps before a user request reaches the application server, typically excluding business logic and dynamic content processing.

Browser Optimization Techniques

Rather than optimizing the browser itself, improve page response to speed up loading and rendering, using page caching, HTTP request consolidation, and compression.

CDN

Content Delivery Networks deploy static content in ISP data centers, delivering it from the nearest edge server to reduce latency.

Static‑Dynamic Separation

Static assets such as JS and CSS are hosted on dedicated server clusters and served via a separate sub‑domain, isolated from dynamic application servers.

Image Service

User‑generated images (product photos, avatars, etc.) are served from an independent image server cluster with its own sub‑domain, separate from other static assets.

Reverse Proxy

Placed before application, static, and image servers, a reverse proxy provides page caching services.

DNS

Domain Name Service resolves domain names to IP addresses; DNS can be used for load balancing and to point domains to CDN servers.

2. Application Layer Architecture

The application layer handles the core business logic of the website.

Development Framework

A robust framework separates concerns, allowing designers and developers to work independently, facilitates collaboration, and embeds security policies to defend against web attacks.

Page Rendering

Dynamic content and static templates are combined to produce the final page presented to users.

Load Balancing

Multiple application servers form a cluster; a load balancer distributes incoming requests across them to handle high concurrency.

Session Management

Stateless application servers rely on a dedicated session mechanism so that user session data can be shared across servers or clusters.

Dynamic Page Staticization

High‑traffic pages that change infrequently can be pre‑generated as static pages and served via reverse proxy, CDN, or browser cache.

Business Splitting

Large, complex functionalities are broken into smaller, independently developed products, reducing system coupling and simplifying database sharding.

Virtualized Servers

Physical servers are virtualized into multiple virtual machines, allowing lower‑traffic services to run with fewer resources while maintaining high availability.

3. Service Layer Architecture

This layer provides foundational services for the application layer.

Distributed Messaging

Message queues enable asynchronous communication and loose coupling between services and business components.

Distributed Services

High‑performance, low‑coupling services are exposed via a Service‑Oriented Architecture (SOA).

Distributed Caching

Scalable cache clusters store hot data to improve website performance.

Distributed Configuration

Configuration changes (e.g., adding cache nodes) can be pushed to running applications without restarting servers.

4. Storage Layer Architecture

This layer offers persistent data and file storage services.

Distributed File System

Websites store massive numbers of small files (images, videos, etc.) requiring a scalable distributed file system.

Relational Databases

Most business logic relies on relational databases, but they lack strong clustering support; routing logic can direct queries to different physical databases for scalability.

NoSQL Databases

Various NoSQL solutions provide advantages in memory management, data models, and distributed clustering; HBase is highlighted as a leading option.

Data Synchronization

Before global distributed databases mature, multi‑data‑center sites replicate transaction logs or write‑ahead logs to other centers to achieve data consistency.

5. Backend Architecture

Beyond real‑time request handling, the backend processes non‑real‑time analytics.

Search Engine

Internal search engines perform incremental and full‑index updates on a scheduled basis.

Data Warehouse

Offline data is used for analysis and data mining services.

Recommendation System

Social and e‑commerce sites mine user‑item relationships to deliver personalized recommendations.

6. Data Collection and Monitoring

Monitoring website traffic and system health supports operational decisions and maintenance.

Browser Data Collection

Embedded JavaScript gathers browser environment and user actions for behavior analysis.

Server Business Data Collection

Collects request logs and runtime metrics such as pending message counts.

Server Performance Data Collection

Metrics include system load, memory usage, and network throughput.

System Monitoring

Collected data is visualized for operations teams; advanced setups trigger automated remediation.

System Alerts

When metrics exceed thresholds (e.g., high load), alerts are sent via email, SMS, or voice calls for engineer intervention.

7. Security Architecture

Protects the website from attacks and safeguards sensitive information.

Web Attacks

Common threats include XSS and SQL injection; proper measures can effectively mitigate them.

Data Protection

Encrypt transmission and storage of sensitive data to protect assets.

8. Data Center and Facility Architecture

Large‑scale sites with hundreds of thousands of servers require careful data‑center design.

Facility Design

Power consumption per server (including cooling) can reach ~2000 CNY annually; total electricity costs can be billions, prompting locations with good cooling and power availability.

Rack Design

Consider rack size, cable layout, indicator lights, UPS, and voltage standards (48 V DC vs. 220 V AC).

Server Design

Custom‑built servers omit unnecessary peripherals and optimize space for heat dissipation based on application needs.