Rezolvarea erorii Cloudflare Workers 404 după implementarea cu succes

Depanarea problemelor legate de mediul de pregătire cu lucrătorii Cloudflare

O etapă esențială a procesului de dezvoltare este crearea unui mediu de pregătire, astfel încât actualizările să poată fi testate corect înainte de a fi puse în funcțiune. În acest caz, lucrătorii Cloudflare mențin site-ul web principal în curs de dezvoltare funcționând bine.

După clonarea depozitului Git existent și conectarea acestuia la mediul de pregătire prin Cloudflare Workers & Pages, totul părea să funcționeze bine. Jurnalele au indicat că implementarea a avut succes, ceea ce ar semnala de obicei crearea unei instanțe live.

Dar când dezvoltatorul a încercat să acceseze adresa Cloudflare dată, a apărut un mesaj de eroare 404, lăsându-l nesigur de ce a mers prost. Poate fi enervant să se ocupe de probleme de această natură, în special atunci când există convingerea că serverul ar trebui să fie activ imediat după implementare.

Nu este clar dacă este necesar un al doilea server sau dacă mai trebuie făcut ceva pentru a activa complet noul depozit. În acest articol vom analiza cauzele acestei probleme 404 și cum să configurați corect serverul Cloudflare Workers pentru mediul de pregătire.

Cum lucrează și scripturile Cloudflare gestionează erorile 404

Primul script din exemplul dat arată cum se utilizează JavaScript pentru a gestiona o eroare 404 pe front-end. Scriptul folosește fereastră.încărcare eveniment pentru a aștepta încărcarea completă a paginii. Pagina face a aduce cerere pentru a vedea dacă resursa este disponibilă odată ce s-a încărcat. Utilizatorul este trimis la o pagină de eroare personalizată dacă resursa returnează o eroare 404. Fără a fi nevoie de implicarea backend, această tehnică este deosebit de utilă pentru gestionarea eșecurilor chiar în browserul utilizatorului și pentru a oferi o rezervă pentru orice pagini sau resurse lipsă.

În cel de-al doilea exemplu, scriptul gestionează solicitările folosind a Lucrător Cloudflare pe măsură ce se deplasează spre backend. Lucrătorul folosește addEventListener metoda de a asculta evenimentele și interceptările solicitări de preluare atunci când sunt făcute. În cazul în care apare o eroare 404 din cauza ca pagina solicitată nu există, lucrătorul va furniza în mod dinamic o pagină de eroare personalizată. Această strategie funcționează bine pentru gestionarea răspunsurilor de pe server și oferă o modalitate mai adaptabilă și mai sigură de a gestiona erorile, în special atunci când lucrați cu diverse contexte, cum ar fi producția și punerea în scenă sau conținutul dinamic.

Pentru a ne asigura că scripturile frontend și backend sunt implementate și funcționează corect, testarea unitară este introdusă în al treilea exemplu. Face teste automate pentru a vedea dacă implementarea Cloudflare Pages returnează codurile corecte de stare HTTP folosind Node.js și un cadru de testare precum Mocha. Testele pentru pagina principală (care presupun un statut 200) și teste pentru o pagină inexistentă (care așteaptă un statut 404) sunt ambele incluse în suita de teste. Aceste teste se asigură că totul este implementat conform planului și că orice pagini sau linkuri întrerupte au ca rezultat răspunsul adecvat.

În plus, utilizarea testelor a afirma comenzile garantează că orice diferență în codurile de stare de răspuns sunt detectate imediat. În conductele de integrare și implementare continuă (CI/CD), unde asigurarea comportamentului de implementare este esențială pentru prevenirea timpului de nefuncționare sau a conexiunilor întrerupte, testele sunt indispensabile. Toate lucrurile luate în considerare, amalgamarea redirecționării frontend, gestionarea erorilor de backend și testarea unitară oferă o abordare amănunțită pentru a garanta funcționarea perfectă a implementării Cloudflare Workers - chiar și în fața resurselor absente sau a condițiilor personalizate, cum ar fi un server de 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);
  });
});

Înțelegerea mediului de pregătire a lucrătorilor Cloudflare

În scopuri de dezvoltare, instalarea unui mediu de pregătire poate fi crucială atunci când lucrați cu Lucrătorii Cloudflare. Dezvoltatorii își pot testa aplicațiile într-un mediu de pregătire înainte de a le implementa pe serverul de producție. Pentru a preveni probleme precum eroarea 404 indicată, acest mediu trebuie configurat corect atunci când este configurat pentru prima dată. Dezvoltatorii cred adesea că tot ce este nevoie pentru a lansa un server live este să cloneze un depozit GitHub și să îl conecteze la Cloudflare Pages. Deși Cloudflare implementează automat site-uri statice, dacă configurația de rutare a lucrătorului nu este configurată corect, pot apărea probleme.

O eroare 404 înseamnă adesea că cererea nu este interceptată corect de către Lucrător. Regulile de rutare personalizate sunt necesare pentru lucrătorii Cloudflare pentru a garanta că cererile sunt trimise la locul potrivit. Chiar și după ce site-ul a fost lansat, solicitările pentru unele pagini pot returna o eroare 404 dacă aceste rute nu sunt configurate. Este, de asemenea, crucial să vă asigurați că scriptul Worker este conectat la domeniul intermediar. Aceste greșeli pot fi reduse în timpul dezvoltării prin utilizarea unui lucrător bine organizat și validarea rutelor.

Făcând ca Lucrătorul să fie încă conectat la dvs domeniul de punere în scenă este un alt pas crucial. Lucrătorul poate ocazional să nu reușească să se lege automat de noul mediu în timpul implementării, în special atunci când există mai multe medii (cum ar fi producția și etapa). Pentru a conecta manual lucrătorul la mediul specific și pentru a se asigura că procesează cererile în mod corespunzător, dezvoltatorii pot utiliza tabloul de bord Cloudflare. Pentru ca mediile de procesare și producție să funcționeze fără probleme și fără erori, acest pas este necesar.