CloudFront can be put in front of ImageEngine allowing CloudFront to cache the optimized image variants served by ImageEngine.
The use case typically is that images are served from the same domain or hostname as the website. Traffic can be split between ImageEngine and CloudFront using specific CloudFront behaviors. If the domain served by CloudFront will only be serving images, a single default behavior is required.
Setup
The setup requires some basic knowledge about how to configure Amazon CloudFront.
While setting it up, be careful not to create any request loops. For example, in the diagram above, one common mistake is to define www.foo.com as the origin for ImageEngine. This will create a loop. The correct origin for both CloudFront and ImageEngine should in this example be origin.foo.com
.
To continue, an account with Amazon CloudFront and ImageEngine is required.
ImageEngine
If you already have set up an ImageEngine delivery address and connected it with an origin, you may skip this step.
- Obtain your unique ImageEngine delivery address.
- Configure this delivery address with the actual origin where your original images are located.
- Verify the setup by accessing images like this: images.foo.com.imgeng.in/path/image.jpeg
- images.foo.com.imgeng.in will be used in the CloudFront setup as the origin for images.
Amazon CloudFront
Log on to your AWS account. Then go to the CloudFront admin section.
Create ImageEngine Policies
ImageEngine needs a custom Cache Policy and Origin Request Policy.
In the left-hand menu, click “Policies”.
Cache Policy
-
Click “Create cache policy”
-
Configure the policy like in the screenshot:
Take note of theWidth
,Viewport-Width
,DPR
,Accept
andUser-Agent
headers. - Save the policy
Origin Request Policy
-
Click “Create origin request policy”
-
Configure the policy like in the screenshot:
Take note of theWidth
,Viewport-Width
,DPR
,Accept
andUser-Agent
headers. -
Save the policy
Use the policies in a distribution
If needed, create a new CloudFront Distribution.
-
The origin of the distribution must be the ImageEngine delivery address
-
Add these origin custom headers:
x-ie-proto: 1.002 x-ie-upstream: CloudFront via Lambda
- Configure Cache behavior according to the screenshot below. Make sure to select the ImageEngine cache policy and origin request policy created in the previous steps.
Make sure to allow the OPTIONS method - Save the distribution
Split traffic
At this stage, we have a configuration that will pull all requests through ImageEngine. If you serve your entire website from CloudFront, you may want to split the traffic and only serve images from ImageEngine.
In order to do so, create additional behaviors with a “Path Pattern” matching the location of your images.
-
From the Distributions list, click the desired distribution
-
Click the Behaviors tab and “Create Behavior” button
-
Construct a Path Pattern that matches your image requests. You may have to create multiple behaviors. Add one pattern per image format, or simply use
images/*
if all images are in the “images” folder. Some suggestions for behaviors patterns:*.jpg
*.jpeg
*.png
*.webp
*.gif
*.svg
-
Make sure to use the cache policy and origin request policy created specifically for ImageEngine in previous steps.
-
Click “Create” to save the behavior.
Testing the Setup
The setup can be tested by requesting an image located at the origin using the assigned domain name of the CloudFront Distribution.
For example, if the default origin defined in CloudFront is origin.foo.com
, and the test image location is /images/image.jpeg
, this URL should return the image served through ImageEngine and CloudFront:
http://xxxxx.cloudfront.net/images/image.jpeg
(where XXXX is the unique identifier assigned by CloudFront)
You can verify that the image request is caught by the *.jpeg
behavior by inspecting the response headers of the image. Look for the Server
header, if it has the value ScientiaMobile ImageEngine
, the image is optimized by ImageEngine.
Enabling in production
To enable traffic to the setup after testing, create a DNS CNAME record for your domain pointing to the domain name of the CloudFront Distribution.
Note on cache efficiency and latency
As mentioned above, because CloudFront is caching images based on User-Agent, the cache will not be very efficient. Images will quickly be pushed out of the cache.
The x-cache
response header will frequently report " Miss from cloudfront
"
This is normal due to our caching strategy. ImageEngine will still be able to serve the image from cache. Traffic will not be hitting your origin! Look for the response header x-ie-cache
to determine if the request was a cache hit or not.
Important: Even if CloudFront reports a cache miss, this miss will not add any latency to the request in cases where the edge server (CloudFront) is in an EC2 region where ImageEngine runs because CloudFront and EC2 (ImageEngine), is on the Amazon backbone.
Comments
0 comments
Please sign in to leave a comment.