Handle 1000 of redirects

Developers Workers
#1

I am about to migrate everything to cloudflare workers. Most things are in place now, but we’re still missing how to handle all of our site’s redirects (I have a list of about 3,500 redirects of 301 and “DELETED”).

How could I handle this most effectively? Preferably would re-updating everything. Like a RewriteMap or something (although not entirely sure if this is supported on workers + how to go about it).

#3

I would make a JSON of them and use the KV to lookup the key and if the key match, then create the appropriate redirect response.

2 Likes
#6

That sounds interesting. Do you care to provide a little example? Perhaps I’ll write a blog post about it, and quote you.

#7

Sorry, I don’t have the time to put that together.

In general, I try to help out a lot on forums, but when it’s complex or actual “work” - no.

2 Likes
#8

This kind of use case is perfect for KV. You don’t even need the JSON, you just

NAMESPACE.put(url, redirectUrl);

and then in your worker, NAMESPACE.get(url), and if it gives you something back, issue the redirect.

3 Likes
#9

That seems like a nice way to do it, thank you very much for sharing. But I guess I do need some kind of JSON file which outputs all the different redirect urls right? Like so:

[
{
from: ‘url’,
to: ‘new-url’,
}
]

I am still not sure how to write the actual code for the KV; can you show me a more complete example, or perhaps send me some tutorials where I can learn more in depth?

I managed to write my own script, despite low amount of effort from the “community”. I wanted to share here, in case somebody is looking for the same solution.

Inside your “handleEvent” function, add this piece of code:

async function handleEvent(event) {
	const url = new URL(event.request.url)
	let options = {}

	/**
	 * Check for 301 redirects
	 */

	const redirect = await REDIRECTS.get(url.pathname).then((redirectJson) => {
	if(redirectJson) {
		let redirect = JSON.parse(redirectJson);
		url.pathname = redirect.path;

		// return { url: url.href, type: redirect.type.replace };
		return { url: url.href, type: 301 };
	}
	});
	if(redirect) {
		return Response.redirect(redirect.url, redirect.type);
	}

You have to have created a KV, (I called mine ‘REDIRECTS’) and then check the pathname of the incoming request. You’ll then search the KV for any key named the current path. If a key is found, a JSON string will be returned that you’ll need to parse (JSON.parse) and then extract the information from there.

Here’s an example of how the data looks:

image
image2060×390 26 KB

(the key is the name of the path (what’s coming after the domain name) and the data is a JSON object containing the new path as well as what type of redirect you want).

I then made a wordpress CLI script to import all the redirects into the KV.

/**
* Sync redirects to Cloudflare KV
* 
* Usage: `wp test`
*/
	if ( defined( 'WP_CLI' ) && WP_CLI ) {
		WP_CLI::add_command( 'sync-redirects', 'sync_redirects_to_kv' );
	}

function sync_redirects_to_kv() {
	$redirects = get_option('wpseo-premium-redirects-base');
	$kvBody = [];
	foreach($redirects as $redirect) {
		$kvBody[] = [
			'key' => '/' . $redirect['origin'],
			'value' => json_encode([
				'path' => '/' . $redirect['url'],
				'type' => $redirect['type'] // be careful, as Cloudflare only supports 3-399 redirects. Yoast will have some 410 redirects that CloudFlare doesn't support. You could hardcode 301 here instead.
			])
		];
	}
	$account_id = '';
	$namespace_id = '';
	$auth_key = '';
	$auth_email = '';

	$ch = curl_init('https://api.cloudflare.com/client/v4/accounts/' . $account_id . '/storage/kv/namespaces/' . $namespace_id . '/bulk');
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "PUT");
	curl_setopt($ch, CURLOPT_POSTFIELDS,json_encode($kvBody));
	curl_setopt($ch, CURLOPT_HTTPHEADER, [
		'X-Auth-Key: ' . $auth_key,
		'X-Auth-Email: ' . $auth_email,
		'Content-Type: application/json'
	]);
	
	$response = curl_exec($ch);
	exit(var_dump($response));
}
#10

It seems you’re just fishing for code you can copy-paste.

If you want to learn Javascript basics first, you have a good free resource here:

https://www.javascript.info

And more in-depth here:

The Worker Docs located here:

#11