Resolvendo o erro 404 dos trabalhadores da Cloudflare após implantação bem-sucedida

Solução de problemas de ambiente de teste com trabalhadores da Cloudflare

Uma etapa essencial no processo de desenvolvimento é configurar um ambiente de teste para que as atualizações possam ser testadas adequadamente antes de serem lançadas. Nesse caso, os funcionários da Cloudflare mantinham o site principal em desenvolvimento funcionando bem.

Depois de clonar o repositório Git existente e conectá-lo ao ambiente de teste por meio do Cloudflare Workers & Pages, tudo pareceu funcionar bem. Os logs indicaram que a implantação foi bem-sucedida, o que normalmente sinalizaria a criação de uma instância ativa.

Mas quando o desenvolvedor tentou acessar o endereço Cloudflare fornecido, uma mensagem de erro 404 apareceu, deixando-o sem saber o que havia de errado. Pode ser irritante lidar com questões dessa natureza, especialmente quando se acredita que o servidor deve estar ativo imediatamente após a implantação.

Não está claro se um segundo servidor é necessário ou se há algo mais que precisa ser feito para ativar completamente o novo repositório. Veremos as causas desse problema 404 e como configurar o servidor Cloudflare Workers corretamente para o ambiente de teste neste artigo.

Comando	Exemplo de uso
window.onload	Este evento JavaScript é acionado quando todo o conteúdo da página, incluindo folhas de estilo, imagens e recursos externos, é completamente carregado. Garante que somente depois que a página estiver preparada é que a verificação de redirecionamento começa.
fetch()	Uma API para navegadores atuais usada para solicitar redes. Neste caso, ele usa Cloudflare para verificar se uma URL ou recurso está disponível. Caso a solicitação não seja bem-sucedida ou retorne um erro 404, outras etapas poderão ser iniciadas.
response.status	O código de status HTTP retornado pela solicitação de busca pode ser examinado usando esse atributo. No nosso exemplo, ele determina se a resposta é 404 (recurso não encontrado) e, caso positivo, inicia um redirecionamento personalizado.
addEventListener('fetch')	Cada vez que o trabalhador responde a uma solicitação de rede, esse método observa eventos de busca. Podemos usá-lo para gerenciar problemas no Cloudflare Workers ou interceptar essas solicitações e retornar respostas personalizadas.
new Response()	Gera um novo objeto de resposta HTTP contendo cabeçalhos, um corpo personalizado e um código de status personalizado. Quando um recurso não pode ser localizado, ele é usado para fornecer respostas dinâmicas, como a entrega de uma página 404 personalizada.
assert.equal()	Este método do módulo assert do Node.js compara dois valores quanto à igualdade. Para garantir que o código de status pretendido (200, 404) corresponda à resposta real das páginas Cloudflare, ele é frequentemente usado em testes de unidade.
describe()	Este método do módulo assert do Node.js compara dois valores quanto à igualdade. Para garantir que o código de status pretendido (200, 404) corresponda à resposta real das páginas Cloudflare, ele é frequentemente usado em testes de unidade.
event.respondWith()	Usado em Cloudflare Workers para substituir uma resposta personalizada para o tratamento de busca padrão. Ele permite modificar a forma como as solicitações são tratadas, o que é útil para detectar problemas 404 e fornecer informações personalizadas.
async function	Ao definir uma função assíncrona, esta palavra-chave permite o tratamento de promessas com espera. Nesse caso, ele garante que o script adie a execução de qualquer lógica adicional até que a solicitação de rede seja resolvida.

Como os trabalhadores e scripts da Cloudflare lidam com erros 404

O primeiro script no exemplo dado mostra como usar para lidar com um erro 404 no frontend. O script usa o evento para aguardar o carregamento completo da página. A página faz um solicitação para ver se o recurso está disponível depois de carregado. O usuário será enviado para uma página de erro personalizada se o recurso retornar um erro 404. Sem necessidade de envolvimento de back-end, essa técnica é particularmente útil para gerenciar falhas diretamente no navegador do usuário e fornecer um substituto para páginas ou recursos ausentes.

No segundo exemplo, o script gerencia solicitações usando um conforme ele se move para o back-end. O trabalhador usa o método para escutar eventos e interceptar solicitações de busca quando elas são feitas. Caso ocorra um erro 404 devido à inexistência da página solicitada, o trabalhador fornecerá dinamicamente uma página de erro personalizada. Essa estratégia funciona bem para gerenciar respostas do servidor e oferece uma maneira mais adaptável e segura de lidar com erros, principalmente ao trabalhar com vários contextos, como produção e preparação ou conteúdo dinâmico.

