Getting a full-featured website up and running globally with AWS

The time has passed when if a new website was required, the administrator had to install a new server (physical or virtual), install IIS (if Windows), place the HTML files, find a public IP, configure the firewall to allow outside connection to the server, and, on top of that, maintain patches on the server. And that is just to start the process! If the given website requires high availability, then the admin would need to think about additional servers (if they are VMs, they should be on different hosts), redundant firewalls, switches, racks, Internet connections, power bars, and so forth. On top of that, we are not taking into consideration that all connections to the Internet will end up in a single server, and the access from a European user will end up on the same server than a person in the Americas. Just by explaining the effort to get a full-featured website running makes you tired, right? Well, AWS (Amazon Web Services) to the rescue. In this article, we are going through some easy steps to get your website up and running in no time.

We will use these following AWS services to deliver the solution: Route 53 to manage DNS, S3 (Simple Cloud Storage Service) where we are going to host the website files, and CloudFront where we will distribute the content globally. A simple diagram with the basic architecture of the solution is displayed below, and we will navigate through those services to get the solution in place.

full-featured website

First, let’s get a simple website with an index HTML and error page, and an IMG folder with some pictures that will be used on the website.

full-featured website

Configuring S3

In this section, we will configure the place where the website will be hosted. Logged on to the AWS Console, click on Services and then click on S3. In the new page, click on Create bucket button.

In Name and Region wizard, assign a unique name for the new bucket, define the region and click on Next.

full-featured website

In the Set properties page, we can define versioning, encryption, and logging. For now, let’s leave default settings, and click Next

In the Set permissions page, we will change the Manage public permissions setting to Grant Public read access to this bucket. Click Next.

full-featured website

In the Review page, a summary with all settings will be displayed. Click on Create Bucket.

Our next step is to upload our website to the S3 bucket that we have just created. These are the main steps to accomplish this task:

  1. In the main page of the given bucket, click on Upload button.
  2. In the select files page, drag and drop all files that were created for the website (two HTML files and the IMG folder), then click Next.
  3. In the set permissions page, select Grant public read access to this object(s) and click Next.
  4. In the set properties page, leave the default settings and click Next
  5. In the Review page, check the action that will be performed and click on Upload to confirm the start of the files.

The next step is to configure our bucket as a Static website hosting, and that is only two clicks away. Click on Properties, and then click on Static website hosting. Make sure that the Index and error document match the files that you upload and click on Save. Make sure to record the endpoint (highlighted information on the image below).

full-featured website

During the wizard, we defined the ACLs permission as public, but we need to configure the Bucket Policy permissions, and they are easy to apply using a JSON format. We used the AWS official documentation to add the permission. (Make sure to change the Resource to reflect the name of your S3 bucket.)

{

    "Version": "2012-10-17",

    "Statement": [

        {

            "Sid": "AddPerm",

            "Effect": "Allow",

            "Principal": "*",

            "Action": "s3:GetObject",

            "Resource": "arn:aws:s3:::montreallab/*"

        }

    ]

}

full-featured website

We can test the solution by typing the S3 endpoint address on any browser. The result should be the site that we uploaded to the S3 bucket.

full-featured website

Configuring CloudFront service

Amazon has more than 100 locations around the globe to cache and bring content using a server close to the end user. We will take advantage of this service to improve the performance of our new website. Bear in mind that we are going global with just a few clicks.

Logged on AWS Console, click on Services, and select CloudFront located on the section Network and Content Deliver. In the new page, click on Create Distribution, and on the new page select Get Started located on the Web section.

In the new page, we have tons of options to configure our distribution. The only information required to get going is to define the origin domain name. We will use the S3 endpoint address.

full-featured website

At this point of the game, we know which names we will use to access this site, and it is important to associate them during the creation of the distribution point. Go to Distribution Settings section, and fill out all the CNAMEs that will be used for this website. Click on Create Distribution when finished configuring all settings.

full-featured website

Wait for the distribution process to complete before moving forward. Click on the distribution point that was just created and copy the Domain Name. We will use that information on our next step. In the meantime, we can use the URL on the browser to access our website.

full-featured website

Configuring Route 53

This is the final touch. We will configure our Public DNS (in our case the domain name is montreallab.info) and we will make sure that www.montreallab.info points out to the CloudFront name using a CNAME record set.

We assume that you have your domain already configured on Route 53, but if you have any questions how to configure Route 53, please check my article where I explain the service in detail.

full-featured website

The final test is to access the host using the CNAME that we defined in Route 53 — in our case, it’s www.montreallab.info and the closest Edge Location provided by CloudFront will provide the information.

Another benefit when using CloudFront is the reporting capacities available to the administrator. In the example below we can see the operating system that used the service. There are different filters that can narrow down the results to get the numbers that the organization is looking for.

full-featured website

Following these steps, we were able to publish a full-featured website without touching a single server that we need to manage. The site is global, secure, and has all infrastructure power from AWS where the solution is redundant and with high availability.

Photo credit: Flickr / Automotive Social

About The Author

Leave a Comment

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Scroll to Top