Hello everyone! I hope that you are doing great on this fine weekend😀
Previously, I built a face recognition tool for celebrities where I deployed its back-end to AWS using AWS CDK.
The link for the article can be found here: https://dev.to/alizgheib/build-a-face-recognition-tool-for-celebrities-using-react-aws-foo
Today, I'll be deploying the front-end part (React application) to Amazon Simple Storage Service (S3) while adding a caching solution using AWS CloudFront - So let's do it together!
I thought that it would be pretty useful to outline our process into steps so that it would be easier for you to follow along.
Build/Deployment Outline:
- Fix a common issue with React applications (blank page)
- Create a production build
- Create an S3 Bucket on AWS and upload the content of the build folder
- Create a CloudFront distribution
- Enabled S3 public access to our bucket and allow access from our CloudFront distribution only (using OAC)
- That should be it! Our application should be running now and available on over 400+ edge locations
Step By Step Guide:
If you would like to follow along, feel free to use the codebase available here: https://github.com/AliZgheib/celebrities-face-recognition/tree/main/front-end
Now let's start:
First of all, there's a small issue that I faced when accessing the deployed application (a blank page kept on showing)
To fix that, we just need to add "homepage": "." in the package.json file.
the package.json should look as follow:
{
"name": "front-end",
"version": "0.1.0",
"private": true,
"homepage": ".",
"dependencies": {
// project dependencies here
},
// other configurations
}
Now let's create a production build of the application
We cd into the project directory
cd front-end
We create a production build by running the NPM command below:
npm run build
After a successful run we should have a build folder similar to the one below:
Now let's login to the AWS Console and Navigate to the AWS S3 service page.
We click on the "Create bucket" button to create an S3 bucket that will host our React application code
We name our s3 bucket (ex: celebrities-face-recognition - it should be globally unique) and we click the "Create bucket" button at the bottom without the need to modify any other options.
We should see something similar to the image below:
Now let's upload the previously created production build to the S3 bucket.
We click on celebrities-face-recognition (the name of the bucket you created) and we click on “Upload”.
We upload the files (index.html, favicon.ico, asset-manifest.json, robots.txt) and the static folder separately and at the end, we should have something similar to the list below ready to be uploaded:
Now we click the "Upload" button at the bottom of the page and after waiting a couple of moments, our project should be successfully uploaded.
Great progress if you are still following along!
The setup for our S3 bucket is partially ready. We have to add a caching solution to our S3 bucket and expose our website to the web (via AWS CloudFront) and finally, we go back to S3 to update the permissions.
Let's navigate to the AWS CloudFront service and click on the "Create a CloudFront distribution" button to create a new distribution.
1- We pick celebrities-face-recognition.s3.us-east-1.amazonaws.com for the Origin domain option
2- Now for the Origin access option:
2.a- Let's change it from "Public" to "Origin access control settings (recommended)" - OAC is the newer and recommended approach to access your S3 bucket from AWS CloudFront.
b- Click "Create control setting"
c- Click "Create"
3- For the WAF option: pick whatever fits your needs. For my case, I'll go ahead and disable it
4- For the Default root object, we enter "index.html" as our
default object
5- We click "Create distribution" to create our distribution.
that's it for CloudFront, our distribution is now being deployed globally and you should see a screen similar to the one below:
You can see the distribution domain name: https://d3b1yxs153bxzh.cloudfront.net
However, if we try to access it, we will get an error because S3 is not allowing our CloudFront distribution to access it - let's change that!
Let's copy the new S3 bucket policy by clicking the "Copy Policy" button at the top right of the screen.
We navigate back to the AWS S3 service and we open the "permissions" section of our celebrities-face-recognition bucket.
1- Click the "Edit" button in the "Block public access (bucket settings)" section and make sure to untick all the options then click "Save changes".
2- Click the "Edit" button in the "Bucket policy" section and paste the previously copied CloudFront permissions here then click "Save changes".
Guess what? The distribution is working now 😀 and can be accessed globally at minimal latency - https://d3b1yxs153bxzh.cloudfront.net.
You can go a bit further and link the distribution URL to your domain (ex: https://www.example.com) using a DNS provider like GoDaddy, Name Cheap, Route 53, etc.. but that would be outside the scope of this article.
Please note that the distribution created is for education purposes only and it will be taken down before publishing the article. Use it as a guide to create and publish your distributions.
Thank you for sticking with me till the end and I would appreciate any feedback in the comments section below.
Top comments (1)
very helpful, thank you 🙏