Web application - AWS Serverless Multi-Tier Architectures with Amazon API Gateway and AWS Lambda

Web application

AWS Cloud architecture diagram showing client interaction with various AWS services.

Architectural pattern for web application

Table 3 - Web application components

Tier Components
Presentation

The front-end application is all static content (HTML, CSS, JavaScript and images) which are generated by React utilities like create-react-app. Amazon CloudFront hosts all these objects. The web application, when used, downloads all the resources to the browser and starts to run from there. The web application connects to the backend calling the APIs.

Logic

Logic layer is built using Lambda functions fronted by API Gateway REST APIs.

This architecture shows multiple exposed services. There are multiple different Lambda functions each handling a different aspect of the application. The Lambda functions are behind API Gateway and accessible using API URL paths.

The user authentication is handled using Amazon Cognito user pools or federated user providers. API Gateway uses out of box integration with Amazon Cognito. Only after a user is authenticated, the client will receive a JSON Web Token (JWT) token which it should then use when making the API calls.

Each Lambda function is assigned its own IAM role to provide access to the appropriate data source.

Data

In this particular example, DynamoDB is used for the data storage but other purpose-built Amazon database or storage services can be used depending on the use case and usage scenario.