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>.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
Scriptorium 