Single Page Application on Amazon Web Services (AWS) Serverless Platform

Apps Associates has been working with one of the leading financial organization in the world to move their existing on-premises applications into AWS cloud. The project includes designing and developing several frameworks to automate the deployment securely to Amazon Web Services (AWS).

Single Page Application to the Amazon Web Services Serverless Platform with Blue Green Deployment

Amazon API Gateway is a fully managed service pay as you go model that allows developers to create, maintain, monitor and secure APIs at any scale. It also allows developers to run code without launching the Infrastructure of servers.

One of the use cases is to configure the Single Page Application.

A Single Page Application is a web application built with the frameworks such as Angular or React. Angular or React framework loads all of the required code (HTML, CSS, Java Script, Images, font files etc…) with a single page, maintaining the business logic at the client-side.

In this blog, we will be using the following Amazon Services to set up the Single Page Application with API Gateway.

• Amazon API Gateway
• Amazon Simple Storage Service (s3)
• Amazon Certificate Manager (ACM)
• Amazon Cloud front
• Amazon CloudWatch

Our Approach:

The client requests the web page by custom domain URL to retrieve the Single Page Application. The request comes to the Cloud front then Amazon Web Services passes the request to the Amazon API Gateway. Amazon API Gateway checks for the matched custom domain name and find outs the API Endpoint and API Stage then handover the request to the respective stage. The API Stage is a logical reference to a lifecycle state of the API (for example, ‘dev’, ‘prod’, ‘v1’, ‘v2’).

Amazon API Gateway retrieves the index.html, and all other required files from Simple Storage Service (s3) and returns to the client. Index.html handles the business logic to render the web page.

Amazon API Gateway allows enabling cache to enhance responsiveness of the web page content, cloudwatch logs/tracing for debugging purpose.

Setup:

Follow the steps below for set up:

• Upload the Single Page Application files such as Java script, html, css, Image, font files etc… to Simple Storage Service (s3) bucket using Server-Side Encryption with Amazon S3-Managed Encryption Keys (SSE-S3).
• Create an Amazon API Gateway with Endpoint Type as Edge optimized. Create Method with GET and Resource as folder with Method GET, integration type as AWS service.
• Choose the Simple Storage Service (S3) as AWS Service, Path override as Simple Storage Service (s3) bucket path to retrieve the Single Page Application index.html file and other files.
• Add Execution role that has access to the Simple Storage Service (s3) bucket and API Gateway required polices. Setup Binary Media Types for the binary files like images, fonts etc.
• Deploy API Gateway to the stage. Configure logging features on the stage to enable the Required Logs/Tracing Options for the API Gateway Logs.
• Create custom domain names with Endpoint Configuration as Edge Optimized and backed by an ACM (AWS Certificate Manager) certificate from the US East (N. Virginia) region.
• Setup Domain Base Path Mapping, this map the API Gateway Endpoint and stage.

Blue Green Deployment:

• Blue Green deployment increases the availability by reducing risk when promoting a new change to an environment without affecting the live traffic. Also allows the quick roll back.
• This allows the deployment and testing of the new application version without affecting the live traffic.
• Amazon API Gateway stages, custom domain names enables the Blue/Green deployments. Deploy the initial version of application to a blue stage, configure the blue custom domain name (blue.helloworld.apigw.com), and live custom domain name (helloworld.apigw.com) mapped to the blue stage via base path mapping, this is a production environment.
• If the application team requires a deployment & testing with new application version of code, deploy the new version of application to a new stage (called green stage), and configure the green custom domain name (green.helloworld.apigw.com) mapped to the green stage via base path mapping.
• Test the application with green custom domain name (green.helloworld.apigw.com), once the new changes are working as expected promote the green stage as production environment by modifying the live custom domain name (helloworld.apigw.com) mapped to the green stage via base path mapping. Now the live traffic shifted from blue stage to green stage.

Advantages:

The advantages of utilizing this process include:

• Configure the Single Page Applications easily with the Amazon Web Services such as Amazon API Gateway and Simple Storage Service (S3).
• Simple Storage Service (S3) is scalable and highly available storage. It has access to several security features like bucket access control lists, limitation of cross-origin resource sharing.
• Amazon API Gateway is a pay as-you-go service allows quick, easy build and run in a robust and scalable way.
• API Gateway stages allow developers to build the Blue Green Deployment to increase the availability of a Single Page Application.
• CloudFront distribution facilitates the client access across AWS regions. Requests are routed to the nearest CloudFront Point of Presence (POP), which improves the connection time for geographically diverse clients.

Conclusion:

To summarize, Amazon API Gateway easily configures the Single Page Applications without the infrastructure of servers with the help of Simple Storage Service (s3). Blue/Green deployments increases the availability of the application by reducing the risk. For more information, feel free to reach out to me at [email protected].