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.

Como os trabalhadores e scripts da Cloudflare lidam com erros 404

O primeiro script no exemplo dado mostra como usar JavaScript para lidar com um erro 404 no frontend. O script usa o janela.onload evento para aguardar o carregamento completo da página. A página faz um buscar 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 Trabalhador Cloudflare conforme ele se move para o back-end. O trabalhador usa o addEventListener 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 Node.js 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 afirmar 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 Trabalhadores da Cloudflare. 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 Trabalhador. 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 domínio de teste é 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.