Serving Assets to My Website

Serving assets, such as images and documents, to be accessible to end users is essential to a modern web experience. As for what I have in mind with this blog, I want to visually capture steps that I took to help jog my memory of what I did or learned.

Setting this up took me 30 minutes the first time. The steps are split into a series of posts to keep the posts short and organized.

Considerations

The fact that you’re reading this post is a good indicator that this page loaded in a reasonable amount of time. Fast Company reported that load times can be a critical factor to Amazon’s sales and Google’s search results. With that to keep in mind, here is my wishlist.

  1. Low cost storage
  2. Expandable storage
  3. Storage durability (Would my assets remain in a natural disaster? Does the hosting company have foreseeable longevity?)
  4. Secure storage management
  5. Easy health checks
  6. Controlled access to assets
  7. Flawless or near flawless uptime
  8. Low cost delivery
  9. Fast content delivery
  10. Configurable with my domain

In a nutshell, I’m looking to have a content delivery network(CDN) with an outstanding storage offering.

Using AWS to configure my CDN

The table below lists what I did with which service:
Some familiarity with AWS and the AWS Console is assumed

ActionRoute 53Certificate ManagerS3CloudFront
Have my domain in Route 53x
Get a secure certificate for HTTPSox
Create a S3 bucketx
Create a CloudFront distribution of my S3 bucketox
Add a new record for my CloudFront distributionxo

x: Primary AWS service; o: Related AWS service

Have my domain in Route 53

  1. From AWS Console, navigate to Route 53 search query for Route 53
  2. Go to Domains in the left panel and confirm youdomain.com is listed list of domains in route 53
    • If you don’t have a registered domain, purchase a domain by clicking the Register Domain button

Get a secure certificate for HTTPS

  1. Click on Services in the header drop and type Certificate Manager in the search, follow the top suggestion

  2. If you don’t have any provisioned certificates, click Get Started under Provision Certificates.

    • If you have provisioned certificates but don’t see any listed, navigate to the region where your provisioned certificates are listed.
  3. Start a request for a certificate by clicking on the Request a certificate button request a certificate button in AWS Certificate Manager

    [!] Note the region you are working from provided in the header. Certificates are in the region from which they were initially requested. region in AWS header

  4. Select Request a public certificate and click Request a certificate

  5. Complete the request process

    1. Add domain names:
      1. Enter yourdomain.com and click Add another name to this certificate
      2. Enter *.yourdomain.com and click Next add domain names
    2. Select validation method:
      1. Select DNS validation and click Next
    3. Add Tags:
      1. Enter as many tags as you’d like or none. Tags are similar to labels on AWS resources, can be used to communicate to other users about this resource, and a means for tracking costs.
    4. Review:
      1. Review for the following
        1. Domain name: yourdomain.com
        2. Additional name: *.yourdomain.com
        3. Validation method: DNS
      2. Click Confirm and request if everything looks right
    5. Validation:
      1. This process may take a few hours but generally completes in 15 minutes. While it validates, expand each row under Domain and perform the following:
        1. Click the blue Create record in Route 53 button validation
        2. In the pop-up modal, click Create
      2. Click Continue
  6. Verify the request in the table for yourDomain.com and it’s status is either Issued or Pending complete request

Create a S3 bucket

A bucket behaves like a file directory.

  1. Click on Services in the header drop and type S3 in the search, follow the top suggestion
  2. Click on Create bucket to start a bucket creation process
  3. Under General configuration:
    1. Enter a unique bucket name. You’ll need this bucket name for setting up your CloudFront distribution
    2. Choose a region. General good practice is to select a region that is closest in proximity but also consider the availability zones in the region.
  4. Under Bucket settings for Block Public Access
    1. Keep Block all public access checked. This protects your S3 bucket from being exposed to requests to the public. In the next section, we’ll conigure CloudFront to have access to your S3 and be responsible for distributing your assets.
  5. Click on Create bucket

Create a CloudFront distribution for a S3 bucket

  1. Click on Services in the header drop and navigate to CloudFront
  2. Click on Create Distribution
  3. Click on Get Started under Web
  4. Under Origin Settings
    1. Origin Domain Name: Select the S3 bucket you want to distribute from
    2. Restrict Bucket Access: Yes
    3. Origin Access Identity: Create a New Identity
    4. Comment: Enter a description for the created Origin Access Identity
    5. Grant Read Permissions on Bucket: Yes
  5. Under Default Cache Behavior Settings
    1. Viewer Protocol Policy: Redirect HTTP to HTTPS
    2. Compress Objects Automatically: Yes
  6. Under Distribution Settings
    1. Alternate Domain Names(CNAMEs): Enter yourdomain.com or whichever subdomain you want your assets to be served from.
    2. SSL Certificate:
      1. Select Custom SSL Certificate
      2. In the input, you should see your secure certificate for yourdomain.com. Select that.
  7. Click Create Distribution. You should see a pending status for your distribution. You may have to wait up to 15 minutes for your distribution to be created or propagate.

Your S3 bucket items can now be retrieved from the distribution’s Domain Name (.cloudfront .net).

Remember your Domain Name for the next step to configure your custom domain to distribute your S3 bucket items.

Add a record in Route 53 for you CloudFront distribution

  1. Click on Services in the header drop and navigate to Route 53
  2. Click on Hosted Zones in hte left navigation panel
  3. Click on the domain name your CloudFront distribution will serve from
  4. Click on Create Record Set
    1. Name:
      1. Leave as blank if you want to use your domain OR
      2. Enter the name of your subdomain here (yoursubdomain.yourdomain.com)
    2. Type: A - IPv4 address
    3. Alias: Yes
    4. Alias Target: Click and scroll down to CloudFront distributions. Select your recently created CloudFront distribution.
    5. Leave the remaining values as default
    6. Click Save Record Set
    7. Wait up to 5 minutes to test your set up by going to http://yourdomain.com/pathToS3BucketItem

If you like this post, feel free to support me. Your generosity goes a long way.

Buy me a coffee Buy me a coffee