Deploying a Static website using AWS (S3+cloudfront)-React App
Harinivas. M

Harinivas. M @harinivas_m_00360dd83f42

About: AWS Cloud Learner

Joined:
Jan 22, 2025

Deploying a Static website using AWS (S3+cloudfront)-React App

Publish Date: Jan 23
2 0

1. Install the react app

2. create the react app

i. open the terminal and check the all prerequisites are installed or not, if not installed make sure install it.
ii. check the version of the node.js and npm.
iii. npx create vite@latest
iv. create a project name.
v. then run commands like - cd (project name) -> npm install -> npm run dev.
vi. finally the normal static website hosted.

Image description

3. Create a S3 bucket in AWS console

Image description

i. then change the permission of static hosting into enable state.
ii. create a bucket policy using policy generator.
iii. add the objects like (files and folders) in S3.
iv. go to properties in last and link will be shown , click the link to host the file in S3.

Link for website : http://node-22.s3-website-us-east-1.amazonaws.com
Image description

4. Hosting a website in CloudFront

i. create a distribution
ii. select the origin
iii. select the WAF for the security purpose.
iv. finally the distribution is created.

Image description
v. Once the distribution is deployed, we can able to host it.
vi. copy the DNS and paste the DNS in New tab for hosting a website.
vii. Finally the website is hosted successfully.

Image description

5. Cost management

More amount of cost will be there for the CloudFront so we should delete the distribution after the final work done.
Image description

Flowchart Diagram:

Image description

Comments 0 total

    Add comment