Hosting Static Website  on Amazon S3.

Hosting Static Website on Amazon S3.

Hosting a static website is possible with S3, an AWS service that offers unlimited cloud storage capacity. You are able to deliver static content like HTML, CSS, images (e.g., PNG and JPG), audio or videos. You can’t execute server-side scripts like PHP or JSP, but it is of course possible to deliver client-side scripts (e.g., JavaScript) from S3.

In addition to that, S3 offers the following features for hosting a static website:

  • Define a custom index document and error documents.
  • Define redirects for all or specific requests.
  • Setting up a custom domain for S3 bucket

Goal :

  • Goal is to Host a Static Website Using AWS S3 Bucket.

Steps:

  • Creating a bucket and uploading static website to Bucket.
  • Configuring a bucket for static web hosting.
  • Access the Site using the Public end point.

1. Creating a bucket and uploading static website to Bucket.

To create a new S3 bucket, please open your AWS Management Console.In Services Section Search for S3 you'll find S3 under the Storage Section Open S3 For Creating our Own Bucket.

After Entering into the S3 Console You'll be able to See this Screen.Where You'll find all the option's to Fill in the Bucket Name, Region, Copy settings from an existing bucket and at the Bottom left corner you'll find an option to Create a Bucket.

  • The bucket name has to be globally unique. So it is a good idea to use your own domain name as bucket name like static.yourdomain.com. If you want to redirect your own domain name to S3 it is even mandatory to use your whole domain name as bucket name.
  • Initially Your bucket is empty. So you will place a HTML document into your bucket next.?

You created a bucket and uploaded an HTML document called <your file name>. You will need to configure the bucket next.

2. Configuring a bucket for static web hosting.

  • By default, only you, the owner, can access files from your S3 bucke until and unless you make Bucket Permission as Public. Since you want to use S3 to deliver your static website, you’ll need to allow everyone to view or download the documents included in your bucket. A?bucket policy?will help you control access to objects of a bucket globally. An IAM policy is defined in JSON and contains one or more statements. A statement can either allow or deny specific actions on specific resources. A bucket policy is the same as an IAM policy.
  • So you have to enable the Static Website hosting option in a Bucket Properties in order to host a Website.

  • You can also Define a custom index document and error documents, Define redirects for all or specific requests.

  • Now in order to get the public Access to the Bucket you have to Disable the Block all public Access ( i.e because by default it is enabled) .

  • Uncheck Block all public access and Save and confirm.


  • Adding a?bucket policy?will help you control access to objects of a bucket globally.An IAM policy is defined in JSON and contains one or more statements. A statement can either allow or deny specific actions on specific resources. A bucket policy is the same as an IAM policy.
  • You have to Generate a policy In order to add in a Bucket policy.now let's generate a policy by clicking the policy Generate Button.

  • Configure the Bucket policy as shown in the above picture.

  1. In Step 2 : In place of actions drop down select (Getobject)
  2. In place of (ARN) you have to place yours ARN. to Find your ARN you have to go to the Bucket policy page. And generate a policy and paste here.

"Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"AddPerm",
      "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::$BucketName/*"]
    }
  ]
}

        

After Generating the policy.the policy generates in the JSON Formate.Now Your bucket is configured to deliver your static website after apply your Bucket Policy.

By Entering your Endpoint URL in the Browser you can access your site.

This is how the Final Web Page Looks Like.


THANKYOU :)


要查看或添加评论,请登录

社区洞察

其他会员也浏览了