Automate deployment of static website files to S3 after the build

Question

I have a react app(SPA) that is deployed on S3 and publicly accessible. After each build, I have to manually upload the index.html, and other static assets to S3. Is there any ways to automate this process ?

I did an exhaustive search on CD(continuous deployment) to S3, here is a SO question about the same.

I am aggregating all the information from my exhaustive research. I have written the below answer, which contains various methods to achieve this.

Answer 1

There are many ways to do the automation of S3 deployment. Here are the things I gathered:

1. AWS SNS and Lambda:

This process is useful, if you want to trigger any AWS services on github push.So, here is the process:

1. The github push triggers a message to SNS.
2. The Lambda which is subscribed to the SNS topic is invoked.
3. Inside the Lambda, I clone the github repository.
4. Use AWS's S3 SDK to upload the build or dist directory to your S3 bucket. Here is a high level architecture of the above process:

The downside of this approach is cloning large repos takes time and Lambdas are billed per second. So, this may become expensive for large repos.

2. Travis:

Travis is known for its CI(continuous integration) library. A .travis.yml is essential for the integration process.

If you want to make some tests after the build and then on success, upload the files to S3. Then this approach will be the best way. Travis is free for open source projects.

The downside is, I could not find a way to isolate a directory from the repo and upload that specific directory alone.

3. AWS cli:

This is the cheapest and best way to upload the files to S3. I used this approach. I got this information from this medium post.

Usually in react apps the build scripts are triggered by the npm or yarn written as scripts in the package.json. Here is the command for uploading the files to S3:

aws s3 sync build/ s3://<bucket-name>

I added this script as part of the build scripts in package.json. This was very handy and thus automated the manual process of uploading the files to S3.

This answer is based on my perspective. If anything is incorrect or If I had missed something, please feel free to comment and I will add it to the answer.