Setting up CloudFront Distribution for your web application

Posted on by Panther

Introduction

If you are running a web application, then ensuring it performs optimally across the world is essential. This is where AWS CloudFront comes in. CloudFront is a content delivery network that speeds up the distribution of your static and dynamic web content, such as HTML, CSS, JavaScript, and images, to your global audience. This tutorial will guide you through setting up a CloudFront distribution for your web application.

Prerequisites

Before starting this tutorial, you need the following:

  • An AWS account with administrative access
  • A web application with files in an S3 bucket or an HTTP server hosted on EC2 instance

Steps

  1. Create an S3 bucket or an EC2 instance

To get started, you need to decide where you want to host your web application. You can either host it on an S3 bucket or an EC2 instance. For S3, create an S3 bucket and upload your web application files to it. For EC2, launch an instance and set up a web server to host your web application.

  1. Configure your origin

To set up CloudFront, you need to specify the origin from where CloudFront should fetch your web application files. This can be either an S3 bucket or an HTTP server hosted on EC2.

If you are using an S3 bucket as your origin, you need to grant CloudFront access to the bucket. To do this, navigate to your S3 bucket and select the “Permissions” tab. Click on “Edit bucket policy” and paste the following policy:

{
    "Version": "2012-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity YOUR-CLOUDFRONT-ACCESS-IDENTITY"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*"
        }
    ]
}

Replace “YOUR-CLOUDFRONT-ACCESS-IDENTITY” with the actual CloudFront access identity and “YOUR-BUCKET-NAME” with the actual S3 bucket name.

If you are using an EC2 instance as your origin, you need to ensure that HTTP traffic is allowed on the instance. You can do this by adding a security group rule that allows incoming traffic on port 80 (HTTP).

  1. Create a CloudFront distribution

To create a CloudFront distribution, navigate to the CloudFront console and click “Create Distribution.”

In the “Web” section, click “Get Started.”

Under “Origin Domain Name,” specify the domain name of your S3 bucket or EC2 instance. CloudFront will automatically detect the correct protocol (HTTP or HTTPS).

Under “Viewer Protocol Policy,” select “Redirect HTTP to HTTPS.” This ensures that all traffic to your CloudFront distribution is encrypted.

Under “Cache Key and Origin Requests,” select “Use legacy cache settings.” This is suitable for most web applications and provides better caching performance.

Under “Distribution Settings,” specify a “Price Class” that determines the network coverage of your CloudFront distribution. Choose “Use All Edge Locations (Best Performance)” for global coverage or “Use Only US, Canada and Europe (Lowest Price)” for cost savings.

Under “Alternate Domain Names (CNAMEs),” specify the domain name of your web application. This allows you to use a custom domain name instead of the default CloudFront domain name.

  1. Configure SSL certificate

If you want to use a custom domain name with SSL, you need to configure an SSL certificate. You can either use a free SSL certificate provided by AWS Certificate Manager (ACM) or upload your own SSL certificate.

To use an ACM certificate, navigate to the ACM console and click “Request a certificate.” Follow the prompts to generate a new SSL certificate for your custom domain name. Once the SSL certificate is issued, select your CloudFront distribution in the CloudFront console and click “Edit.” Under “SSL Certificate,” select “Custom SSL Certificate (example.com)” and select the ACM certificate from the dropdown menu.

If you want to upload your own SSL certificate, you need to ensure that it is in PEM format and that it contains the private key. Once you have the SSL certificate in the correct format, select your CloudFront distribution in the CloudFront console and click “Edit.” Under “SSL Certificate,” select “Custom SSL Certificate (example.com)” and upload your SSL certificate.

  1. Configure DNS

To use your custom domain name with CloudFront, you need to configure your DNS settings to point to your CloudFront distribution. You can either use Route 53, AWS’s DNS service, or your own DNS provider.

If you are using Route 53, navigate to the Route 53 console and create a new Alias record set that points to your CloudFront distribution.

If you are using your own DNS provider, you need to create a CNAME record that points to your CloudFront distribution.

  1. Test your CloudFront distribution

Once you have configured your CloudFront distribution, you can test it by visiting your web application using your custom domain name.

CloudFront provides detailed logs that can be used to troubleshoot any issues. To access the logs, navigate to your S3 bucket and select the “Properties” tab. Click on “Enable logging” and specify a Target Bucket, Prefix, and permissions. CloudFront logs will be written to the specified S3 bucket.

Conclusion

In this tutorial, you learned how to set up a CloudFront distribution for your web application. CloudFront provides several benefits such as improved website performance, reduced latency, and better scalability. By following these steps, you can easily set up CloudFront for your web application and enjoy the benefits of AWS’s content delivery network.

Related Post