Skip to content

Hosting A Static Website On AWS S3

Jump to bottom Edit New page
phpjagadeesh edited this page Jan 1, 2015 · 69 revisions

This tutorial walks you through the process of hosting a static website with Amazon S3 service. ###Table of Contents

##Introduction to Amazon S3 Amazon S3 (Simple Storage Service) is a online file storage service offered by Amazon. In 2006, the first version of amazon S3 released. Amazon S3 can use alone or with other AWS services like EC2, EBS and and Amazon Glacier. Amazon S3 follow object storage mechanism to store the files.

Why Amazon S3

  • Durable

Amazon provides high durable architecture for data and all data should be store across on multiple facilities and multiple devices.

  • Low Cost

Amazon S3 allows you to store data with very low cost. Some free tier storage offers are available in Amazon S3.You can pay fee what you use.

  • Secure

Amazon S3 has high level security by providing access control over the object.

  • Scalable

You can store very high amount of data without required any configuration change. Scale up and down are possible as your needs.

  • High Performance

Amazon S3 can integrate with Amazon Cloudfront, a content delivery web service that distributes content to end users with low latency, high data transfer speeds, and no minimum usage commitments.

##Static website hosting architecture

You can host a static website by following steps:

  • First we need to store static files, which contain HTML, CSS and JavaScript. For this purpose we need to create a location that is called S3 Buckets.

  • Storage location is ready for use, and then we need to upload files into this bucket.

  • Next we need to change files are publicly accessible.

  • The final step is configuring bucket act as a website.

Your website is ready for use. You can access the website.

Management console

In the above example, Domain name is generated by Amazon service. So we need to change as custom Domain name and AWS act as DNS service provider.

Management console

Here the custom Domain name is example.com. So user can access the website with URL example.com.

Next step is to improve the performance of website. The website should be distribute through CDN. The visitors can access the website with same URL but files are coming from edge location closest to the visitors.

Management console

##Configuration of buckets for website The Amazon S3 bucket is used to store entire static website content like JavaScript, HTML and CSS etc. Each files treated as object. So first we need to configure the buckets.

Specification of Bucket

  • Amazon S3 bucket requires that your Bucket name same as your Domain name.
  • Create three buckets for each Domain in the same region. For example, You domain is example.com then you need three buckets.
  1. The root Domain is example.com .
  2. Amazon S3 store the log information about traffic to your website in logs.example.com.
  3. You need to setup www.example.com bucket also. Because some user specify prefix www on the domain. So it will automatically redirect to example.com .

Creating the Bucket

  • Open Amazon S3 management console.
  • Click Create Bucket button. Management console
  • In the Create Bucket dialog box, Specify Bucket name and its region. The bucket name should be lowercase letter. Management console
  • Now your Bucket is ready for use.

Add Permission and enable logging

Before uploading you files into the buckets, you need to add permission to bucket.

Add Permission
  • Select your root domain bucket, then click permission and then click Permissions .
  • click Add bucket policy , then copy the policy code and paste into dialog window. Policy code should like as below. Replace example.com by your root bucket name. Management console
  • Click Save button under Permission.
Enable logging

Enabling logging is optional part. If you don't need to track your website, then just leave this portion. With logging enabled you can identified whoever try to access your bucket by their IP address and track the information such as data in and out of your bucket.

  • Open Amazon S3 management console.
  • Select your root domain Bucket.
  • Click logging
  1. Select the Enabled checkbox.
  2. In Target Bucket List, select bucket that is used for log operation.
  3. In the Target Prefix, enter root/
  • Click Save button.

All the configuration operation finished and Lets move to deploy a small website in Amazon S3.

##Deploy your website Here we are deploying a small website in Amazon S3. For this purpose we have to create two files index.html and error.html. The source code of index.html is as follows
<html>
<body>
This is Accel Frontline Method!
</body>
</html>

The source code of error.html is as follows

<html>
<body>
<p>This is an error page.</p>
</body>
</html>

Then Upload your files in Bucket,

  • Select Root Domain Bucket.
  • Click Upload button and Select Files. Management console.
    Then after Click Add Files and Select files and then finally you have to click Start Upload Button.

Configure your bucket as website

For configure your bucket as website, first we need to configure root domain bucket as website.

Step 1: Select Amazon S3 management console.
Step 2: Select your root domain Bucket, click properties and click Static Website Hosting.

  1. Click Enable Website Hosting.
  2. In the Index Document box, enter index.html.
  3. In the Error Document box, enter error.html.
  4. Click Save.

####Set Up Redirect Before you can associate your domain with your website, you must configure redirect operation. Because some visitors may use www before domain name. So we need to redirect www subdomain bucket to root domain bucket. For this purpose you can follow the these steps:

  • Step 1: Select sub domain Bucket you created. Here the example is www.example.com.
  • Step 2: Click Properties and then click Static website Hosting.
  • Step 3: click Redirect all requests to another host name.
  • Step 4: In the Redirect all requests to box, enter the name of your root domain.
  • Step 5: Click Save.

The default URL assigned by AWS is the Endpoint.You can click on that URL and check the website correctly deployed.

##Associate a Domain name with your website The Amazon Route 53 is a highly available and cost effective Domain Name System (DNS) web service. Each Domain should be in memorable. So we need to change Amazon generated URL to our Domain name. For this purpose Amazon Route 53 is using. For more about domain name change you refer here.

##Conclusion At the end you deployed a static website with Amazon S3. The deploying of files may take few minutes. Amazon S3 assures high scalable, high performance, high security and cost effective services for deploying the websites. If you are running small website it can run free tier that means you hosting charge is reduce to zero.

ACCEL NORTH AMERICA

alt text

Clone this wiki locally