There are multiple reasons why S3 is suitable for static web hosting. S3 by default provides 99.99999999% of durability; its like if you put one million objects in s3, once in ten thousand years you will loose one object. S3 can handle any number of requests made to its objects, it is highly scalable. Also you can choose the geographical location where you want to host your website.
If you have a website with visitors all over the world, there will be latency issues for users connecting to your website from the other end of the world. Here is where cloudfront comes in to play. Cloudfront is a content delivery network with edge locations all over the world. If you host your website in US and if a visitor comes from India, he can access the website with low latency using the content cached in the nearest edge location. (eg: Singapore edge location, which is closest to India.
You can also route the traffic to your website based on latency using Amazon’s DNS service Route53.
Using s3, cloudfront and route53, you can set up a highly available static website with high performance and low latency.
In this tutorial I will set up ,
1 . static website on s3
2 . Create a cloudfront distribution for the static website
3. Configure route53 DNS service for mapping your domain name to S3 endpoint for low latency routing.
Setting Up Static website on S3:
1 . Go to s3 management console
2 . Create a bucket with unique name, its better if you use your custom domain name for bucket (eg : www.scriptscunch.com)
3 . Upload your html, css, js and image files to s3 from the management console or through some client appliations like cloudberry, s3fox etc,, I personally like cloudberry explorer for uploading and deleting objects in s3. Using cloudberry explorer you can set ACL’s, data encryption etc,,
4. Click on the bucket and select properties. Select the static website hosting option and enable website hosting option. Enter the file name of index document and the error document in the relevant fields as shown in the figure below.
Creating cloudfront distribution for s3 website:
1 . Go to go to AWS management console and click cloudfront.
2. Click create distribution option
3. Select web and click continue
4. Cloudfront distribution has three settings.
- Orgin settings
- Cache behavior settings and
- Distribution settings.
Configure each setting based on your needs.
Orgin settings:
This setting basically describes the orgin of the content which has to be cached in the cloudfront edge locations. Orgin can be a s3 bucket or any webserver, In our case, it is s3 bucket.
When you click the orgin domain name text box, the available s3 bucket will get populated there. Select your static website bucket from that ordered list. Set the values for orgin as shown in the figure below.
Cache behavior settings:
Leave the cache behavior settings to default. If you want to set specific users to access particular content, then you have to use the signed url option in the cache behavior settings. If you use signed urls, you can set the link exipiration time and date for the url.
Distribution settings:
Use all edge locations for better performance. In the CNAME section enter your domain name with www and without www (eg : www.scriptcrunch.com and scriptcrunch.com). This allows users to access your website with and without www.
Enter the index document in the default root object option (eg index.html). If you want the logs of request you get through cloudfront, you can enable logging. You have to specify in which bucket and under which prefix (eg bucketname/cf-logs) in the subsequent options. Leave the distribution state in enabled mode. Click create distribution.
Once created , click the distribution tab in the left pane. It will take a while for the distribution to propagate. Once the distribution is setup that status will show deployed. Select the distribution you created and click edit distribution. There you can find the cloudfront endpoint. Once the distribution is deployed, you can access your s3 website using the cloudfront endpoint.
Use the windows nslookup utility in command prompt to check out the different cloudfront ips.
Route53 settings:
Now you have the cloudfront endpoint, you can map your domain name to the cloudfront end point uisng rout53 DNS service. Use the following link to configure route53 for your website. How to configure Route53
Leave your feedback in the comments section.
2 comments
Excellent post..
I need some more updates.
If S3 goes down (as happened today for four hours), will Cloudfront’s distribution of an S3-based site stay up?