Cloudflare
Cloudflare

Cloudflare es una plataforma integral que ofrece soluciones para mejorar la seguridad, rendimiento y confiabilidad de los sitios web y aplicaciones en línea mediante una variedad de servicios en la nube.
https://cloudflare.com



Video tutorial

Integrando PERENDER con Cloudflare

Paso 1.

Abra su panel de Cloudflare (https://dash.cloudflare.com)

Paso 2.

En su menú lateral izquierdo seleccione la opción Workers y Pages
Cloudflare Workers y Pages

Paso 3.

Seleccione el botón Crear Worker
Cloudflare Cree un Worker
Paso 4.

1. Defina el nombre de su Worker (A) (Ejemplo: perender-worker )
2. Luego de click en el botón Implementar (B)

Cloudflare Cree un Worker

Paso 5.

Click en Editar código
Cloudflare Cree un Worker
Paso 6.

1. Copie al código proporcionado a continuación o acceda al repositorio github en la siguiente dirección (https://github.com/perender/perender-cloudflare-worker/blob/main/index.js)

const BOT_AGENTS = [
 // Search engines ----------------------------------
 "googlebot",
 "bingbot",
 "yandex",
 "baiduspider",
 "duckduckbot",
 "msnbot",
 "adidxbot",
 "yahoo! slurp",
 "qwantify",
 "petalbot",
 "bytespider",
 "sogou web spider",
 "sogou inst spider",
 "exabot",
 "seznambot",
 "naverbot",
 "yetibot",
 "yandexbot",
 "yandeximages",
 "yandexaccessibilitybot",
 // AI Bots and LLM ---------------------------------
 "perplexity",
 "perplexitybot",
 "oai-searchbot",
 "chatgpt",
 "gptbot",
 "claudebot",
 "cohere-ai",
 "youbot",
 // Social networks and preview --------------------
 "facebookexternalhit",
 "twitterbot",
 "linkedinbot",
 "embedly",
 "quora link preview",
 "showyoubot",
 "outbrain",
 "pinterest/0.",
 "developers.google.com/+/web/snippet",
 "slackbot",
 "vkshare",
 "redditbot",
 "whatsapp",
 "flipboard",
 "tumblr",
 "bitlybot",
 "skypeuripreview",
 "nuzzel",
 "discordbot",
 "slackbot-linkexpanding",
 "flipboardproxy",
 "flipboardrss",
 "snapchat",
 "viber",
 "mattermost",
 "telegrambot",
 // SEO and analytics ---------------------------------
 "chrome-lighthouse",
 "lighthouse",
 "google page speed",
 "siteimprove",
 "serpstatbot",
 "uptimerobot",
 "uptimebot",
 "pingdom",
 "gtmetrix",
 "majestic-12",
 "mj12bot",
 "semrushbot",
 "ahrefsbot",
 "dotbot",
 "screaming frog seo spider",
 "seokicks",
 // Others ------------------------------------------
 "rogerbot",
 "360spider",
 "soso",
 "baiduspider-render",
 "applebot",
 "bitrix link preview",
 "xing-contenttabreceiver",
 "integration-test",
 "google-inspectiontool",
 "amazonbot",
 "adsbot-google",
 "googlebot-image",
 "googlebot-news",
 "googlebot-video",
 "facebot",
 "w3c_validator",
 "w3c-checklink",
 "archive.org_bot",
 "paperlibot",
 "dataprovider.com",
 "grapeshotcrawler",
 "zoominfobot",
 "feedly",
 "feedlybot",
 "newsblur",
 "inoreader",
 "ccbot"
];
const IGNORE_EXTENSIONS = [
 ".js",
 ".css",
 ".xml",
 ".less",
 ".png",
 ".jpg",
 ".jpeg",
 ".gif",
 ".pdf",
 ".doc",
 ".txt",
 ".ico",
 ".rss",
 ".zip",
 ".mp3",
 ".rar",
 ".exe",
 ".wmv",
 ".avi",
 ".ppt",
 ".mpg",
 ".mpeg",
 ".tif",
 ".wav",
 ".mov",
 ".psd",
 ".ai",
 ".xls",
 ".mp4",
 ".m4a",
 ".swf",
 ".dat",
 ".dmg",
 ".iso",
 ".flv",
 ".m4v",
 ".torrent",
 ".woff",
 ".ttf",
 ".svg",
 ".webmanifest",
 ".webp"
];
//Hooks into the request, and changes origin if needed
export default {
 async fetch(request, env) {
 return await handleRequest(request, env).catch(
 (err) => new Response(err.stack, { status: 500 })
 );
 },
};
async function handleRequest(request, env) {
 let botAgent = null;
 const url = new URL(request.url);
 const userAgent = request.headers.get("User-Agent")?.toLowerCase() || "";
 const isPerender = request.headers.get("X-Perender");
 const pathName = url.pathname.toLowerCase();
 const extension = pathName
 .substring(pathName.lastIndexOf(".") || pathName.length)
 ?.toLowerCase();
 // Perender loop protection
 // Non robot user agent
 // Ignore extensions
 if (
 isPerender ||
 !BOT_AGENTS.some((bot) => {
 if (userAgent.includes(bot)) {
 botAgent = bot;
 return true;
 }
 return false;
 }) ||
 (extension.length && IGNORE_EXTENSIONS.includes(extension))
 ) {
 return fetch(request);
 }
 // Build Perender request
 const newURL = `https://api.perender.com/Render?url=${request.url}&botAgent=${encodeURIComponent(botAgent)}`;
 const newHeaders = new Headers(request.headers);
 //Add JWT Bearer token to header
 const jwtToken = env.PERENDER_TOKEN;
 if (jwtToken) {
 newHeaders.set("Authorization", `Bearer ${jwtToken}`);
 }
 return fetch(new Request(newURL, {
 headers: newHeaders,
 redirect: "manual",
 }));
}


2. Pegue el código en el editor de Cloudflare como se muestra en la imagen (A)
3. Luego de click en el botón Guardar e implementar (B)
4. Luego de click en (C) para regresar a la configuración del workerCloudflare Cree un Worker
Paso 7.

1. En las configuraciones del worker seleccione la pestaña Activadores (A)
2. Luego de click en botón Agregar ruta (B)

Cloudflare Cree un Worker
Paso 8.

1. Defina la Ruta (A)
2. Defina la Zona (B)
3. Luego de click en botón Agregar ruta (C)

Cloudflare Cree un Worker
Paso 9.

1. En las configuraciones del worker seleccione la pestaña Configuración (A)
2. Luego seleccione Variables (B)
3. Luego de click en botón Agregar variables (C)

Cloudflare Cree un Worker
Paso 10.

1. Establezca el nombre de su variable PERENDER_TOKEN (A)
2. En el valor de la variable pegue el PERENDER_TOKEN, lo puedes obtener desde el dashboard
3. Luego de click en botón Guardar e implementar (C)

Cloudflare Cree un Worker
Powered by AstrolUi
An unhandled error has occurred. Reload 🗙