Deploying Angular/React Apps in AWS

Amazon S3 provides comprehensive security and compliance capabilities that meet even the most stringent regulatory requirement.

There are multiple approaches to deploy your Single Page Application in Amazon Web Services (AWS). One of the most common approach is to deploy the front-end of the application written using Angular, React or any other JavaScript framework in Amazon S3.

Amazon S3 is object storage built to store and retrieve any amount of data from anywhere — web sites and mobile apps, corporate applications, and data from IoT sensors or devices. It is designed to deliver 99.999999999% durability, and stores data for millions of applications used by market leaders in every industry. S3 provides comprehensive security and compliance capabilities that meet even the most stringent regulatory requirements.

The most common configuration to deploy the Single Page Application involves in using a public S3 Bucket. This creates several challenges:

  • Limiting access to S3 becomes difficult and a malicious user can keep on accessing the app incurring cost.
  • S3 bucket has limitations if directly mapped to a domain in Route53 (Domain name should be the same as the bucket name)
  • Includes latency in retrieving content from the bucket, based on the region its created and accessing from.

To solve most of these challenges, it is important to keep the S3 bucket private and use AWS CloudFront to server the front-end application. This also helps to serve the backend of the application from the same origin, avoiding the need for Cross-Origin Resource Sharing. In addition, CloudFront caches the content at Edge Locations, reducing the Network Latency.

deploying angula stacks 1

Application Deployment Overview in AWS

I have created a CloudFormation script to automate provisioning of the AWS infrastructure Simply by here.

AWS CloudFormation Stack, provisions the following set of AWS Services.

  • Private S3 Bucket to deploy the Single Page Application.
  • CloudFront Distribution with a Origin pointing to S3 bucket.
  • Origin Access Identity User and Permission to the S3 bucket granting CloudFront to access the S3 Private Bucket content.
  • Configuration to allow HTML5 URL support for Single Page Application frameworks like Angular/React which doesn’t use ‘#’ in routing paths.

Note: One of the core challenges Single Page Application faces in providing support for route full reload in the browser. Unless the server is configured to serve index.html for pages like /home or /about, the server or the CloudFront distribution will send a response back saying NotFound since there are no actual files in /home or /about paths. This is handled through CloudFront’s error pages, where if the path doesn’t exist and S3 returns Access Denied, to server the index.html from CloudFront so that the Single Page Application becomes capable in serving the index.html.

For more from Ashan, check out his blog on Medium