Para garantir que os scripts de front-end e back-end sejam implantados e funcionem corretamente, o teste de unidade é introduzido no terceiro exemplo. Ele faz testes automatizados para verificar se a implantação do Cloudflare Pages retorna os códigos de status HTTP corretos usando e uma estrutura de teste como o Mocha. Testes para a página principal (que assumem um status 200) e testes para uma página inexistente (que esperam um status 404) estão incluídos no conjunto de testes. Esses testes garantem que tudo seja implantado de acordo com o planejado e que quaisquer páginas ou links quebrados resultem na resposta apropriada.

Além disso, o uso de testes comandos garante que quaisquer diferenças nos códigos de status de resposta sejam detectadas imediatamente. Em pipelines de integração e implantação contínua (CI/CD), onde garantir o comportamento de implantação é crucial para evitar tempo de inatividade ou conexões quebradas, os testes são indispensáveis. Considerando tudo isso, o amálgama de redirecionamento de front-end, tratamento de erros de back-end e testes de unidade oferece uma abordagem completa para garantir a operação perfeita de sua implantação do Cloudflare Workers, mesmo diante de recursos ausentes ou condições personalizadas, como um servidor de teste.

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

Compreendendo o ambiente de teste dos trabalhadores da Cloudflare

Para fins de desenvolvimento, a instalação de um ambiente de teste pode ser crucial ao trabalhar com . Os desenvolvedores podem testar seus aplicativos em um ambiente de teste antes de implantá-los no servidor de produção. Para evitar problemas como o erro 404 indicado, este ambiente deve ser configurado corretamente na primeira configuração. Os desenvolvedores frequentemente acreditam que para lançar um servidor ativo basta clonar um repositório GitHub e conectá-lo ao Cloudflare Pages. Embora a Cloudflare implante automaticamente sites estáticos, se a configuração de roteamento do trabalhador não estiver definida corretamente, poderão ocorrer problemas.

Um erro 404 geralmente significa que a solicitação não está sendo interceptada corretamente pelo . Regras de roteamento personalizadas são necessárias para que os trabalhadores da Cloudflare garantam que as solicitações sejam enviadas ao lugar certo. Mesmo após o lançamento do site, as solicitações de algumas páginas podem retornar um erro 404 se essas rotas não estiverem configuradas. Garantir que o script Worker esteja conectado ao domínio de teste também é crucial. Esses erros podem ser reduzidos durante o desenvolvimento utilizando um Worker bem organizado e validando as rotas.

Fazendo com que o Worker ainda esteja conectado ao seu é outro passo crucial. Ocasionalmente, o Worker pode falhar ao vincular-se automaticamente ao novo ambiente durante a implantação, especialmente quando há vários ambientes (como produção e teste). Para vincular manualmente o Worker ao ambiente específico e garantir que ele processe as solicitações de maneira adequada, os desenvolvedores podem utilizar o painel da Cloudflare. Para que os ambientes de preparação e produção funcionem sem problemas e sem erros, esta etapa é necessária.

1. O que causa um erro 404 após a implantação de um Cloudflare Worker?
2. Regras de roteamento não configuradas ou anexadas incorretamente para o domínio são as causas comuns disso.
3. O pages.dev requer um servidor para funcionar?
4. Não, um servidor não é necessário. Embora a implantação de sites estáticos seja feita automaticamente pela Cloudflare , certifique-se de que o Worker esteja vinculado corretamente.
5. Como posso resolver o erro 404 de um domínio temporário?
6. Certifique-se de que o script Worker tenha as rotas necessárias configuradas e que o está associado ao domínio.
7. É possível usar um repositório GitHub para produção e teste simultaneamente?
8. Sim, mas para evitar conflitos, você precisará criar ramificações e configurações distintas para cada ambiente de forma independente.
9. Os trabalhadores abordam a preparação e a produção de maneira diferente?
10. Não, mas para evitar problemas com a implantação, certifique-se de que cada tem seu Worker configurado corretamente.

A anexação apropriada ao domínio e a configuração cuidadosa das regras de roteamento são necessárias para garantir a operação adequada dos Cloudflare Workers. Para evitar erros 404, essas ações são essenciais tanto para configurações de produção quanto de preparação.

Para garantir uma preparação bem-sucedida, sempre confirme se o Worker está conectado corretamente ao ambiente apropriado e verifique as configurações de implantação. Ao resolver esses problemas, o tempo de inatividade será reduzido e uma implementação perfeita será garantida.