Deploying a Static Website on AWS with S3 and CloudFront

AWS is one of the leading cloud providers today and it is widely used by cloud developers. I will be discussing how to deploy a static website on AWS. This is most useful for small businesses that want to maintain an online presence and showcase their businesses online, it can also be useful for portfolio websites. Due to AWS easy to use console, deploying a static website can be done in a few simple steps.

The AWS services we would need include:

AWS S3: This is a storage service that we would use in storing the static website files.

AWS CloudFront: This is a content delivery network (CDN) service that we would use in delivering the static files at speed.

We would first create an S3 bucket, upload our files to the bucket and then make it accessible using CloudFront.

Creating an S3 Bucket

First, login to your AWS cloud console. If you don’t have an AWS account, you can create one for free. Once you’re logged in, follow the steps below.

1. Type ‘S3’ in the search bar and click on ‘S3’ from the list of services displayed.

2. Click on the ‘Create bucket’ button on the top right corner. This will take you to a page where you can set your bucket name and configure other options.

3. Type in your bucket name. Your bucket name must be unique globally, as indicated under the name text field. What I usually do is to add my AWS account ID to the bucket name, since my account ID is unique.

You can find your account ID by clicking on your account name at the top right corner of the page.

4. Leave other options at their default and click on ‘Create bucket’ at the end of the page. This would create a bucket and take you to the S3 dashboard where you can see all your buckets.

We have successfully created an S3 bucket to store our website files. Once you have created a bucket, clicking on ‘S3’ will bring you to the page shown above.

Uploading Files to S3

Now it’s time for us to upload our website files to our newly created bucket. Follow the steps below to upload your files to the bucket.

1. Navigate to the S3 bucket and click on your bucket name. This will take you to a page where you can see details about your bucket. If you have files (called objects) in your bucket, you will be able to see them and access them on this page.
2. Click on the upload button. This will open an interface where you can add files and folder by clicking the buttons provided or by using drag and drop.

3. Drag and drop your website files on the page, and click upload at the bottom of the page. This may take a few minutes depending on the size of your files and your network connection.

Note: Don’t just upload the website folder. Open the website folder and upload all the files and subfolders so that they are all in the root of the bucket.

When the file upload is complete, you will see a notification telling you that the file upload is successful. You may then click the ‘Close’ button and return to your bucket dashboard.

This time, when you click your bucket name, you will see the files that have been uploaded and you can access them.

Your bucket structure should look like this.

Configuring S3 to Host a Static Site

Before setting up our CloudFront distribution, let’s configure our S3 bucket to host a static site.

1. Navigate to the S3 bucket and click on your bucket name.
2. On the bucket details page, click on properties. Scroll to the bottom of the page, where you will find the ‘Static website hosting’ section, then click on the ‘Edit’ button.

3. On the ‘Edit static website hosting’ page, click on the enable button. This will bring up a number of configuration options. Specify the index document and error document (if you like), leave the rest at default.

4. Click on the ‘Save changes’ button. You will be taken back to the bucket properties tab. Scroll down to the ‘Static website hosting’ section, you will see that a website endpoint has been generated for your bucket.

The website endpoint is a url you can use to access your bucket. If we had allowed public access to the bucket, we can just paste the website endpoint on our browser and it will load up our site. We will be using CloudFront to deliver our site, so we don’t need to make the bucket publicly accessible. Since we did not allow public access, loading the url on a web browser will show an ‘Access Denied’ page, which is okay.

Creating a CloudFront Distribution

Let’s set up CloudFront and link it to our S3 bucket. To do this, follow the steps below.

1. From your console home page, type CloudFront on the search bar and select CloudFront from the results.
2. Click on ‘Create distribution’ from the CloudFront dashboard.
3. On the distribution set up page, click on the ‘Origin domain’ field, on the drop down, your S3 bucket will show under ‘Amazon S3’. Select the bucket containing your website files.
4. Under ‘Origin access’, select ‘Origin access control settings’. This will show a drop down to select an origin access control and a button to create one.

5. Click on ‘Create control setting’. This will show a pop-up with parameters for control settings. Enter a description if you like, leave other parameters at default and click the ‘Create’ button. This will take you back to the distribution set up page. Leave the remaining parameters at default, scroll down and click on the ‘Create distribution’ button.

The distribution will be created (it may take a few minutes to be fully active) and we will be taken to the distribution details page. You will see a prompt asking you to update your S3 bucket policy, click on ‘copy policy’. The S3 bucket policy we just copied will give CloudFront access to our S3 bucket.

On the distribution details page, you will see your distribution domain name, under General tab. The distribution domain name is the url you can use to access your site. At this point, we will still get an ‘Access denied’ error if we try to load the distribution url because we have not updated our bucket policy to give CloudFront access.

Set up a Default Root Object

Before we go to update our bucket policy, let’s set up a default root object. This is the file that will be loaded when we enter the url without adding a file path.

1. Navigate to CloudFront and click on the newly created distribution from the dashboard.
2. Under General tab, go to the settings section, click on ‘Edit button’.
3. Scroll to the ‘document root object’ section and enter the name of your website’s root document. Click on ‘Save changes’.

Now let’s update our S3 bucket policy.

Updating S3 Bucket Policy

Let’s update our S3 bucket policy with the policy we copied, this will allow CloudFront to access our bucket in order to load our site.

1. Navigate to S3 dashboard and click on your website bucket.
2. Click on the ‘Permissions’ tab. Scroll to ‘Bucket policy section’ and click ‘Edit’ button.
3. In the bucket policy text box, paste the policy you copied when creating the distribution and click ‘Save changes’.

If you forgot to copy the policy when creating the distribution, or you have overwritten it on your clipboard, you can use the policy below. Modify “Resource” and “AWS:SourceArn” to your own bucket and distribution arn respectively. You can get the arn from the details section of your S3 bucket and CloudFront distribution.

{
 "Version": "2008-10-17",
 "Id": "PolicyForCloudFrontPrivateContent",
 "Statement": [
  {
   "Sid": "AllowCloudFrontServicePrincipal",
   "Effect": "Allow",
   "Principal": {
    "Service": "cloudfront.amazonaws.com"
   },
   "Action": "s3:GetObject",
   "Resource": "arn:aws:s3:::my-website-1234/*",
   "Condition": {
    "StringEquals": {
     "AWS:SourceArn": "arn:aws:cloudfront::1234:distribution/2394"
    }
   }
  }
 ]
}

Your bucket policy page should look like this.

Now our CloudFront distribution can access our bucket to serve our website.

Navigate to CloudFront, click on your distribution and copy the distribution domain name. Load the distribution domain name on your browser and your site will be loaded.

You can register your own domain name and link it to your CloudFront distribution using Amazon Route 53. This way you will be able to access your site with your custom domain name instead of the default CloudFront domain name. The specifics are beyond the scope of this tutorial.

NOTE: If you followed this tutorial for learning purposes, do not forget to remove all the resources you created, to avoid unnecessary billings.

Navigate to your S3 bucket, select your bucket, empty the bucket then delete it.

Navigate to your CloudFront distribution, disable it and then delete it.

From the CloudFront dashboard, click on the menu symbol on the top left corner, select origin access under security and delete the origin access you created for your bucket.

Please leave your comments below. Thank you!