Deploying Angular/React Apps in AWS
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.
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.
I have created a CloudFormation script to automate provisioning of the AWS infrastructure Simply by Clicking the Launch Stack Button.
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.