Piotr Kmita
In a previous article, we described to you what Amazon S3 is and how you can use it. Today we would like to introduce you to how AWS can be used to run a static website.
The Amazon S3 service was described in a previous article, in which we showed how to properly set up a “Bucket” and discussed related concepts.
In this article we will show you how to set up your own static website, running on Amazon S3 service. A static site is one that uses only HTML and CSS. The code and graphics will load on it directly from S3.
You may be wondering why S3 and not a virtual machine in EC2? It turns out that for our purposes of running a static site, the S3 service may be sufficient.
Its biggest advantage is its price and ease of use. In the traditional model, we would need to know server administration, install and configure the web server and its security to prepare the server. In addition, if we anticipated heavy traffic, on our site we would have to take care to provide sufficient resources for a virtual server or prepare an autoscaling service.
In the case of the S3 service, everything is provided and we don’t have to worry about it. Much more knowledge is required to run a virtual server than to put up a static site on the S3 service. When creating a website, we usually want it to be accessible, no matter how many users visit it. However, we must keep in mind that AWS charges fees depending on, among other things. outbound traffic. High traffic = higher costs.
That’s why it’s a good idea to monitor the budget to see if by any chance it has been exceeded. This can be done by setting appropriate thresholds. Using Amazon S3 will not always come at a cost. A service with a small number of images and visitors(for example, a business card of a micro-enterprise) can fit within the so-called. Free Tier.
For the S3 service, we can store up to 5GB of data for free and use 15GB of outgoing transfer. This is a good start for getting started with Amazon’s cloud. Details of the offer can be found directly on the AWS website.
The main condition for the site to work properly is the availability of the bucket name in the S3 service. So before registering a domain, let’s check whether a bucket with the desired name already exists and preferably set it up right away.
We can verify this no other way than by putting on a bucket.
For the purpose of the article, we have set up a free website “kylos-s3.tk” at http://www.dot.tk. On the other hand, if you want to have a permanent domain, you need to register/buy such a domain directly from the registrar.
Let’s log into the AWS aws.amazon.com web console and go to the Amazon S3 service. Then click “Create bucket” (Pic.1).
A new window will launch, where you fill in the field (Pic. 2) and go to Summary (Pic.3), then create a bucket by clicking “Create bucket”.
We do the same for a bucket named kylos-s3.tk and with the prefix www www.kylos-s3.tk. We will assign bucket privileges in the next step.
Let’s now place our site directly in the kylos-s3.tk behemoth. For the purposes of this article, we will use a free template downloaded from http://www.free-css.com/free-css-templates/page223/energy
After downloading the said template and unzipping it, go to the directory “Energy Free Website Template – Free-CSS.comenergy” and put its contents in the bucket kylos-s3.tk, without the prefix www. Go to the bucket, open the directory with the page and drag all the files into the bucket with the mouse.
We will then see the window in the following figure (Pic. 4). Click Next all the way to the end, and then “Upload” (Pic.5). You can upload files in a variety of ways, either by clicking upload or by using the AWS CLI (AWS Command Line Interface) console.
Now we will prepare our buckets for action. We need to give the appropriate authority. Go to the main page of the S3 service and click on bucket kylos-s3.tk, then “Permissions” (Pic. 6).
Go to “Bucket Policy”, enter the following policy (Pic. 7) and save the changes by clicking “Save”.
{
"Version":"2012-10-17",
"Statement":[{
"Sid":"PublicReadGetObject",
"Effect":"Allow",
"Principal": "*",
"Action":["s3:GetObject"],
"Resource":["arn:aws:s3:::kylos-s3.tk/*"]
}
]
}
After making the changes, we will see that our data is available to the public, as shown in the following screenshot (Pic. 8)
Next, go to the “Properties” tab and click “Static website hosting” (Pic. 9).
We specify the main file of the site in the field “Use this bucket to host a website”, usually it is index.html.
Our website address is located in the “Endpoint” field and points to: http://kylos-s3.tk.s3-website-us-east-1.amazonaws.com
We click “Save” and finish the work related to this bucket.
Bucket configuration www.kylos-s3.tk
Click on bucket and then on “Properties.” We click on “Static website hosting” and select “Redirect requests”. In “Target bucket or domain” we specify our domain without the www prefix “kylos-s3.tk”. In the “Protocol” field, specify http and click “Save” (Pic. 11).
We can now check if our page displays correctly by going to the address given in the “Endpoint” field. If we did not save it, we can click “Static website hosting” again to preview it. Let’s save it for the side, as we will need it later in the article.
Now we can configure our free domain. To do this, we log into the panel of our domain registrar and set the CNAME record to the address of our “Endpoint”.
Records:
kylos-s3.tk CNAME kylos-s3.tk.s3-website-us-east-1.amazonaws.com
www.kylos-s3.tk CNAME kylos-s3.tk
In the screenshot you can see the . tk domain management panel http://www.dot.tk
In summary, everything is currently running on the http protocol. If we would like to use the https protocol the most common way to do this is to use the service CloudFront or Cloudflare. This topic is quite broad and we will describe it in one of the next articles.
When creating a bucket, first check that the one with your domain name is not occupied and it is possible to create it. This way of hosting static pages, is ideal for simple business cards, where you want to include basic information. If you want to run a WordPress or Prestashop CMS, you can use an EC2 virtual machine or VPS offering.
It is also possible to extend the functionality and use the Amazon Lambda. It allows the use of serverless technology. However, this solution is dedicated to advanced users. In a future article, we will show how to combine these two services and use them for practical application. If you want to use at your place.
