Resolución del error 404 de los trabajadores de Cloudflare después de una implementación exitosa

Solución de problemas del entorno de prueba con los trabajadores de Cloudflare

Una etapa esencial en el proceso de desarrollo es configurar un entorno de prueba para que las actualizaciones puedan probarse adecuadamente antes de publicarse. En este caso, los trabajadores de Cloudflare mantenían el sitio web principal en desarrollo funcionando bien.

Después de clonar el repositorio Git existente y conectarlo al entorno de prueba a través de Cloudflare Workers & Pages, todo pareció funcionar bien. Los registros indicaron que la implementación fue exitosa, lo que normalmente indicaría la creación de una instancia activa.

Pero cuando el desarrollador intentó acceder a la dirección de Cloudflare proporcionada, apareció un mensaje de error 404, dejándolo sin estar seguro de qué salió mal. Puede resultar molesto lidiar con problemas de esta naturaleza, particularmente cuando se cree que el servidor debería estar activo inmediatamente después de la implementación.

No está claro si se necesita un segundo servidor o si hay algo más que hacer para activar completamente el nuevo repositorio. En este artículo veremos las causas de este problema 404 y cómo configurar correctamente el servidor Cloudflare Workers para el entorno de prueba.

Cómo los trabajadores y scripts de Cloudflare manejan los errores 404

El primer script en el ejemplo dado muestra cómo usar javascript para manejar un error 404 en la interfaz. El guión utiliza el ventana.onload evento para esperar a que la página se cargue por completo. La página hace un buscar solicitud para ver si el recurso está disponible una vez que se ha cargado. El usuario es enviado a una página de error personalizada si el recurso devuelve un error 404. Sin necesidad de participación de backend, esta técnica es particularmente útil para gestionar fallas directamente en el navegador del usuario y proporcionar un respaldo para cualquier página o recurso faltante.

En el segundo ejemplo, el script gestiona las solicitudes utilizando un Trabajador de Cloudflare a medida que avanza hacia el backend. El trabajador utiliza el agregarEventListener Método para escuchar eventos e interceptar solicitudes de recuperación cuando se realizan. En caso de que se produzca un error 404 debido a que la página solicitada no existe, el trabajador proporcionará dinámicamente una página de error personalizada. Esta estrategia funciona bien para administrar las respuestas del servidor y ofrece una forma más adaptable y segura de manejar errores, particularmente cuando se trabaja con diversos contextos, como producción y puesta en escena o contenido dinámico.

Para garantizar que los scripts de frontend y backend se implementen y funcionen correctamente, en el tercer ejemplo se presentan las pruebas unitarias. Realiza pruebas automatizadas para ver si la implementación de Cloudflare Pages devuelve los códigos de estado HTTP correctos usando Nodo.js y un marco de prueba como Mocha. Las pruebas para la página principal (que asume un estado 200) y las pruebas para una página inexistente (que espera un estado 404) están incluidas en el conjunto de pruebas. Estas pruebas garantizan que todo se implemente según el plan y que cualquier página o enlace roto dé lugar a la respuesta adecuada.

Además, el uso de las pruebas de afirmar Los comandos garantizan que cualquier diferencia en los códigos de estado de respuesta se detecte de inmediato. En las canalizaciones de integración e implementación continuas (CI/CD), donde garantizar el comportamiento de implementación es crucial para evitar tiempos de inactividad o conexiones rotas, las pruebas son indispensables. Considerando todo esto, la combinación de redirección de frontend, manejo de errores de backend y pruebas unitarias ofrece un enfoque exhaustivo para garantizar el funcionamiento perfecto de su implementación de Cloudflare Workers, incluso ante la ausencia de recursos o condiciones personalizadas, como un servidor de prueba.

// Frontend JavaScript for handling redirection
// This script checks if a resource is available on the Cloudflare page
// If not, it redirects to a fallback page
window.onload = function () {
  fetch(window.location.href)
    .then(response => {
      if (response.status === 404) {
        window.location.href = '/404.html';  // Redirect to custom 404 page
      }
    })
    .catch(error => {
      console.error('Error fetching the page:', error);
      window.location.href = '/error.html';  // Redirect to error page
    });
};

// Cloudflare Worker script for managing 404 errors
// The script checks if the requested path exists, and if not, returns a custom 404 page
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});
async function handleRequest(request) {
  try {
    const response = await fetch(request);
    if (response.status === 404) {
      return new Response('Custom 404 Page', { status: 404 });
    }
    return response;
  } catch (error) {
    return new Response('Error occurred: ' + error.message, { status: 500 });
  }
}

// Example unit test for deployment verification
// Using JavaScript to ensure that Cloudflare Pages return the correct response
const assert = require('assert');
const fetch = require('node-fetch');
describe('Cloudflare Deployment Test', function() {
  it('should return 200 for the main page', async function() {
    const response = await fetch('https://your-domain.pages.dev');
    assert.equal(response.status, 200);
  });
  it('should return 404 for non-existent page', async function() {
    const response = await fetch('https://your-domain.pages.dev/unknown');
    assert.equal(response.status, 404);
  });
});

Comprender el entorno de preparación de los trabajadores de Cloudflare

Para fines de desarrollo, instalar un entorno de prueba puede ser crucial cuando se trabaja con Trabajadores de Cloudflare. Los desarrolladores pueden probar sus aplicaciones en un entorno de prueba antes de implementarlas en el servidor de producción. Para evitar problemas como el error 404 indicado, este entorno debe configurarse correctamente cuando se configura por primera vez. Los desarrolladores suelen creer que todo lo que se necesita para iniciar un servidor en vivo es clonar un repositorio de GitHub y conectarlo a Cloudflare Pages. Aunque Cloudflare implementa automáticamente sitios estáticos, si la configuración de enrutamiento del trabajador no está configurada correctamente, pueden ocurrir problemas.

Un error 404 a menudo significa que la solicitud no está siendo interceptada adecuadamente por el Obrero. Las reglas de enrutamiento personalizadas son necesarias para que Cloudflare Workers garantice que las solicitudes se envíen al lugar correcto. Incluso después de que se haya lanzado el sitio, las solicitudes de algunas páginas pueden devolver un error 404 si estas rutas no están configuradas. También es crucial asegurarse de que el script del trabajador esté conectado al dominio de prueba. Estos errores se pueden reducir durante el desarrollo utilizando un trabajador bien organizado y validando las rutas.

Hacer que el Trabajador siga conectado a su dominio provisional es otro paso crucial. En ocasiones, es posible que el trabajador no pueda vincularse automáticamente al nuevo entorno durante la implementación, especialmente cuando hay varios entornos (como producción y ensayo). Para vincular manualmente el Trabajador al entorno particular y asegurarse de que procese las solicitudes de manera adecuada, los desarrolladores pueden utilizar el panel de Cloudflare. Para que los entornos de puesta en escena y producción funcionen sin problemas y sin errores, este paso es necesario.