Performing Image Resizing at the Edge with Cloudflare Workers

Question

Pulumi · Accepted Answer

When you want to perform on-the-fly image resizing at the edge, Cloudflare Workers are an excellent choice. The edge, in the context of a content delivery network (CDN) like Cloudflare, refers to the location that is geographically closest to the user. By resizing images at the edge, you're reducing the payload size and improving load times for your end-users, since the images don't need to travel from the origin server.

Cloudflare Workers are serverless functions that run directly on the Cloudflare edge, close to your users, which means they can modify requests and responses to and from your site on the fly without needing to go all the way back to your origin server.

To achieve image resizing with Cloudflare Workers, we will create a Worker script that intercepts image requests and resizes them according to specified parameters. For this, we will provision two primary resources:
- `cloudflare.WorkerScript`: This represents the Worker code itself, which we will write to intercept image requests and apply resizing operations.
- `cloudflare.WorkerRoute`: This specifies the route (or URL pattern) that the Worker will trigger on.

Let's write a Pulumi program that sets up a Cloudflare Worker for image resizing:

```python
import pulumi
import pulumi_cloudflare as cloudflare

# Your Cloudflare account ID
account_id = 'your-cloudflare-account-id'

# Cloudflare zone ID for the domain you want this worker to be attached to.
zone_id = 'your-cloudflare-zone-id'

# Worker script code to resize the images
# In a real deployment, you might fetch this from a source file.
worker_code = """
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  let url = new URL(request.url)
  
  // Conditional logic based on the URL can be added to resize images as needed.
  // For example, only URLs ending with "?resize=100x100" will be resized.
  if (url.searchParams.has('resize')) {
    // Logic to resize the image would go here.
    // Cloudflare offers an Image Resizing API for this purpose.
  }
  
  // Fetch and return the original request if no resizing is required.
  return fetch(request)
}
"""

# Define a new Worker script resource
worker_script = cloudflare.WorkerScript('image-resizing-worker-script',
    name='image-resizing-script',
    content=worker_code,
    account_id=account_id
)

# Define a new Worker route resource. Here we are saying that any requests to
# the path "/images/*" should trigger the Worker.
worker_route = cloudflare.WorkerRoute('image-resizing-route',
    zone_id=zone_id,
    pattern='https://example.com/images/*',  # Replace with your domain and path
    script_name=worker_script.name,
)

# Export the Worker Route URL to easily access it.
pulumi.export('route_url', worker_route.pattern)
```

In this program, we set `worker_code` as a string for simplicity, but in practice, you would likely load this from a file. This code contains the logic for resizing images; it should be substituted with real resizing logic using [Cloudflare's Image Resizing API](https://developers.cloudflare.com/images/image-resizing/) or your own custom logic.

We then create a `cloudflare.WorkerScript` resource with this code and specify the account ID it should be associated with. Following this, we declare a `cloudflare.WorkerRoute` that triggers our Worker script whenever a request matches the specified pattern (in this case, any image request under the `/images/` directory of our site).

Finally, we use `pulumi.export` to output the pattern we've set for the Worker route, so you can easily test and reference it.

Keep in mind you'll need to replace `'your-cloudflare-account-id'`, `'your-cloudflare-zone-id'`, and `'https://example.com/images/*'` with your real Cloudflare account ID, zone ID, and the path where you want the Worker to trigger, respectively.