Deploying Angular/React Apps in AWS
- November 21, 2017
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:
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.
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