Serverless series

Publish your website without an application server on Amazon S3

In old times, deploying a Website usually meant to deploy to a web server that could host your “server code” (.Net, Java, PHP, Python, NodeJS, …). You needed a box (metal or virtual) that could execute that code through a web server (IIS, Apache, Tomcat, ExpressJS, … ) and have enough processing power to deal with the demand.

Nowadays it is growing a more decoupled approach in which your website could be written only in HTML & Javascript (or much better typescript if you like to code in a grown up version of Javascript). The code is executed in the client browser, which means that you don’t need a server executing your website code. If you have an important part of your code running in the browser, then scaling becomes much easier (new users add processing power with code running in their client machines).

You might still need some backend processing for managing dynamic & shared data, but this can also be done in a ‘serverless’ approach (which will be covered in another article).

So, the challenge is to store your html, css & JS files in a place where they can be downloaded by the client browsers. This can be done with a simple Storage or File service. The one I like most is is Amazon S3 (Simple Storage Service), but I have also had great experiences in the past using Microsoft Azure Blob Storage and you can explore simple solutions based on other providers such as Dropbox, Github Pages, Google Firebase, …).

In S3 you can create a “bucket” (which is like a folder) where you can place your files and access them via http://….

For example (I am assuming that you already have an Amazon AWS account and you went to the S3 Service), I have created a new bucket called “thisisademo”:

Here I have added a simpledemo.html file with the following HTML and Javascript that generates a random number

<h1>Hi, this is a simple demo</h1>
<p>Your lucky number is <span id='luckyNumber'></span></>
<script>
const randomNumber = Math.floor( Math.random() * 100);
const targetElement = document.getElementById('luckyNumber');
targetElement.textContent = randomNumber;
</script>

You can upload it easily with AWS S3 console:

If you try to access the file right now you might get an “AccessDenied” error. To make it public double click on the file name in the console and choose “Make public”

And voilà … your webpage is published on the internet through this url:

https://s3.amazonaws.com/thisisademo/simpledemo.html

or

https://thisisademo.s3.amazonaws.com/simpledemo.html

In other articles I will cover: