Host a Static WebSite using S3 bucket and CloudFront AWS services

 Below task have to  execute for hosting  the website.

• Register a Domain  on Route 53
• Create an S3 Bucket
• Upload to S3
• Create a CloudFront Distribution
• Point Domain to CloudFront in Route 53
• Redirect Bare Domain to WWW
• Enable HTTPS

Register a Domain :-

AWS is a domain registrar, and in order to register a domain with AWS, you need to use the service called "Route 53".

Go to the AWS Console and click on "Route 53", under the "Networking" section. Then go to the Domain Registration section, click on the "Register Domain" button, type in the domain you want to register,

Once you've found an available domain that you like, Purchased that domain.

Create a bucket :-

AWS  cli  command

aws s3api create-bucket --bucket my-bucket --region us-east-1

The following command creates a bucket named my-bucket in the eu-west-1 region. Regions outside of us-east-1 require the appropriate LocationConstraint to be specified in order to create the bucket in the desired region:

$ aws s3api create-bucket --bucket www.my-bucket.com --region eu-west-1 --create-bucket-configuration LocationConstraint=eu-west-1

Output:

{

    "Location": "http://www.my-bucket.com.s3.amazonaws.com/"

}

Output¶

Location -> (string)

Next, you'll need to modify some properties on the bucket to make it hold your website correctly. Click on the row of the bucket you just created, and the details pane will open on the right side of the page. Then click on the "Properties" section of the page to modify the bucket properties. It should look like this:

Above property change via cli :-

aws s3api put-bucket-website --bucket www.my-bucket.com --website-configuration file://website.json

The file website.json is a JSON document in the current folder that specifies index and error pages for the website:

{

    "IndexDocument": {

        "Suffix": "index.html"

    },

    "ErrorDocument": {

        "Key": "error.html"

    }

}

 "Endpoint" URL should look something like http://www.my-bucketcom.s3-website-us-east-1.amazonaws.com. This URL is very important,

After you save the static website hosting form, scroll back up to the top of the page and click on the "Permissions" tab, to the right of the "Properties" tab. Then, click on the big "Bucket Policy" button, right below the tabs. You'll see a big text box, marked "Bucket policy editor". Copy-paste this text into the bucket policy editor:

{

  "Version": "2008-10-17",

  "Statement": [{

    "Sid": "AllowPublicRead",

    "Effect": "Allow",

    "Principal": {"AWS": "*"},

    "Action": ["s3:GetObject"],

    "Resource": ["arn:aws:s3:::www.my-bucket.com/*"]

  }]

}

Upload to S3

Using CLI

aws s3 cp  <your directory path>  s3://<your bucket name>/ --recursive

Make a CloudFront Distribution

the next step is to use CloudFront [Content Delivery Network (CDN) service] . It will make your website load fast anywhere in the world

You need to create a distribution for your website and point it at your S3 bucket, so that it gets the same contents as your S3 bucket. Once that's up and running, we'll go back to Route 53 and make the domain you bought point to the CloudFront distribution, so that people who type in your URL can get to your website.

Go back to the AWS Console and click on "CloudFront", under the "Storage & Content Delivery" section. Click on the "Create Distribution" button to get started, and select that you want a Web distribution, instead of RTMP.

In the form the first one is the "Origin Domain Name" — it's the very first field in the form. Click on it, and Amazon will show a dropdown menu with your S3 buckets listed! Unfortunately, this dropdown menu is misleading: the URL in the dropdown menu is not the URL that you want to use.1 Instead, go back to your S3 bucket, find the website endpoint URL in the "Static Website Hosting" section of the properties, and paste that into the "Origin Default Name" field. You'll need to remove the http:// from the front. It should look something like www.my-website.com.s3-website-us-east-1.amazonaws.com.


Next, scroll down to the "Distribution Settings" section. Just above it, there's a field called "Compress Objects Automatically": set that to "Yes". Slightly below that, there's a field called "Alternate Domain Names (CNAMEs)". Put the domain of your website into the CNAMEs field: for example, "www.my-website.com". This should match the name of the S3 bucket you're using. Finally, scroll down to the bottom of the form, find the "Default Root Object" field, and type in "index.html". Then click "Create Distribution".

Point Domain to CloudFront

Now that you have your website up and running on both S3 and CloudFront, the next step is configuring that domain you bought to point at it! To do this, we have to go back into Route 53, so go back to the AWS Console and click on Route 53. Then click on your domain, and click "Manage DNS".

On that screen, you need to add a new record set to point your domain to the CloudFront distribution. Click "Create Record Set", then type "www" into the "Name" field and select "A" for the "Type" field. Just beneath that, there's an "Alias" field with two options: select "Yes", which will cause the "Alias Target" field to appear.

When you click on the "Alias Target" field, Amazon will show another helpful dropdown menu, with entries for both S3 and CloudFront. Select the CloudFront distribution you just created, not the S3 bucket. Then click the "Create" button.