Deploying a Static website using AWS (S3+cloudfront)-React App
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. 3. Create a S3 bucket in AWS console 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 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. 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. 5. Cost management More amount of cost will be there for the CloudFront so we should delete the distribution after the final work done.
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.
3. Create a S3 bucket in AWS console
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
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.
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.
5. Cost management
More amount of cost will be there for the CloudFront so we should delete the distribution after the final work done.
What's Your Reaction?
