Deploy A Single Page Static Application on AWS CloudFront Distribution using Terraform

Akshay Jain — Thu, 13 Aug 2020 16:50:34 +0000

Deploy A Single Page Static Application on AWS CloudFront Distribution using Terraform

A Terraform Module which will deploy a SPA on AWS CloudFormation backed by S3 Buckets

High-Level Architecture Diagram

Security Features and best practices used:

S3 Bucket :

Private
Encrypted
Versioning Enabled ### DNS :
Bring your own domain
DNS Records manageable in AWS Route53
Failover with AWS itself
ACM Certificates ### Security :
IP Based Access Control
Basic Auth using static user name and password (Utilized Powerful Lambda@Edge)
AWS WAF the possibility to add advanced security rules.

Prerequisite

Make sure you have the latest version of the following before deploying. (Or Your CI Platform is ready)

node.js( or any other standard SPA framework)
aws cli
terraform
git
The DNS Domain of Your Site (With edit rights to DNS Records)
All tf files copied from this repository (git clone https://github.com/akshaykrjain/cloudfront_terrafrom.git)

Steps to Deploy

1. Build A Sample SPA (Skip if your SPA is already built and ready)

npx create-react-app my-app
cd my-app
npm run build

Feel free to use Hugo framework in the similar manner

2. Obtain AWS ACM Certification

Login to AWS Console
Select US East (N. Virginia) region (Need to obtain Global Cert for CloudFront)
Request or Import SSL Certificate to your domain
Select Any suitable validation method (DNS or E Mail)
Note down the arn of the issued certificate . (It can take few minutes to get it issued)

Note- This step can be automated using Terraform, but AWS can take up to 30 mins to issue which will create problems for our TF module deployment

3. Provide Values of Variables.

Edit variables.tf and edit all the variables as per your wish

Edit headers.js and provide static user name and password to protect your site

4. Deploy the Infrastructure

terraform init
terraform plan
terraform apply

Copy the Application and Static Files to newly created buckets.

Copy SPA Main application files

aws s3 cp --recursive build/ s3://<spa-app-bucket-name>/  --exclude "*static/*"

Copy Static Files to Bucket-2

aws s3 cp --recursive ./build/static/ s3://<static-data-bucket-name>/static/

~ Tip - aws s3 sync can also be used for subsequent changes in application

Test

Execute the following test cases to verify our deployment

Open www.(domain name) (eg. www.myapp.com) from the whitelisted IP ,User name and password should be prompted and webpage should be displayed if provided correctly otherwise an error page should be displayed
repeat the same from another IP , error should be displayed
S3 Bucket objects should not be accessed directly
Application Updates should be replicated to edge locations within hours

(TODO : Python Scripts or Terratest for the automatic test)

Hosting a Sample Python Flask Application on AWS EC2 with AutoScaling and LoadBalancer(Ready CloudFormation)

Akshay Jain — Mon, 08 Jul 2019 08:39:34 +0000

Open AWS Console (or aws cli)
Create a new stack
Use below cloud formation

https://github.com/akshaykrjain/coffee_with_code/blob/master/cloudformation/aws_cft.yaml

Note- - Change the user data part to your custome code. A sample code is already added in this cloud formation template.
- Make sure you have atleast 1 public and 1 private subnet ready.
- Private subnet must be able to connect to internet (Use Internet Gateway or NAT for that)

DEV Community: Akshay Jain

Deploy A Single Page Static Application on AWS CloudFront Distribution using Terraform

Deploy A Single Page Static Application on AWS CloudFront Distribution using Terraform

High-Level Architecture Diagram

Security Features and best practices used:

S3 Bucket :

Prerequisite

Steps to Deploy

1. Build A Sample SPA (Skip if your SPA is already built and ready)

2. Obtain AWS ACM Certification

3. Provide Values of Variables.

4. Deploy the Infrastructure

Copy the Application and Static Files to newly created buckets.

Test

Hosting a Sample Python Flask Application on AWS EC2 with AutoScaling and LoadBalancer(Ready CloudFormation)