Lösning av Cloudflare Workers 404-fel efter framgångsrik implementering

Felsökning av iscensättningsmiljöproblem med Cloudflare-arbetare

Ett viktigt steg i utvecklingsprocessen är att skapa en uppsättningsmiljö så att uppdateringar kan testas ordentligt innan de går live. I det här fallet höll Cloudflare Workers den primära webbplatsen under utveckling fungera väl.

Efter att ha klonat det befintliga Git-förrådet och kopplat det till iscensättningsmiljön genom Cloudflare Workers & Pages, verkade allt fungera bra. Loggarna indikerade att distributionen lyckades, vilket vanligtvis skulle signalera skapandet av en live-instans.

Men när utvecklaren försökte komma åt den givna Cloudflare-adressen dök ett 404-felmeddelande upp, vilket gjorde honom osäker på vad som gick fel. Det kan vara irriterande att ta itu med sådana här problem, särskilt när det finns en uppfattning om att servern ska vara live direkt vid driftsättning.

Det är oklart om en andra server behövs eller om det finns något annat som behöver göras för att helt aktivera det nya förvaret. Vi kommer att titta på orsakerna till detta 404-problem och hur du ställer in Cloudflare Workers-servern korrekt för iscensättningsmiljön i den här artikeln.

Hur Cloudflare-arbetare och -skript hanterar 404-fel

Det första skriptet i det givna exemplet visar hur man använder JavaScript för att hantera ett 404-fel på frontend. Skriptet använder window.onload händelse för att vänta på att sidan laddas helt. Sidan gör en hämta begäran för att se om resursen är tillgänglig när den väl har laddats. Användaren skickas till en anpassad felsida om resursen returnerar ett 404-fel. Utan behov av backend-inblandning är den här tekniken särskilt användbar för att hantera fel direkt i användarens webbläsare och ge en reserv för eventuella saknade sidor eller resurser.

I det andra exemplet hanterar skriptet förfrågningar med hjälp av en Cloudflare-arbetare när den flyttar till backend. Arbetaren använder addEventListener metod för att lyssna efter händelser och fångar upp hämta förfrågningar när de görs. I händelse av att ett 404-fel uppstår på grund av att den begärda sidan inte existerar, kommer arbetaren dynamiskt att tillhandahålla en anpassad felsida. Denna strategi fungerar bra för att hantera serversvar och erbjuder ett mer anpassningsbart och säkert sätt att hantera fel, särskilt när man arbetar med olika sammanhang som produktion och iscensättning eller dynamiskt innehåll.

För att säkerställa att frontend- och backend-skript distribueras och fungerar korrekt, introduceras enhetstestning i det tredje exemplet. Den gör automatiska tester för att se om Cloudflare Pages-distributionen returnerar rätt HTTP-statuskoder med hjälp av Node.js och ett testramverk som Mocha. Tester för huvudsidan (som antar statusen 200) och tester för en obefintlig sida (som förväntar sig en 404-status) ingår båda i testsviten. Dessa tester säkerställer att allt distribueras enligt plan och att eventuella trasiga sidor eller länkar resulterar i rätt svar.

Vidare testernas användning av hävda kommandon garanterar att eventuella skillnader i svarsstatuskoderna upptäcks direkt. I pipelines för kontinuerlig integration och driftsättning (CI/CD), där det är avgörande att säkerställa driftuppförandet för att förhindra driftstopp eller brutna anslutningar, är testerna oumbärliga. Sammantaget erbjuder sammanslagningen av frontend-omdirigering, backend-felhantering och enhetstestning ett grundligt tillvägagångssätt för att garantera sömlös drift av din Cloudflare Workers-distribution – även inför frånvarande resurser eller anpassade förhållanden som en iscensättningsserver.

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

Förstå Cloudflare Workers Staging Environment

För utvecklingsändamål kan installationen av en iscensättningsmiljö vara avgörande när man arbetar med Cloudflare-arbetare. Utvecklare kan testa sina applikationer i en iscensättningsmiljö innan de distribueras till produktionsservern. För att förhindra problem som det indikerade 404-felet måste den här miljön konfigureras korrekt när den konfigureras första gången. Utvecklare tror ofta att allt som krävs för att starta en liveserver är att klona ett GitHub-förråd och ansluta det till Cloudflare Pages. Även om Cloudflare automatiskt distribuerar statiska webbplatser, kan problem uppstå om arbetarens routingkonfiguration inte är korrekt inställd.

Ett 404-fel innebär ofta att begäran inte fångas upp ordentligt av Arbetstagare. Anpassade routingregler är nödvändiga för Cloudflare Workers för att garantera att förfrågningar skickas till rätt plats. Även efter att webbplatsen har lanserats kan förfrågningar för vissa sidor returnera ett 404-fel om dessa rutter inte är inställda. Det är också viktigt att se till att Worker-skriptet är anslutet till staging-domänen. Dessa misstag kan minskas under utvecklingen genom att använda en välorganiserad arbetare och validera rutterna.

Gör att Worker fortfarande är ansluten till din iscensättningsdomän är ett annat avgörande steg. Arbetaren kan ibland misslyckas med att automatiskt binda sig till den nya miljön under driftsättning, särskilt när det finns flera miljöer (som produktion och iscensättning). För att manuellt länka Worker till den specifika miljön och se till att den behandlar förfrågningar på rätt sätt, kan utvecklare använda Cloudflares instrumentpanel. För att iscensättnings- och produktionsmiljöerna ska fungera smidigt och felfritt är detta steg nödvändigt.