Hemanth of Alliance Department here. In this blog, I tried automating the process of building the application, installing the dependencies, synchronizing with S3 bucket, and clearing CloudFront distribution cache.
To deploy a React application by storing files in S3 and accessing the application over CloudFront, please see the blog below.
Simple and popular AWS Service for storage. Replicates data by default across multiple facilities. It charges per usage. It is deeply integrated with AWS Services. Buckets are logical storage units. Objects are data added to the bucket. S3 has a storage class on object level which can save money by moving less frequently accessed objects to a colder storage class.
AWS CloudFront is a content delivery network (CDN) service that aids in the speedy and dependable distribution of static and dynamic information with high performance, security, and developer friendliness. It distributes your content over a global network of edge sites, or data centers that are close to your users. Using serverless compute features, you can also alter the code that is executed at the AWS CDN edge.
This is how my current react app looks when i access via clousfront
Now making changes in the code, for example changing the background color to yellow from pink
Adding a scripts folder
Now creating a deploy script in it
Type the following code in the deploy script Making the script executable
chmod +x ./scripts/deploy.sh
Now executing the script [Configure your AWS CLI before proceeding further]
scripts/deploy.sh S3bucket CloudfrontDistribution
Checking the Cloudfront and it has been updated
Hope with this you get an idea of how to automate the process of building the application, installing the dependencies, synchronizing with S3 bucket, and clearing CloudFront distribution cache. Thank you for seeing the blog till the end.