[AWS] S3 – Web Hosting

S3 bucket can be configured to host a website with static contents (Html, CSS, and JavaScript + media files).

Static Web Hosting

  • Configuration is very simple.
    • In the Bucket Properties, enable “Static website hosting”
    • Index document: the default document for a bucket’s URL endpoint
    • Error document: is loaded when an object is not found.
  • Make sure your bucket and files can have public access.
    • Objects can be read by anonymous users via ACL or bucket policy.
    • By default, S3 blocks public access. -> Need to allow the public access to a bucket.
  • CloudFront can be added to improve the speed and efficiency of content delivery for global users.
  • CORS (Cross-Origin Resource Sharing)
    • allows a web application in one domain to reference resources in another domain.
  • S3 doesn’t support HTTPS access for website endpoints. If you want to use HTTPS, you can use CloudFront to serve a static website hosted on Amazon S3.

Steps to Configure a Static Website

Please refer to the following URL for the detailed tutorial.

https://docs.aws.amazon.com/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html

Here us the concise instruction.

  • Step 1: Create a bucket
    • Accept all default settings
  • Step 2: Enable static website hosting
    • In the bucket properties, enable “Static website hosting.”
    • Set the index (default) page and the error page.
    • The endpoint, which is different from your bucket address, is the entry point to your website. The endpoint is http://<bucket-name&gt;.s3-website-.amazonaws.com
  • Step 3: Edit Block Public Access settings
    • When you try to access the endpoint, you are getting the 403 Forbidden error.
    • By default, Amazon S3 blocks public access to your account and buckets.
    • Under Permissions, Clear “Block all public access”.
  • Step 4: Add a bucket policy that makes your bucket content publicly available
    • To make static pages publicly available, you need to add a bucket policy to grant public read access to your bucket.
    • Under Bucket Policy in the Permissions, add the following policy to grant public read access.
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::<Bucket-Name>/*"
            ]
        }
    ]
}
  • Step 5: Configure an index document
    • Create index.html file and upload it to the bucket with default settings
    • Upload other website content as well
  • Step 6: Configure an error document
    • Create error.html file and upload it to the bucket with default settings
  • Step 7: Test your HTTP website endpoint
    • Amazon S3 does not support HTTPS access to the website.
    • If you want to use HTTPS, you can use Amazon CloudFront to serve a static website hosted on Amazon S3.

Steps to Configure CloudFront with a Static Website

Once you complete the previous tutorial, let’s put the CloudFront in front of your static website. Direct access to the website endpoint will be prohibited.

  • Step 1: Create OAI in CloudFront
    • An OAI (Origin Access Identity) is a special CloudFront user that can access an S3 bucket on behalf of website users.
  • Step 2: Update the S3 bucket policy
    • Remove public read access to all users
    • Grant read access to the OAI user using the following policy – replace the OAI Id and the bucket name
    • Optionally, you can modify the bucket policy when you create a CloudFront distribution.
    • Now, you cannot access the website through the endpoint (403 Forbidden)
{
    "Version": "2012-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity <OAI Id>"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<Bucket-Name>/*"
        }
    ]
}
  • Step 3: Create a CloudFront distribution
    • Set the origin domain as a website endpoint
    • Set the bucket access to use OAI
      • You can update the policy here.
    • Set the default root object as an entry point
    • Optionally you can setup HTTPS
  • Step 4: Test the website with a distribution domain name

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s