Continuous Deployment Pipeline for React App on AWS S3 + CloudFront
As with anything in engineering, there are a multitude of valid ways to accomplish creating a deployment pipeline for a single page application (SPA).
Here, we will go over hosting a single page application using S3 + CloudFront and using AWS’ Codepipeline to automatically deploy the application.
By the end of this tutorial you will have a pipeline that performs the following steps:
- Detects pushes to a specific branch in a Git repository.
- Builds a staging version of the application from source.
- Deploys a staging version of the application.
- Awaits for manual approval.
- Deploys a production version of the application.
S3 + Cloudfront Hosting of Single Page Application
Before starting on the pipeline portion of the application let us go over how to serve a SPA using S3 + Cloudfront.
Step 1: Create S3 Bucket
1- Go to the bucket creation page in the AWS Console and create a new bucket with public access enabled.
2- In the properties tab, enable public website hosting and set index document to
index.html. This will be the entrypoint for our application.
Step 2: Create Cloudfront Distribution
In order to serve the application over HTTPS and decrease response time, we will be using Amazon’s CDN called Cloudfront.
1- Go to the creation page for Cloudfront.
2- Copy the website endpoint from the bucket we created in the previous step.