Overview of project deployment

Brief introduction to AWS, S3, and CloudFront

Setting up S3 buckets for eCommerce assets

Configuring bucket permissions

Setting up a CloudFront distribution

Conclusion

Overview of project deployment

In this blog, I will guide you through deploying a React web application on an AWS S3 bucket and connecting it to AWS CloudFront.

Brief Introduction on AWS, S3 Bucket and CloudFront.

AWS: The acronym stands for Amazon Web Service. It offers a wide range of cloud-based services, including computing power, storage, databases, and networking. Some of its key services include Amazon S3 (Simple Storage Service), Amazon CloudFront (Content Delivery Network), AWS Certificate Manager, AWS Route 53 (DNS service), Amazon VPC (Virtual Private Cloud), Amazon RDS (Relational Database Service), and AWS Elastic Beanstalk for application deployment. However, this blog will focus specifically on AWS S3 Bucket and CloudFront.

Amazon S3 bucket: This an object storage service in AWS that enables users to store and retrieve data securely at any scale. Unlike traditional file storage systems that use hierarchical structures with files and folders, S3 stores data as objects within buckets. Each object consists of data, metadata, and a unique key. Amazon S3 can host static websites by enabling Static Website Hosting on a bucket. This makes it ideal for deploying static web applications.

Amazon CloudFront: Have you ever tried to load a website, only to find it frustratingly slow, causing you to lose interest? This is where Amazon CloudFront comes in. As a Content Delivery Network (CDN), it enhances website speed by caching content across multiple edge locations worldwide. This minimizes latency, boosts performance, and delivers a smooth user experience.

Setting up Amazon S3 bucket

1. Log in to the Amazon Management Console.

2. Search for S3 in the search bar.

3. Click on Create Bucket.

4. Enter a name for the bucket.

5. Click Create to finalize the bucket creation.

After creating the bucket:

1. Select the newly created bucket.

2. Navigate to the Properties section.

3. Click the Upload button to upload all code files.

4. Enable Static Website Hosting.

The bucket should contain files similar to those shown in the image. If it's a React project, run npm run build, then copy all contents from the dist or build folder and upload them to the bucket.

The static website endpoint should be visible, as shown in the image above, if static website hosting is enabled.

Integrating S3 bucket with CloudFront

Create a Distribution:

1. Choose an origin by selecting the Amazon S3 bucket where the files are stored.

2. Provide a name for the distribution.

3. Click "Create Distribution."

Once the distribution is created, AWS CloudFront will automatically connect to the S3 bucket.

Copy the distribution name to access the web application. If the application does not load or an error occurs, repeat the steps from the beginning.

That’s the complete process for linking your AWS S3 static website to AWS CloudFront.

Here is a link to the project: https://di86t1852k920.cloudfront.net

Conclusion

Deploying a React web application using AWS S3 and CloudFront is a straightforward process that enhances both accessibility and performance. By leveraging S3 for secure storage and CloudFront for content delivery, you ensure faster load times and a seamless user experience.

Thank you for following along, and happy deploying! 🚀