Tutorial: From Heroku to AWS

A Web Developer’s First Glance at Cloud (using S3)

When developing a website, the typical coding bootcamp will sacrifice time learning about deployment or hosting for the meatier subject: coding the actual application. And this makes sense, right? Especially considering that deployment can simply look like this:

$ git push heroku master

Wipe hands, bring out the champagne, and celebrate a job well done. But there’s a lot going on behind the scenes that we young developers can’t see, and that’s the point of Product as a Service platforms like Saleforce’s Heroku, which is designed for developers to focus on coding without worrying about server storage or dreaded networking. Cloud services can be intimidating to learn and it’s easy to get trapped in the maze of online resources, but this article aims to keep things simple, get your head out of the literal clouds, and take a peek behind the scenes of internet hosting.

The Task: Deploy a simple static website on Amazon Web Service (AWS).

The Requirements:

• Create an AWS account (root account) and a connected IAM (administrative user) account. Sign in as administrator, not root.
• Have a static website ready (only GET requests, CSS/HTML/JS)

Access the Cloud: Creating A S3 Bucket

Okay, you’re in. There are many services in AWS, but to host our website we will be using the Scalable Storage Service (S3). S3 is place to store things — images, data, static websites. To store anything, you will need to create a container called a bucket. An S3 bucket can be thought of as a folder (it’s technically not because it doesn’t hold files, it holds objects).

1. Give your bucket a name.
2. Choose a region close to you. This is where your bucket lives, aka the physical location of the cloud server.
3. Keep everything else as default and click Create Bucket.

Inside a Bucket: S3 Management Console

Create a Endpoint: Enabling Web Hosting

In the S3 Management Console, click on the bucket you just created.

1. Click on the Properties tab. Here we see a lot of settings, but the one we are looking for is at the very bottom: Static website hosting. It’s currently disabled.
2. Click Edit and Enable. More options will pop up.
3. The Index Document is the file of your website that S3 will look for when accessing the root URL (index.html for example). This is case sensitive.
4. If you have an error html document, enter it in the Error Document field. Otherwise AWS will return its own default error messages.
5. Click Save Changes.

Now when we scroll down to the Static Website Hosting section in Properties, we will see the soon-to-be website’s endpoint, or URL to access the S3 bucket.

Make the Endpoint Public: Changing Permissions

Right now, if you click on your endpoint, you get a 403 Forbidden error message. By default, S3 blocks public access to your buckets. Checking the Permissions tab will remind you that “bucket and objects not public.” Let’s change this.

1. Under Block public access (bucket settings) click Edit.
2. Uncheck the checkbox and Save.

Allow Read-Only Permissions: Making a Policy

Just because a bucket is now public does not mean that people can go to your endpoint and read the contents of your website. We now need to add a policy that gives users that permission.

1. In Permissions, under Bucket Policy, choose Edit.
2. Copy the following policy and paste it in the bucket policy editor. Be sure to change “Bucket-Name” to your bucket’s name.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::Bucket-Name/*"
            ]
        }
    ]
}

Reading the JSON, we see the following key-value pairs:

• Sid = Statement ID, an optional identifier as to what the policy entails.
• Effect = either “Allow” or “Deny.”
• Principal = specifies the users or services that are allowed access. In this case it’s a wildcard (*) referring to everyone.
• Action = describes the specific actions that are allowed. In this case the public is able to retrieve objects from our S3 bucket with GET requests.
• Resource = specifies the object(s) the policy covers.

Make sure you change the Bucket-Name and then Save Changes.

Deploy Static Website: Uploading Files to S3

Great, we made a policy! Now, when going to the static website endpoint, a 404 Not Found error message appears. That’s because S3 is looking for the Index Document and is not finding one. Let’s upload it.

1. Go to the Objects tab and click Upload.
2. Choose the files you would like to upload and then press Upload to confirm. Make sure your Index Document is included.
3. Go back to your endpoint (Properties tab then scroll down to Static website hosting) and open the URL in your browser. It might take some time to properly load any attached styling.

Clean Up and Summary

Congrats! You just created an S3 Bucket on the AWS cloud, enabled web hosting for your static website, and made a policy to allow public GET requests to it. To delete a S3 bucket, you will need to delete all the objects in your bucket first.

There are a lot of places to go from here (below are some examples).

• How to customize your domain name
• Have a front-end that requires application packages? Simply add AWS CloudFront to S3.
• Have a REST API you need to run? See how to integrate it with your S3 Bucket.

But now you have gone from viewing a website on a local host, to blindly deploying, to tinkering behind-the-scenes with AWS S3.