Configuring a static website on Amazon S3

Scenario

Kofi has been assigned a task at his tech startup to configure a static website on Amazon S3. The website will be used to distribute media content, which can be assessed by users via a URL. To achieve the goal, Kofi followed the steps outlined below:

Step 1: Create a bucket

  1. Sign in to the AWS Management Console and open the Amazon S3 console at here.
  2. Choose Create bucket.
  3. Enter a globally unique Bucket name.
  4. Choose a Region that is geographically close to minimize latency and costs, or to address regulatory requirements. 
  5. Select create bucket to accept the default settings and create the bucket.

Step 2: Enable static website hosting

  1. Select and open the bucket to be used for the hosting, open the properties tab

  2. Under Static website hosting, choose Edit.

  3. Under Static website hosting, choose Enable and Host a static website under the Hosting type.

  4. In Index and Error documents, enter the file name of the index and error document, typically index.html and error.html (remember these are case sensitive).
  5. (Optional) You can use JSON to describe the rules to specify advanced redirection rules, under the Redirection rules segment.

  6. Choose Save changes.

  7. At the bottom of the page, under Static website hosting, the website endpoint for the bucket is displayed, this is the URL that can be used to access the website.

Step 3: Edit Block Public Access settings

  1. Select the Permissions tab.

  2. Under Block public access (bucket settings), choose Edit.

  3. Clear Block all public access, and choose Save changes.

Step 4: Add a bucket policy that makes your bucket content publicly available

  1. Still under Permissions.
  2. Under Bucket Policy, choose Edit.

  3. To grant public read access for your website, copy the following bucket policy, and paste it in the Bucket policy editor.
  4. {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::Bucket-Name/*"
            ]
        }
    ]
}
  5. Update the Resource in the above policy to your bucket name.
  6. Choose Save changes.

  7. If an error that says Policy has invalid resource is displayed, confirm that the bucket name in the bucket policy matches your bucket name. 
  8. If you get an error message and cannot save the bucket policy, check your account and bucket Block Public Access settings to confirm that public access to the bucket is allowed.


Step 5: Configure an index document

  1. To upload the index document to the bucket, do one of the following:
    1. Drag and drop the index file into the console bucket listing.
    2. Choose Upload, and follow the prompts to choose and upload the index file.
    3. (Optional) Upload other website content to your bucket.

Step 6: Configure an error document

  1. If there is an error document, follow the steps in Step 5 to upload and configure the error document. 

Step 7: Test your website endpoint

  1. From Step 2, under Static website hosting, select and open the Bucket website endpoint.
  2. The index document opens in a separate browser window.

Step 8: Clean up

If the static website was created only as a learning exercise, delete the AWS resources  allocated so charges are not accrued. Upon deletion, the website is no longer available. And with that, Kofi successfully configured a static website on Amazon S3.

Comments

Post a Comment