How to deploy a static website with S3 and CloudFront

In this article you will learn how to deploy a static frontend on AWS. We’ll have a look at one of the cheapest deployment options, using S3 for storing the website code and CloudFront for caching. Using CloudFront is optional but highly suggested, it allows to cache the web content in the AWS edge locations, decreasing the latency. This is important especially if your website audience is global

To show all options, this guide will start from the most simple one (hosting the site from a public S3 bucket) and provide incremental steps to achieve a production-ready solution (site served from CloudFront with private bucket)

How to host a website from a public bucket

1. Create S3 Bucket

• Go to S3 and create a new bucket
• If you have a domain that you want to point to the website, this has to match the bucket name. For example, if your domain is your-website-domain.com, this must be set as bucket name
• Upload all your website build files (html, css, js, etc…) to the bucket

2. Enable S3 Website Hosting

• Go to the Properties tab of your bucket
• Scroll down to the section Static website hosting and click on Edit
• Enable Static website hosting from here
• Configure index and error document, usually they are index.html and 404.html After saving you can find in the properties tab the S3 generated url. This url is built as http://<bucket-name>.s3-website-<region>.amazon.aws.com or http://<bucket-name>.s3-website.<region>.amazon.aws.com.

3. Edit bucket permissions

If you try to access the website with your S3 endpoint, you will probably get a 403 Forbidden error. To fix this you need to modify permissions to allow everyone to have read access to your bucket:

• Go to the Permissions tab of your bucket.
• In Block public access section, click Edit and clear Block all public access and all the other toggles
• In Bucket policy click Edit and add the following policy (fill your bucket name)

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

  Now you will be able to access your website by the S3 endpoint

4. Use a custom domain (skip this if you want to integrate CloudFront)

• Go to Route53
• Open the hosted zone that matches your domain name
• Select record type A - Routes traffic to an IPv4 and toggle Alias
• Point the record to S3 website endpoint. Note: if you don’t find the S3 endpoint, it’s because the domain doesn’t match the bucket name
• If your bucket name is a subdomain an A Alias record won’t work. In this case you will need to create a CNAME record and point it to the S3 endpoint

After saving the new records, you will have to wait around 60 seconds, to propagate the change to the DNS servers. After that you will be able to access your website from your custom domain.

If you want to access your website using the www subdomain too, you will need to configure one more bucket and one more Route53 record. Have a look at this article to find out how to do it.

How to cache website content with CloudFront

1. Create a CloudFront distribution

• Go to CloudFront and create a new distribution
• Select the origin domain to be the S3 bucket containing your static website and then click on Use website endpoint. Keep in mind that in order to use this option your S3 bucket must be public
• Leave all the other options as default and save
• Check that the website is accessible from your distribution. You can find the distribution URL under General > Details > Distribution domain name

Important: If you apply any changes to the CloudFront configuration, notice that the content is cached, so you will probably not see any changes in the website until the TTL expired. To speed up this process, you can create an Invalidation to empty the cache. To do so:

• Go to Invalidation and click on Create Invalidation
• Add /* in the object paths in order to evict the intere cache
• CLick on Create Invalidation and wait untile the process is finished

2. Use a custom domain

• Go to Route53, click on Hosted zone and then click on the hosted zone of your domain
• Click on Create record and apply the following configuration
• Record type: A
• Alias: On
• Route traffic to: Alias to CloudFront distribution
• Select your CloudFront distribution

Now create another record to redirect www to the same domain, with the following config:

• Record type: A
• Alias: On
• Route traffic to: Alias to another record in this hosted zone
• Select the record that you created in the previous step

3. Configure SSL

First thing, you need to create a SSL certificate:

• Go to AWS Certificate Manager (ACM)
• Click on Request certificate and configure it with the following:
• Certificate type: Request a public certificate
• Fully qualified domain name: your-website-domain.com
• Click on Add another name to this certificate and set the other name as www.your-website-domain.com
• Validation method: DNS Validation
• Click on Request

Now you have to attach your certificate to CloudFront:

• Go to your CloudFront distribution, click on General and then under the Settings section click on Edit
• Apply the following config:
• Alternate domain name (CNAME): add the domains specified in your ACM certificate
• Custom SSL certificate: select your ACM certificate
• Click on Save

To redirect traffic from HTTP to HTTPS:

• Go to Behaviours. There should be only one behaviour here, select it and then click on Edit
• Set Viewer protocol policy to Redirect HTTP to HTTPS
• Click on Save

Allow traffic only from Cloudfront making S3 bucket private

1. Create a CloudFront distribution

• Go to CloudFront and create a new distribution
• Select the origin domain to be the S3 bucket containing your static website and DO NOT click on Use website endpoint
• Set origin access to Origin access control settings (OAC) and select your bucket
• Leave all the other options as default and save
• After saving, you will be shown a banner where you can copy the policy that you have to save in S3

2. Update S3 policy

• Go to your S3 bucket, click on the Permissions tab, here you can find the bucket policy to edit
• Paste the policy copied from Cloudfront, it should look like this:

  {
        "Version": "2008-10-17",
        "Id": "PolicyForCloudFrontPrivateContent",
        "Statement": [
            {
                "Sid": "AllowCloudFrontServicePrincipal",
                "Effect": "Allow",
                "Principal": {
                    "Service": "cloudfront.amazonaws.com"
                },
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::<bucket-name>/*",
                "Condition": {
                    "StringEquals": {
                      "AWS:SourceArn": "arn:aws:cloudfront::<account-id>:distribution/<distribution-id>"
                    }
                }
            }
        ]
      }
  

• Mdify the public access setting by selecting Block all public access
• Go to Properties tab and disable Static website hosting
• After saving all these options, your website won’t be accessible from S3 directly, you will get a 403 Forbidden or Access Denied error since you’re enforcing the bucket to be accessible only by CloudFront
• At this point you should be able to access the website through the CloudFront endpoint. You can find it in the distribution under General > Details > Distribution domain name. If you have an Access Denied error, double check in the Origins setting that the Origin is configured to use the S3 website endpoint, and not the S3 bucket
• If you do any change to CloudFront config, notice that the content is cached, so you will probably not see any changes until the TTL expired. To speed up this process, you can create an Invalidation

3. Redirect routes to index.html

Since you’re not using the S3 static website feature, CloudFront will not redirect the routes to index.html automatically. For example, you might want to access the page contained in about/index.html by going on the URL www.your-site.com/about instead of www.your-site.com/about/index.html. In order to allow this, you will need to create a custom function

• Go to CloudFront
• On the left menu, click on Functions
• Click on Create function
• Choose a name for the function and click on Next
• Copy the following code in the Build tab

  function handler(event) {
    var request = event.request;
    var uri = request.uri;
      
    if (uri.endsWith('/')) {
        request.uri += 'index.html';
    } else if (!uri.includes('.')) {
        request.uri += '/index.html';
    }
      
    return request;
  }
  

• Go on the Publish tab and click on Publish Function
• Click on Add association
• Select your distribution and the cache behaviour, and set Event type to Viewer Request

After adding the association, create a Cache Invalidation and you will be able to access your website correctly after it’s completed

Conclusion

Now your website is deployed to the public in a cost efficient way, and can be accessed globally with low latency. Good job!