A Cloudflare Workers 404-es hibájának megoldása a sikeres telepítés után

Átállási környezeti problémák hibaelhárítása Cloudflare dolgozókkal

A fejlesztési folyamat lényeges szakasza egy átmeneti környezet beállítása, hogy a frissítéseket megfelelően lehessen tesztelni az éles indítás előtt. Ebben az esetben a Cloudflare Workers jól működött a fejlesztés alatt álló elsődleges webhely.

Miután klónozta a meglévő Git-tárat, és a Cloudflare Workers & Pages szolgáltatáson keresztül csatlakoztatta az átmeneti környezethez, úgy tűnt, hogy minden rendben működik. A naplók azt jelezték, hogy a telepítés sikeres volt, ami általában egy élő példány létrehozását jelzi.

Ám amikor a fejlesztő megpróbált hozzáférni a megadott Cloudflare-címhez, egy 404-es hibaüzenet jelent meg, így nem tudta, mi történt. Bosszantó lehet az ilyen jellegű problémák kezelése, különösen akkor, ha úgy gondoljuk, hogy a kiszolgálónak azonnal élesnek kell lennie a telepítés után.

Nem világos, hogy szükség van-e egy második szerverre, vagy van-e valami más, amit tenni kell az új tároló teljes aktiválásához. Ebben a cikkben megvizsgáljuk ennek a 404-es problémának az okait, és megvizsgáljuk, hogyan kell megfelelően beállítani a Cloudflare Workers-kiszolgálót az átmeneti környezethez.

Hogyan kezelik a Cloudflare dolgozói és a szkriptek a 404-es hibákat

Az adott példa első szkriptje a használat módját mutatja be JavaScript hogy kezelje a 404-es hibát a frontenden. A szkript a window.onload eseményt, hogy megvárja az oldal teljes betöltődését. Az oldal teszi a elhozni kérni, hogy az erőforrás elérhető-e a betöltés után. A felhasználó egy testreszabott hibaoldalra kerül, ha az erőforrás 404-es hibát ad vissza. Mivel nincs szükség a háttérrendszer bevonására, ez a technika különösen hasznos a hibák közvetlenül a felhasználó böngészőjében történő kezelésében, valamint a hiányzó oldalak vagy erőforrások tartalékának biztosítására.

A második példában a szkript a kéréseket a segítségével kezeli Cloudflare munkás ahogy a háttérbe kerül. A dolgozó a addEventListener metódus az események figyelésére és a lekérési kérések elfogására, amikor azok megtörténtek. Abban az esetben, ha a kért oldal nem létezése miatt 404-es hiba történik, a dolgozó dinamikusan testreszabott hibaoldalt biztosít. Ez a stratégia jól működik a kiszolgálói válaszok kezelésében, és alkalmazkodóbb és biztonságosabb módot kínál a hibák kezelésére, különösen akkor, ha különféle kontextusokkal, például termelési és állomásozási vagy dinamikus tartalommal dolgozik.

Annak biztosítása érdekében, hogy a frontend és a háttérszkriptek megfelelően legyenek telepítve és megfelelően működjenek, a harmadik példában az egységtesztelés kerül bevezetésre. Automatikus teszteket végez annak megállapítására, hogy a Cloudflare Pages telepítése a megfelelő HTTP-állapotkódokat adja-e vissza Node.js és egy tesztelési keretrendszer, például a Mocha. A főoldal tesztjei (amelyek 200-as állapotot feltételeznek) és egy nem létező oldal tesztjei (amelyek 404-es állapotot várnak) egyaránt szerepelnek a tesztcsomagban. Ezek a tesztek biztosítják, hogy minden a tervnek megfelelően legyen telepítve, és minden meghibásodott oldal vagy hivatkozás megfelelő választ adjon.

Továbbá a tesztek használata állítja parancsok garantálják, hogy a válaszállapotkódok eltéréseit azonnal észleljük. A folyamatos integrációs és üzembe helyezési (CI/CD) folyamatokban, ahol a telepítési viselkedés biztosítása kulcsfontosságú az állásidő vagy a megszakadt kapcsolatok megelőzése érdekében, a tesztek nélkülözhetetlenek. Mindent figyelembe véve a frontend átirányítás, a háttér hibakezelés és az egységtesztelés egyesítése alapos megközelítést kínál a Cloudflare Workers telepítésének zökkenőmentes működésének garantálásához – még hiányzó erőforrások vagy testreszabott feltételek, például állomásozószerver esetén is.

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

A Cloudflare Workers állomásozó környezetének megértése

Fejlesztési célból az átmeneti környezet telepítése döntő fontosságú lehet, amikor dolgozik Cloudflare dolgozók. A fejlesztők tesztelhetik alkalmazásaikat átmeneti környezetben, mielőtt üzembe helyeznék őket az éles kiszolgálón. Az olyan problémák megelőzése érdekében, mint például a 404-es hiba, ezt a környezetet megfelelően kell konfigurálni az első beállításkor. A fejlesztők gyakran úgy gondolják, hogy egy élő szerver elindításához csak klónozni kell egy GitHub-tárat, és csatlakoztatni kell a Cloudflare Pageshez. Bár a Cloudflare automatikusan telepíti a statikus webhelyeket, problémák léphetnek fel, ha a dolgozó útválasztási konfigurációja nincs megfelelően beállítva.

A 404-es hiba gyakran azt jelenti, hogy a kérést a Munkás. Egyéni útválasztási szabályokra van szükség a Cloudflare Workers számára annak biztosításához, hogy a kéréseket a megfelelő helyre küldjék. Még a webhely elindítása után is előfordulhat, hogy egyes oldalakra vonatkozó kérések 404-es hibát adnak vissza, ha ezek az útvonalak nincsenek beállítva. Ugyancsak kulcsfontosságú annak biztosítása, hogy a Worker script csatlakozzon az átmeneti tartományhoz. Ezek a hibák a fejlesztés során csökkenthetők egy jól szervezett Worker igénybevételével és az útvonalak érvényesítésével.

Annak biztosítása, hogy a munkavállaló továbbra is csatlakozzon az Önhöz színpadi tartomány egy másik döntő lépés. Előfordulhat, hogy a Dolgozó időnként nem kötődik automatikusan az új környezethez az üzembe helyezés során, különösen akkor, ha több környezet is létezik (például termelési és staging). A fejlesztők a Cloudflare irányítópultját használhatják a Worker és az adott környezet manuális összekapcsolásához, valamint a kérések megfelelő feldolgozásához. Ez a lépés szükséges ahhoz, hogy a staging és termelési környezet zökkenőmentesen és hibamentesen működjön.