Resolució de problemes de l'entorn de prova amb els treballadors de Cloudflare
Una etapa essencial en el procés de desenvolupament és configurar un entorn de preparació perquè les actualitzacions es puguin provar correctament abans de posar-se en marxa. En aquest cas, els treballadors de Cloudflare mantenien el lloc web principal en desenvolupament funcionant bé.
Després de clonar el dipòsit de Git existent i connectar-lo a l'entorn de prova mitjançant Cloudflare Workers & Pages, semblava que tot funcionava bé. Els registres indicaven que el desplegament va tenir èxit, cosa que normalment indicaria la creació d'una instància en directe.
Però quan el desenvolupador va intentar accedir a l'adreça de Cloudflare donada, va aparèixer un missatge d'error 404, que el va deixar sense saber què va fallar. Pot ser molest tractar problemes d'aquesta naturalesa, sobretot quan es creu que el servidor hauria d'estar en funcionament immediatament després del desplegament.
No està clar si es necessita un segon servidor o si cal fer alguna cosa més per activar completament el nou repositori. En aquest article analitzarem les causes d'aquest problema 404 i com configurar correctament el servidor de Cloudflare Workers per a l'entorn de prova.
| Comandament | Exemple d'ús |
|---|---|
| window.onload | Aquest esdeveniment de JavaScript s'activa quan tot el contingut de la pàgina, inclosos els fulls d'estil, les imatges i els recursos externs, s'ha carregat completament. Garanteix que només un cop preparada la pàgina comença la comprovació de la redirecció. |
| fetch() | Una API per als navegadors actuals que s'utilitza per sol·licitar xarxes. En aquest cas, utilitza Cloudflare per verificar si hi ha disponible un URL o un recurs. En cas que la sol·licitud no tingui èxit o retorni un error 404, es poden iniciar altres passos. |
| response.status | El codi d'estat HTTP que ha retornat la sol·licitud d'obtenció es pot examinar mitjançant aquest atribut. En el nostre exemple, determina si la resposta és 404 (recurs no trobat) i, si és així, inicia una redirecció personalitzada. |
| addEventListener('fetch') | Cada vegada que el treballador respon a una sol·licitud de xarxa, aquest mètode vigila els esdeveniments de recuperació. El podem utilitzar per gestionar problemes dins de Cloudflare Workers o interceptar aquestes sol·licituds i retornar respostes personalitzades. |
| new Response() | Genera un nou objecte de resposta HTTP que conté capçaleres, un cos personalitzat i un codi d'estat personalitzat. Quan no es pot localitzar un recurs, s'utilitza per proporcionar respostes dinàmiques, com ara lliurar una pàgina 404 personalitzada. |
| assert.equal() | Aquest mètode del mòdul d'assert Node.js compara dos valors per a la igualtat. Per assegurar-vos que el codi d'estat previst (200, 404) coincideix amb la resposta real de Cloudflare Pages, s'utilitza sovint a les proves unitàries. |
| describe() | Aquest mètode del mòdul d'assert Node.js compara dos valors per a la igualtat. Per assegurar-vos que el codi d'estat previst (200, 404) coincideix amb la resposta real de Cloudflare Pages, s'utilitza sovint a les proves unitàries. |
| event.respondWith() | S'utilitza a Cloudflare Workers per substituir una resposta personalitzada per la gestió de recuperació predeterminada. Us permet modificar la forma en què es gestionen les sol·licituds, cosa que és útil per detectar problemes 404 i oferir informació personalitzada. |
| async function | En definir una funció asíncrona, aquesta paraula clau permet gestionar les promeses amb await. En aquest cas, s'assegura que l'script s'atura en realitzar qualsevol lògica addicional fins que la sol·licitud de xarxa s'hagi resolt. |
Com els treballadors i els scripts de Cloudflare gestionen els errors 404
El primer script de l'exemple donat mostra com utilitzar-lo JavaScript per gestionar un error 404 a la interfície. El guió utilitza el finestra.carrega esdeveniment per esperar que la pàgina es carregui completament. La pàgina fa a buscar sol·licitar per veure si el recurs està disponible un cop s'ha carregat. L'usuari s'envia a una pàgina d'error personalitzada si el recurs retorna un error 404. Sense necessitat de la implicació del backend, aquesta tècnica és especialment útil per gestionar els errors directament al navegador de l'usuari i proporcionar una alternativa per a les pàgines o recursos que falten.
En el segon exemple, l'script gestiona les sol·licituds mitjançant a Treballador de Cloudflare a mesura que es mou al fons. El treballador utilitza el addEventListener mètode per escoltar els esdeveniments i les sol·licituds d'obtenció d'intercepcions quan es fan. En el cas que es produeixi un error 404 perquè la pàgina sol·licitada no existeix, el treballador proporcionarà de forma dinàmica una pàgina d'error personalitzada. Aquesta estratègia funciona bé per gestionar les respostes del servidor i ofereix una manera més adaptable i segura de gestionar els errors, especialment quan es treballa amb diversos contextos com ara la producció i la posada en escena o el contingut dinàmic.
Per tal d'assegurar que els scripts d'interfície i de backend es despleguen i funcionin correctament, al tercer exemple s'introdueix la prova d'unitat. Fa proves automatitzades per veure si el desplegament de Cloudflare Pages retorna els codis d'estat HTTP correctes mitjançant Node.js i un marc de proves com Mocha. Les proves per a la pàgina principal (que assumeixen un estat 200) i les proves per a una pàgina inexistent (que esperen un estat 404) s'inclouen a la suite de proves. Aquestes proves asseguren que tot es desplega segons el pla i que les pàgines o enllaços trencats donen lloc a la resposta adequada.
A més, l'ús de les proves afirmar ordres garanteix que qualsevol diferència en els codis d'estat de resposta es detecti immediatament. En les canonades d'integració i desplegament contínues (CI/CD), on garantir el comportament del desplegament és crucial per evitar temps d'inactivitat o connexions trencades, les proves són indispensables. Tot plegat, la combinació de la redirecció d'interfície, la gestió d'errors de backend i les proves d'unitat ofereixen un enfocament exhaustiu per garantir el funcionament perfecte del vostre desplegament de Cloudflare Workers, fins i tot davant l'absència de recursos o condicions personalitzades, com ara un servidor de prova.
Solució 1: resolució de l'error 404 de Cloudflare mitjançant la redirecció de JavaScript de front-end
En enviar el visitant a una pàgina alternativa en cas que el recurs sol·licitat no es pugui recuperar, aquest mètode utilitza JavaScript per gestionar la redirecció i evitar un error 404.
// Frontend JavaScript for handling redirection// This script checks if a resource is available on the Cloudflare page// If not, it redirects to a fallback pagewindow.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});};
Solució 2: el treballador de Cloudflare de backend per gestionar els errors 404
En aquesta solució, els errors 404 s'envien a una pàgina de reserva personalitzada i les sol·licituds són gestionades pels treballadors de Cloudflare. Per al maneig dinàmic del backend de Cloudflare, aquest script és perfecte.
// Cloudflare Worker script for managing 404 errors// The script checks if the requested path exists, and if not, returns a custom 404 pageaddEventListener('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 });}}
Solució 3: comprovació del desplegament i proves d'unitat per a pàgines de Cloudflare
Aquest mètode inclou proves unitàries per verificar el funcionament dels scripts d'interfície i de backend, i verifica si el desplegament de Cloudflare Pages està actiu.
// Example unit test for deployment verification// Using JavaScript to ensure that Cloudflare Pages return the correct responseconst 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);});});
Entendre l'entorn de preparació dels treballadors de Cloudflare
A efectes de desenvolupament, la instal·lació d'un entorn de prova pot ser crucial quan es treballa Treballadors de Cloudflare. Els desenvolupadors poden provar les seves aplicacions en un entorn de prova abans de desplegar-les al servidor de producció. Per evitar problemes com l'error 404 indicat, aquest entorn s'ha de configurar correctament quan es configura per primera vegada. Els desenvolupadors sovint creuen que tot el que cal per llançar un servidor en directe és clonar un dipòsit de GitHub i connectar-lo a Cloudflare Pages. Tot i que Cloudflare desplega automàticament llocs estàtics, si la configuració d'encaminament del treballador no està configurada correctament, es poden produir problemes.
Un error 404 sovint significa que la sol·licitud no està sent interceptada correctament Treballador. Les regles d'encaminament personalitzades són necessàries perquè els treballadors de Cloudflare garanteixin que les sol·licituds s'enviïn al lloc correcte. Fins i tot després que el lloc s'hagi llançat, les sol·licituds d'algunes pàgines poden retornar un error 404 si aquestes rutes no estan configurades. També és crucial assegurar-se que l'script Worker està connectat al domini de prova. Aquests errors es poden reduir durant el desenvolupament utilitzant un treballador ben organitzat i validant les rutes.
Fer que el Treballador encara estigui connectat al teu domini de posada en escena és un altre pas crucial. De tant en tant, el treballador pot no vincular-se automàticament al nou entorn durant el desplegament, especialment quan hi ha diversos entorns (com ara la producció i la preparació). Per enllaçar manualment el treballador a l'entorn concret i assegurar-se que processa les sol·licituds de manera adequada, els desenvolupadors poden utilitzar el tauler de control de Cloudflare. Perquè els entorns d'escenificació i producció funcionin sense problemes i sense errors, aquest pas és necessari.
Preguntes habituals sobre els treballadors de Cloudflare i els errors 404
- Què causa un error 404 després de desplegar un treballador de Cloudflare?
- Les regles d'encaminament no estan configurades o s'adjunten incorrectament Worker al domini són les causes habituals d'això.
- Pages.dev requereix un servidor per funcionar?
- No, no és necessari un servidor. Tot i que el desplegament de llocs estàtics es gestiona automàticament per Cloudflare pages.dev, assegureu-vos que el treballador estigui enllaçat correctament.
- Com puc resoldre l'error 404 d'un domini de prova?
- Assegureu-vos que l'script Worker tingui configurades les rutes necessàries i que el Worker està associat al domini.
- És possible utilitzar un dipòsit de GitHub per a la producció i la posada en escena simultàniament?
- Sí, però per evitar conflictes, haureu de crear branques diferents i configurar-les Workers per a cada entorn de manera independent.
- Els treballadors aborden de manera diferent la posada en escena i la producció?
- No, però per evitar problemes amb el desplegament, assegureu-vos que tots environment té el seu treballador configurat correctament.
Punts clau per a la configuració dels treballadors de Cloudflare
Cal una connexió adequada al domini i una configuració acurada de les regles d'encaminament per garantir el bon funcionament de Cloudflare Workers. Per evitar errors 404, aquestes accions són essencials tant per a la configuració de producció com per a la configuració.
Per garantir una posada en escena correcta, confirmeu sempre que el treballador estigui connectat correctament a l'entorn adequat i comproveu la vostra configuració de desplegament. En abordar aquests problemes, es reduirà el temps d'inactivitat i es garantirà un desplegament perfecte.
Fonts i referències per a la configuració de Cloudflare Workers
- Explica l'ús de Cloudflare Workers per al desplegament d'aplicacions sense servidor i els passos habituals de resolució de problemes per als errors 404. Recuperat de Documentació dels treballadors de Cloudflare .
- Proporciona informació sobre els entorns de prova i com gestionar els desplegaments mitjançant Cloudflare Pages. Més detalls disponibles a Visió general de les pàgines de Cloudflare .
- Es parla de la connexió dels repositoris de GitHub a Cloudflare Workers i l'impacte en l'encaminament dinàmic. Referència extreta de GitHub - Cloudflare Repos .