Résolution de l'erreur 404 de Cloudflare Workers après un déploiement réussi

Dépannage des problèmes d'environnement de préparation avec Cloudflare Workers

Une étape essentielle du processus de développement consiste à mettre en place un environnement de test afin que les mises à jour puissent être correctement testées avant d'être mises en ligne. Dans ce cas, Cloudflare Workers veillait au bon fonctionnement du site Web principal en cours de développement.

Après avoir cloné le référentiel Git existant et l'avoir connecté à l'environnement de test via Cloudflare Workers & Pages, tout semblait bien fonctionner. Les journaux indiquaient que le déploiement avait réussi, ce qui signalait généralement la création d'une instance active.

Mais lorsque le développeur a tenté d'accéder à l'adresse Cloudflare donnée, un message d'erreur 404 est apparu, le laissant incertain de ce qui n'allait pas. Il peut être ennuyeux de traiter des problèmes de cette nature, en particulier lorsque l'on pense que le serveur doit être opérationnel immédiatement après son déploiement.

On ne sait pas si un deuxième serveur est nécessaire ou s'il y a autre chose à faire pour activer complètement le nouveau référentiel. Nous examinerons les causes de ce problème 404 et comment configurer correctement le serveur Cloudflare Workers pour l'environnement de test dans cet article.

Comment les travailleurs et les scripts Cloudflare gèrent les erreurs 404

Le premier script de l'exemple donné montre comment utiliser Javascript pour gérer une erreur 404 sur le frontend. Le script utilise le fenêtre.onload événement pour attendre que la page soit complètement chargée. La page fait un aller chercher demande de voir si la ressource est disponible une fois chargée. L'utilisateur est envoyé vers une page d'erreur personnalisée si la ressource renvoie une erreur 404. Ne nécessitant aucune implication du backend, cette technique est particulièrement utile pour gérer les échecs directement dans le navigateur de l'utilisateur et fournir une solution de secours pour les pages ou ressources manquantes.

Dans le deuxième exemple, le script gère les requêtes à l'aide d'un Travailleur Cloudflare à mesure qu'il se déplace vers le backend. Le travailleur utilise le addEventListener méthode pour écouter les événements et intercepter les demandes de récupération lorsqu'elles sont effectuées. Dans le cas où une erreur 404 se produit en raison de l'absence de la page demandée, le travailleur fournira dynamiquement une page d'erreur personnalisée. Cette stratégie fonctionne bien pour gérer les réponses du serveur et offre un moyen plus adaptable et plus sûr de gérer les erreurs, en particulier lorsque vous travaillez avec divers contextes tels que la production et la préparation ou le contenu dynamique.

Afin de garantir que les scripts frontend et backend sont déployés et fonctionnent correctement, les tests unitaires sont introduits dans le troisième exemple. Il effectue des tests automatisés pour voir si le déploiement Cloudflare Pages renvoie les codes d'état HTTP corrects à l'aide de Noeud.js et un framework de test tel que Mocha. Les tests pour la page principale (qui supposent un statut 200) et les tests pour une page inexistante (qui attendent un statut 404) sont tous deux inclus dans la suite de tests. Ces tests garantissent que tout est déployé comme prévu et que toute page ou lien rompu entraîne la réponse appropriée.

De plus, l'utilisation de affirmer Les commandes garantissent que toute différence dans les codes d’état de réponse est détectée immédiatement. Dans les pipelines d'intégration et de déploiement continus (CI/CD), où garantir le comportement de déploiement est crucial pour éviter les temps d'arrêt ou les ruptures de connexions, les tests sont indispensables. Tout bien considéré, la fusion de la redirection front-end, de la gestion des erreurs back-end et des tests unitaires offre une approche approfondie pour garantir le fonctionnement transparent de votre déploiement Cloudflare Workers, même face à des ressources absentes ou à des conditions personnalisées telles qu'un serveur intermédiaire.

// 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);
  });
});

Comprendre l'environnement de transfert de Cloudflare Workers

À des fins de développement, l'installation d'un environnement de test peut s'avérer cruciale lorsque vous travaillez avec Travailleurs Cloudflare. Les développeurs peuvent tester leurs applications dans un environnement intermédiaire avant de les déployer sur le serveur de production. Pour éviter des problèmes tels que l'erreur 404 indiquée, cet environnement doit être configuré correctement lors de sa première configuration. Les développeurs pensent souvent qu'il suffit de cloner un référentiel GitHub et de le connecter aux pages Cloudflare pour lancer un serveur actif. Bien que Cloudflare déploie automatiquement des sites statiques, si la configuration de routage du travailleur n'est pas correctement configurée, des problèmes peuvent survenir.

Une erreur 404 signifie souvent que la requête n'est pas correctement interceptée par le Travailleur. Des règles de routage personnalisées sont nécessaires pour que Cloudflare Workers puisse garantir que les demandes sont envoyées au bon endroit. Même après le lancement du site, les requêtes sur certaines pages peuvent renvoyer une erreur 404 si ces routes ne sont pas configurées. Il est également crucial de s'assurer que le script Worker est connecté au domaine intermédiaire. Ces erreurs peuvent être réduites pendant le développement en utilisant un travailleur bien organisé et en validant les itinéraires.

Faire en sorte que le Worker soit toujours connecté à votre domaine intermédiaire est une autre étape cruciale. Il peut arriver que Worker ne parvienne pas à se lier automatiquement au nouvel environnement lors du déploiement, en particulier lorsqu'il existe plusieurs environnements (tels que la production et le staging). Pour lier manuellement le Worker à un environnement particulier et s'assurer qu'il traite les demandes de manière appropriée, les développeurs peuvent utiliser le tableau de bord de Cloudflare. Pour que les environnements de préparation et de production fonctionnent correctement et sans erreur, cette étape est nécessaire.