Serve an Image from an S3 Bucket via CloudFront
Let’s do this using CloudFormation and the AWS CLI
For my latest project, I’m going to walk you through how you can create an S3 Bucket attached to a CloudFront distribution and then access an image in the bucket via the CloudFront distribution. We’re going to do this using CloudFormation and the AWS CLI in your local terminal.
Here’s the screencast, if you want to follow along that way:
Prerequisites
To accomplish this, you’re going to need a few things:
- An AWS account (free tier is fine) and a user with proper permissions
- The AWS CLI installed in your terminal and configured to your user
- A CloudFormation template (provided below)
- Some image that you want to upload and view
[NOTE] All of this is going to be done in the AWS region us-east-1 (N. Virginia). Make sure you’re in that region and you’ve configured the CLI that way.
Why use CloudFront?
What do you do when you have content that you need to deliver to people all over the world, and you want to get it to them with a little latency as possible? You use AWS CloudFront, that’s what!
CloudFront is an AWS content delivery network that takes advantage of AWS edge locations around the world to deliver content from one region to any other region on the planet just as if the user were sitting in the origin region.
This is obviously very valuable for any application that needs to deliver content to people all over the globe, because it means that users won’t experience the latency that would normally come with being farther away from the origin.
CloudFront is pretty cool.
Why use CloudFormation?
Infrastructure as Code (IaC) is the future (and present) of DevOps. IaC is the practice of using code to create necessary infrastructure. Implemented properly, IaC is easily editable, repeatable, and can be automated. All of this increases efficiency and reduces the chance for human error in the deployment process.
CloudFormation is AWS’s IaC service. It allows you to use a code template to model and deploy a variety of AWS and third-party resources. You just create a template with your desired resources and any dependencies, and CloudFormation will use it to deploy those resources into a stack that you can then manage.
CloudFormation is also pretty cool.
Why use the AWS CLI?
It is totally possible to do this entire project using the AWS console. But I’m not going to do that, here.
The reason for this is that using the console isn’t the way that this project would be completed in the real world. In the real world, DevOps engineers typically only use the console when absolutely necessary.
If I’m going to use this project as a means of simulating its real-world application, it makes sense to do it the way it would typically be done in the real world, right?
I prefer to practice like I’m going to play… ;-)
Let’s go to work!
At this point, I’m assuming you have already installed the AWS CLI in your local terminal, and you have some photo file in mind that you want to use.
Now, we need to have a CloudFormation template that can be used to create the necessary AWS resources we are going to need to complete the project. Luckily for us, AWS provides just the template that we need, here.
BUT THERE’S A CATCH!
When you click the link for the CloudFormation template from AWS, it opens up the console and links to the template in an S3 bucket. That’s convenient, but remember — we want to do this using the AWS CLI. That means that we’re going to need the raw YAML template.
Say no more…
The above code is the raw YAML code from the AWS-provided template. This CloudFormation template creates an S3 bucket, a CloudFormation distribution, and an Origin Access Identity. These are the necessary resources for the stack creation.
You can copy and paste that code into a new file and save it to a place you can remember. I saved it as s3cftemplate.yml and put it in a directory that I created for this project.
To the Terminal!
Now it’s time to head over to our terminal and do some magic…
First, make sure that you change into the directory in which you placed your saved template file. Otherwise, you’re going to have to remember the path to the file.
You can double-check to make sure you’re in the right spot by doing an ls to make sure your template file is there.
Now, let’s input the command to use the template to create a stack in CloudFormation:
aws cloudformation deploy --template-file YOURFILENAMEHERE --stackname YOURSTACKNAMEHERE
You can see from the command above where you need to customize it to your file name and a name for your stack. My command looks like this:
Hit enter and you’ll see this:
This is good. It means that CloudFormation is doing its thing — creating the resources we need.
This is going to take a few minutes, so feel free to grab a snack, take a break, whatever.
After a few minutes, you should see this message:
I will say this — the code provided by AWS in the template has an “outputs” section that should output the data we need to finish the project, but I haven’t gotten to work, after multiple times, so we’ll do it the long way…
Upload our picture to the S3 Bucket
Now we need to get the name of the S3 bucket that CloudFormation created for us. For that we use this command: aws s3 ls
This command returns a list of all of the S3 buckets in your AWS account. You need to find the one that was just created. In my case, it was this one:
Go ahead and copy the bucket ID (everything after the timestamp), because you’re going to need it to upload your picture.
If you’ve uploaded the picture to your working directory, this is easier. If not, you can either move it there, or just use the absolute path to the picture in the following command to upload the picture to the S3 bucket:
aws s3 cp YOURFILE s3://YOURBUCKETID
My command looked like this:
I chose a picture of The Wu-Tang Clan, because I was listening to their music while I was working on this project. :-)
Once you hit enter, you’ll get a confirmation message that the upload completed:
Let’s see our image!
Now, we do need to go to the console to get the URIs to see our image. First, we can go to the S3 section of our console, select the bucket we just created, then select the picture that we just uploaded. The details page for that object will give us the URL for the picture:
When we visit that URL, we’re going to be greeted with this:
Yup. You’re going to get an AccessDenied error. But why?
Well, that’s because we created the CloudFront distribution for this bucket. This means that CloudFormation is serving the image, so it can’t be accessed directly from the bucket. That’s the way we want it to be.
Now what?
No worries, it’s easy to confirm things are set up correctly. All we need to do is head over the CloudFormation area of the console, select “stacks” from the sidebar, click on the stack that we just created, and then navigate to the “outputs” tab of the details page:
You want the URL for your CloudFront distribution, which appears on the Outputs tab.
When you open it, you’re going to get another AccessDenied message. Fear not!
Now, all you need to do is append the name of the file that you uploaded to the URL of your CloudFront distribution:
WOO HOO!
Once you append the name of your file to the CloudFront URL, you’ll discover that you can view your image through CloudFront. How cool is that?!
In my case, I get the bonus of being served an image of the greatest Hip-Hop group of all-time. :-)
Congratulations!
Obviously, this is very simple implementation of S3 and CloudFront to serve an image. But it is a simple version of a very prevalent infrastructure for applications all over the internet.
And not only did you do it, but you did it the way many DevOps professionals do it every day — using the CLI!
Once successful, you can go ahead and delete your stack from CloudFormation. Just remember to delete your image from the S3 bucket, first, or your deletion will fail.
Thanks for following along with me on this project. I hope you learned something new that you can build on for future projects…
