Building a Static Website on Amazon S3

The trend of hosting static websites on Amazon S3 is a becoming getting very popular day by day. This approach has been adopted by many organizations due to its advantages over traditional server based hosting. Static website is a website that does not require any runtime environment like JRE or .NET etc and is mostly based on HTML, CSS, JS and other static resources (audio/video files and documents etc.). AWS provides all necessary services and tools that enable you to build and manage static websites on AWS cloud very easily.

Like other cloud based hostings, there is no CAPEX investment. However, there is a negligible operational cost for hosting the static website. You can find more benefits here.

First, we will discuss some of the main architectural components of the system. This discussion will help you understand all the building blocks and working of the system. The architecture you choose to build for your website will depend entirely on your requirements. At the end of the blog, we will also provide a step by step guide on building a static website on AWS.

Architecture

S3

The first and the mandatory service required is S3. It is a secure and durable object storage service that enables you to store your files on cloud based storages called buckets. Every file inside a bucket has a unique URL associated with it that can be used to access it if user has the privileges. As a first step you would need to upload complete contents of static website in a S3 bucket. Enabling web hosting and making the bucket public will enable it to serve the content of your website. More details can be found here.

Route53

When you have hosted your website on S3 you will have an AWS region based default website endpoint which you can directly use to access the website. You also have the option to map your custom domain to point to your static website default endpoint and this is where Route53 comes into play. Details on how to use Route53 for this purpose can be found here.

Cognito (optional)

To provide authentication mechanism for your website you can use AWS cognito. You can create a pool of users and provide login to the users existing in that pool. Cognito user pools offers functionality for federated identity providers (for example login via Facebook and Google), password recovery and user authorization security in the cloud.

Microservices development (using Lambda, Api Gateway and RDS)

You can develop microservices using a combination of API-Gateway and AWS Lambda. These microservices can be used directly by your website to GET and POST data from a data source. Hence, your static website can also have the functionality of a dynamic webpage. For example, on an event (e.g. click of a button, form submission etc) you can use Jquery Ajax to call the microservice to load data and display on the web page.

S3 website architecture.png

You can create microservices for complete CRUD operations and more with the help of these services within your website to make your site act fully dynamic. Similarly you can create microservices which interact with other AWS services like SES, in case you want to send email notifications through the website.

Basically, you use AWS SDK to write Lambda functions that provide functionality for your microservice. Through Lambda you can communicate with any AWS service. API Gateway integrates with Lambda to provide you with an API endpoint.

Step by Step Guide

Basic Configurations

1. Go to S3 console and create a new bucket with default settings

2. Go the properties of your bucket and choose the option Static website hosting

3. Enable the option Use this bucket to host a website.

4. Provide the names of the html to be displayed as home page and the html file that will be displayed in case any error occur on your site.

5. Optionally provide Redirection rules if you want to route requests conditionally according to specific object key names, prefixes in the request, or response codes to some other object in the same bucket or external URL. Read more detail

Enable Static website hosting S3.png

6. Now, go the Permissions section of your bucket add the following into your Bucket Policy section

{

   "Version":"2018-07-15",

   "Statement":[{

       "Sid":"PublicReadForGetBucketObjects",

         "Effect":"Allow",

         "Principal": "*",

       "Action":["s3:GetObject"],

       "Resource":["arn:aws:s3:::your-bucket-name/*"

       ]

     }

   ]

 }
Bucket Policy S3 static website.png

Replace your-bucket-name with the name of your bucket

7. To enable your S3 static website to response to requests like GET and POST coming from some external application hosted at certain domain, you would need to configure CORS in your bucket settings. To do this add following into CORS configuration section of Permissions

<!-- Sample policy -->

<CORSConfiguration>

       <CORSRule>

              <AllowedOrigin>*</AllowedOrigin>

              <AllowedMethod>GET</AllowedMethod>

              <MaxAgeSeconds>3000</MaxAgeSeconds>

              <AllowedHeader>Authorization</AllowedHeader>

       </CORSRule>

       <CORSRule>

              <AllowedOrigin>*</AllowedOrigin>

              <AllowedMethod>POST</AllowedMethod>

              <MaxAgeSeconds>3000</MaxAgeSeconds>

              <AllowedHeader>Authorization</AllowedHeader>

       </CORSRule>

</CORSConfiguration>
CORS configuration S3 static website.png

8. Upload your code. For this tutorial create two simple html files by the name of index.html and error.html and upload them to bucket.

S3 static website index and error file.png

9. To launch and test the site, endpoint can be retrieved from  Properties > Static website hosting

Enrich your website by adding dynamic behavior

You can use combination of HTML5 and CSS3 to graphically enrich your website. You can also use Jquery Ajax to call API (microservice) and dynamically fetch data from a data source and display it on your website. Similarly by invoking API endpoints using Ajax, you can store any kind of user’s data back to your data source like any other web application. If your requirement is to use AWS only for all your development needs you can use use a combination of

API Gateway and Lambda to build APIs. A tutorial for which can be found here.

CORS settings in API-Gateway endpoints

It is important to note that when developing APIs (microservices) using API-Gateway and Lambda make sure to do the following

1. Enable CORS in Api-Gateway at the time of creation of a new resource.

CORS settings in API-Gateway.png

2. When writing the lambda function (the lambda function, that you integrate with API-Gateway endpoint to provide functionality to your microservice) make sure to add an additional parameter into the response header by the name of Access-Control-Allow-Origin  and value “*”.

If you are the following the tutorial I mentioned before for developing microservices (link), for this purpose you can observe the following line of code in the example function handler given in that tutorial.

headerJson.put("Access-Control-Allow-Origin", "*");

Conclusion

If your website is mainly informational and does not expect too many changes and the goal is to achieve easy management and low cost then S3 should be your first choice. Also using a service oriented architecture, as given above can dynamically display data and post data back to any datasource which gives you the power to make your website achieve many functionalities.

Muhammad Ali

Bluestack IT Solutions

 
 
Muhammad Ali