Reactjs frontend hosted on S3 with CloudFront CDN
Your takeaways from this post
- Understanding what is a serverless S3 hosting
- Why Cloudfront CDN is useful
- How to quickly deploy a simple ReactJs frontend on AWS with CloudFormation
- CI/CD this app: a developer push in Github will automatically deploy the new version of the app
Publish a site without servers
To publish a website, you usually need to build and configure a server or a Docker container to serve your static files. Even if cloud vendors provide nowadays many tools to reduce the pain (IaaS, managed Kubernetes, ECS), it still involves lots of configurations to achieve availability, scalability, backup, security while keeping costs low.
S3 (Simple Storage Service) is an object storage service from AWS. It provides secure, durable, highly-scalable object storage (represented as a "bucket") with a simple web service interface, for a low cost.
At start, S3 was just a simple and secure way to store data. Now, at the click of one tick box, S3 can serve your static files and become a powerful hosting server.
The advantages of S3 hosting:
- Low Cost: $0.023 per GB of data stored (more on prizing here)
- Availability: 99.99% !
- Scalability: you can just keep putting files, and it will never fill up
- Security: encryption for both secure storage and secure transit
- Easy to Manage: copy and paste features, S3 integration in many libraries, easy archiving (Glacier)
Now that you have your S3 serving your website in your region, it might face response time issues under heavy user requests coming from all over the world.
CloudFront is a global content delivery network service. It delivers data, videos, applications, and APIs to the viewers with low latency and high transfer rates.
The advantages of CloudFront:
- Fast & global: 216 global points of presence permit faster file delivery to end users
- Security at the edge: network and application level protection with AWS Shield and Certificate Manager
- Highly programmable and deep integration with AWS
So S3 will securely store your code while CloudFront will deliver it quickly to your users.
Our frontend app
Our frontend is a simple web page build with Gatsby. Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.
You can browse for a template here, and deploy it in one command line. Our page will use the delog template.
Deploy the frontend stack
Below is the code to run a S3 hosted website. This front will connect to an api backend that we saw in a previous post. The deployment is automated with CloudFormation, and CI/CD is configured via CodeBuild.
CI/CD flow diagram
git push from a developer in Github will launch the whole CI/CD process. CodeBuild will copy the changes to the S3 bucket.
Get the code
Check out the Github repo to deploy the infra.
Another live project: swisscovid.com
Check out this other Github repo to deploy this project swisscovid.com. I used S3 hosting + CloudFront to host a blog on covid19. I deployed the stack with Terraform and used Gitlab for CI/CD.
- S3 storage is cheap, secure, scalable, highly available and easy to use.
- S3 hosting offer the possibility for developers to only think about the code and forget about the painful job of deploying and maintaining servers and docker containers.
- This serverless architecture has huge advantage, and should be considered for any new frontend, as well as legacy sites which could be migrated to reduce cost and increase scalability.
- CloudFront is the last step for increasing performance and security of your site, especially for global websites with heavy traffic.
- CI/CD could be achieved with minimum effort, thanks to S3, you just have to copy your static files to the bucket and your site will be updated.
Thank you for reading :-) See you in the next post!