Skip to main content

Catalog Overview

This is the recommended architecture for web application development using Lambda Web Adapter.

Catalog Overview​

This is the configuration diagram of the source code included in this catalog.

Architecture​

The documentation and source code included in this catalog assumes the following architecture.

Although this is a simple architecture, the main points are as follows:

  • Deploy built React Router v7 or Next.js 15 applications on AWS Lambda (using AWS Lambda Web Adapter)

  • Enable caching and custom domains by accessing through CloudFront Apply IAM authentication to Function URL access so that it can only be accessed through CloudFront

  • For IAM authentication resolution, create and use Lambda@Edge functions that perform Origin Access Control (GET) and SigV4 (POST/PUT) signing

  • Distribute static files separately to S3 (not required), enabling addition and updates of static files alone without container redeployment, and Lambda package size optimization

    • This configuration is recommended when publishing and distributing large numbers of image files or PDF files.
    • Even without distributing static files to S3, a simpler architecture is to serve images from within the Lambda container and cache them at the CloudFront level.

What is AWS Lambda Web Adapter?​

For SSR-type web frameworks, running on AWS Lambda requires processing to convert HTTP request payloads mapped to Lambda events to match the web framework's entry point.

AWS Lambda Web Adapter uses Lambda Extensions to internally start an application server, enabling direct handling of HTTP requests and responses using Function URLs as the entry point from AWS Lambda, without needing to perform these processes for each individual library.

Docker images that can be used with ECS Fargate, etc., can be used on AWS Lambda almost as-is (by adding only about 1 to a few lines to the Dockerfile), so there is no need for special modifications or maintenance to the application implementation for serverless architectures like this one.

For more details about Lambda Web Adapter, please also refer to the official GitHub.

Web Application Framework Used - React Router v7​

This catalog uses "React Router v7" as the web application development framework. React Router v7 integrates Remix and React Router, which can be used in "framework mode (SSR - Server-side rendering)" and "library mode (SPA - Single Page Application)" respectively.

This catalog includes a configuration for developing SSR applications that use React Router v7 in framework mode, utilizing AWS Lambda Web Adapter, a mechanism that enables serverless server-side rendering. This user guide is also explained based on this, so please refer to it.

The catalog project is located in the ~/serverless-frontend-application-stack directory.

Overall Project Structure​

This is the directory and file structure of the entire catalog.

serverless-frontend-application-stack/
│
├── .vscode/ # VSCode configuration files
│   ├── extensions.json
│   └── settings.json
│
├── deploy/
│   └── cloudformation/
│       ├── lambda.yaml
│       └── s3-cloudfront.yaml
│
├── public/ # Static files such as images
│   └── fabicon.ico
│
├── src/
│   ├── components/   # Reusable React UI components
│   ├── hooks/        # Define various custom hooks
│   ├── layouts/      # Define React Router v7 layout components
│   ├── lib/
│   ├── pages/        # Base components for each page
│   ├── states/       # Define atoms using the state management library "jotai"
│   ├── styles/       # Style (CSS) definitions
│   ├── types/        # Type definitions
│   ├── env.server.ts # Server-side environment variables
│   ├── root.tsx      # Base point as React Router v7 application
│   ├── routes.ts     # Page routing definitions
│   └── util.ts       # Various utilities
│
├── .env              # Environment variable definitions for local execution
├── .editorconfig
├── .gitignore
├── biome.json
├── build-app.sh      # Build script
├── Dockerfile
├── package.json
├── package-lock.json
├── react-router.config.ts
├── tailwind.config.ts
├── tsconfig.json
└── vite.config.ts