Risoluzione dell'errore 404 di Cloudflare Workers dopo una distribuzione riuscita

Risoluzione dei problemi relativi all'ambiente di staging con i lavoratori Cloudflare

Una fase essenziale del processo di sviluppo è la configurazione di un ambiente di staging in modo che gli aggiornamenti possano essere adeguatamente testati prima di essere pubblicati. In questo caso, i lavoratori di Cloudflare stavano mantenendo il sito Web principale in fase di sviluppo funzionando bene.

Dopo aver clonato il repository Git esistente e averlo collegato all'ambiente di staging tramite Cloudflare Workers & Pages, tutto sembrava funzionare bene. I log indicavano che la distribuzione aveva avuto successo, il che in genere segnalava la creazione di un'istanza live.

Ma quando lo sviluppatore ha provato ad accedere all’indirizzo Cloudflare indicato, è apparso un messaggio di errore 404, lasciandolo incerto su cosa fosse andato storto. Può essere fastidioso affrontare problemi di questo tipo, in particolare quando si ritiene che il server debba essere attivo immediatamente dopo la distribuzione.

Non è chiaro se sia necessario un secondo server o se sia necessario fare qualcos'altro per attivare completamente il nuovo repository. In questo articolo esamineremo le cause di questo problema 404 e come configurare correttamente il server Cloudflare Workers per l'ambiente di staging.

Come i workler e gli script Cloudflare gestiscono gli errori 404

Il primo script nell'esempio fornito mostra come utilizzare JavaScript per gestire un errore 404 sul frontend. Lo script utilizza il file finestra.onload evento per attendere il caricamento completo della pagina. La pagina fa a andare a prendere richiesta per vedere se la risorsa è disponibile una volta caricata. L'utente viene inviato a una pagina di errore personalizzata se la risorsa restituisce un errore 404. Senza bisogno di coinvolgimento del backend, questa tecnica è particolarmente utile per gestire gli errori direttamente nel browser dell'utente e fornire un fallback per eventuali pagine o risorse mancanti.

Nel secondo esempio, lo script gestisce le richieste utilizzando a Lavoratore di Cloudflare mentre si sposta nel backend. Il lavoratore utilizza il addEventListener metodo per ascoltare gli eventi e intercettare le richieste di recupero quando vengono effettuate. Nel caso in cui si verifichi un errore 404 a causa dell'inesistenza della pagina richiesta, il lavoratore fornirà dinamicamente una pagina di errore personalizzata. Questa strategia funziona bene per la gestione delle risposte del server e offre un modo più adattabile e sicuro per gestire gli errori, in particolare quando si lavora con vari contesti come produzione e gestione temporanea o contenuto dinamico.

Per garantire che gli script frontend e backend siano distribuiti e funzionino correttamente, nel terzo esempio viene introdotto il test unitario. Esegue test automatizzati per verificare se la distribuzione di Cloudflare Pages restituisce i codici di stato HTTP corretti utilizzando Node.js e un framework di test come Mocha. I test per la pagina principale (che presuppone uno stato 200) e i test per una pagina inesistente (che presuppone uno stato 404) sono entrambi inclusi nella suite di test. Questi test assicurano che tutto venga distribuito secondo i piani e che eventuali pagine o collegamenti interrotti forniscano la risposta appropriata.

Inoltre, l'utilizzo dei test di affermare i comandi garantiscono che eventuali differenze nei codici di stato della risposta vengano rilevate immediatamente. Nelle pipeline di integrazione e distribuzione continua (CI/CD), dove garantire il comportamento di distribuzione è fondamentale per prevenire tempi di inattività o interruzioni delle connessioni, i test sono indispensabili. Tutto sommato, la fusione di reindirizzamento del frontend, gestione degli errori del backend e test unitari offre un approccio completo per garantire il funzionamento senza interruzioni della distribuzione di Cloudflare Workers, anche in presenza di risorse assenti o di condizioni personalizzate come un server di staging.

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

Comprendere l'ambiente di staging dei lavoratori Cloudflare

Ai fini dello sviluppo, l'installazione di un ambiente di staging può essere fondamentale quando si lavora con Lavoratori di Cloudflare. Gli sviluppatori possono testare le proprie applicazioni in un ambiente di prova prima di distribuirle sul server di produzione. Per evitare problemi come l'errore 404 indicato, questo ambiente deve essere configurato correttamente al momento della prima installazione. Gli sviluppatori spesso credono che tutto ciò che serve per avviare un server live sia clonare un repository GitHub e collegarlo a Cloudflare Pages. Sebbene Cloudflare distribuisca automaticamente siti statici, se la configurazione di routing del lavoratore non è impostata correttamente, potrebbero verificarsi dei problemi.

Un errore 404 spesso significa che la richiesta non viene intercettata correttamente dal Lavoratore. Le regole di routing personalizzate sono necessarie affinché i lavoratori Cloudflare garantiscano che le richieste vengano inviate al posto giusto. Anche dopo il lancio del sito, le richieste per alcune pagine potrebbero restituire un errore 404 se questi percorsi non sono impostati. È inoltre fondamentale garantire che lo script Worker sia connesso al dominio di staging. Questi errori possono essere ridotti durante lo sviluppo utilizzando un lavoratore ben organizzato e convalidando i percorsi.

Facendo in modo che il Worker sia ancora connesso al tuo dominio di stadiazione è un altro passo cruciale. Il lavoratore può occasionalmente non riuscire ad associarsi automaticamente al nuovo ambiente durante la distribuzione, in particolare quando sono presenti diversi ambienti (come produzione e gestione temporanea). Per collegare manualmente il Worker al particolare ambiente e assicurarsi che elabori le richieste in modo appropriato, gli sviluppatori possono utilizzare la dashboard di Cloudflare. Affinché gli ambienti di gestione temporanea e di produzione funzionino senza problemi e senza errori, questo passaggio è necessario.