/deploy-static-site-on-amazon-s3

How to Deploy a Static Site on Amazon S3

Primary LanguageJavaScript

How to Deploy a Static Site on Amazon S3

Cloud_resume_architectural_diagram

What is Amazon S3?

Amazon Simple Storage Service (Amazon S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance.

Benefits of S3

  • Durable: The services provided allow your app to scale without fluctuating downtime.
  • Highly available: It is available across so many data regions worldwide.

Deploying a static website

There are several ways to host your website:

  • Using the S3 console
  • Using the AWS software development kit
  • Using the AWS command line interface

We will use the S3 console to deploy and host a website in this project.

Step 1

Create a bucket

A bucket is a container for objects. To store your data in Amazon S3, you first create a bucket and specify a bucket name and AWS Region. Then, you upload your data to that bucket as objects in Amazon S3. s3

setup the S3 Bucket to store objects.

Give a globally unique name and region to your bucket. bucket1 bucket2

  • Block all public access - It provides an additional layer of security for your data, preventing unauthorized access and ensuring that your data is protected at all times. bucket3 bucket4 bucket5

Now let's upload some objects in S3 bucket.

bucket6

Step 2

What is Cloudfront?

Amazon CloudFront is a web service that speeds up distribution of your static and dynamic web content, such as .html, .css, .js, and image files, to your users

How you set up CloudFront to deliver content

cloudfront1

  • You specify origin servers, like an Amazon S3 bucket or your own HTTP server, from which CloudFront gets your files which will then be distributed from CloudFront edge locations all over the world.
  • For Origin, Origin domain, choose the S3 bucket that you created for this tutorial.
  • For Origin, Origin access, select Origin access control settings (recommended).
  • For Origin access control, choose Create new OAC.
  • In the Create new OAC pane, keep the default settings and choose Create. cloudfron3
  • For all other sections and settings, accept the default values.
  • For Web Application Firewall (WAF), select one of the options. cloudfront6
  • Choose Create distribution. cloudfront7

In The S3 bucket policy needs to be updated banner, read the message and choose Copy policy.

  • In the same banner, choose the link to Go to S3 bucket permissions to update policy. (This takes you to your bucket detail page in the Amazon S3 console.) cloudfront8