O que significa CDN? Os engenheiros front-end devem dominar o conhecimento sobre redes de distribuição de conteúdo.

No mundo atual da Internet, os utilizadores têm exigências quase exigentes em relação à velocidade de carregamento de sites e aplicações. Como engenheiros front-end, otimizamos o código, comprimimos recursos e utilizamos carregamento preguiçoso, mas muitas vezes deparamo-nos com um gargalo: independentemente de como otimizamos, o atraso persiste quando os utilizadores acedem aos nossos servidores a partir de localizações geográficas distantes. Neste caso, é necessário um “acelerador” poderoso - a Rede de Distribuição de Conteúdos, também conhecida como CDN.

Em suma, uma CDN é uma rede de servidores espalhados por todo o mundo. A ideia principal é armazenar em cache os seus recursos estáticos (como imagens, CSS, JavaScript, fontes, vídeos, etc.) em servidores mais próximos dos utilizadores. Quando os utilizadores solicitam o seu site, a CDN encaminha os pedidos de forma inteligente para o servidor mais próximo e com maior capacidade de resposta, reduzindo significativamente a distância de transmissão de dados e melhorando a velocidade de carregamento.

O princípio central de funcionamento da CDN

Para entender como uma CDN funciona, podemos compará-la com uma arquitetura de rede tradicional.

Leitura recomendada Compreender profundamente a CDN: os princípios tecnológicos fundamentais e as aplicações práticas da aceleração da distribuição de conteúdo de websites.。

O caminho das solicitações de rede tradicionais.

Sem uma CDN, os utilizadores acedem a um website localizado num centro de dados na costa oeste dos Estados Unidos. Se o utilizador estiver em Pequim, na China, o seu pedido terá de atravessar o Pacífico, passar por vários roteadores de rede e, finalmente, chegar ao servidor de origem. Após o servidor processar o pedido, os ficheiros e dados da página web são enviados de volta para Pequim. Este longo processo de ida e volta (Round-Trip Time, RTT) pode causar atrasos significativos, especialmente em caso de congestionamento da rede ou de instabilidade das ligações transoceânicas.

\nCDN do bunny.net

Os pagamentos mensais começam em apenas US$ 1, com taxas claras e não ocultas. Os recursos incluem cache permanente, monitoramento em tempo real, proteção contra DDoS e certificados SSL gratuitos, otimizados para streaming de vídeo, além de um modelo de faturamento flexível por uso.

Não é necessário cartão de crédito, teste gratuito de 14 dias

Visite a CDN do bunny.net →

Cloudways Cloudflare Enterprise

O plano de preços Enterprise CDN/WAF da Cloudflare é de US$ 4,99/mês por domínio para até 5 domínios, incluindo 100 GB de tráfego, e US$ 0,02/GB para qualquer valor além desse.

100 GB de tráfego gratuito por domínio

Acesso ao Cloudflare Enterprise da Cloudways →

O caminho da solicitação após a introdução da CDN.

Quando o site acede à CDN, a situação é completamente diferente. Os recursos estáticos do site são distribuídos previamente (ou armazenados em cache, conforme necessário) para os nós periféricos do fornecedor de CDN em todo o mundo. Quando um utilizador de Pequim visita o site novamente:
1. O pedido do utilizador é primeiro enviado para o sistema de despacho inteligente da CDN (geralmente baseado na resolução de DNS).
2. O sistema de despacho determina, com base no endereço IP do utilizador, que este é de Pequim e atribui-lhe um nó periférico localizado em Pequim ou Xangai.
3. O pedido do utilizador é direcionado para o nó periférico mais próximo.
4. Se o recurso necessário pelo utilizador já estiver armazenado em cache no nó, será devolvido diretamente ao utilizador, concluindo um “acesso à cache de borda”.
5. Se não houver cache no nó (ou seja, uma “falta de acesso”), o nó irá obter os recursos do nó superior ou diretamente do servidor de origem, armazená-los em cache localmente e depois devolvê-los ao utilizador, servindo também os pedidos subsequentes.

Este processo reduz a transmissão de dados de milhares de quilómetros para apenas algumas dezenas ou centenas de quilómetros, resultando num aumento imediato da velocidade.

Por que os engenheiros front-end devem dominar o conhecimento de CDN?

A CDN não é apenas uma área para engenheiros de operações ou de back-end. Como engenheiro front-end que lida diretamente com a experiência do utilizador e o desempenho do website, compreender a CDN em profundidade pode ser uma grande vantagem na otimização do desempenho.

Melhorar os indicadores de desempenho principais.

A velocidade do site afeta diretamente a experiência do utilizador e os indicadores de negócio (como a taxa de conversão e a taxa de abandono). A CDN otimiza diretamente indicadores-chave de desempenho, como o primeiro desenho de conteúdo, o último desenho de conteúdo e o atraso na primeira entrada, ao reduzir a latência. Os engenheiros front-end precisam saber como utilizar a CDN para alcançar estes objetivos de desempenho.

Leitura recomendada O que é uma CDN? Uma análise abrangente da tecnologia de Rede de Distribuição de Conteúdo, desde os seus princípios até as suas aplicações.。

Otimizar a estratégia de publicação e armazenamento em cache de recursos.

A estratégia de cache de recursos front-end (por exemplo, através deCache-ControlA configuração do cabeçalho é fundamental para determinar a eficiência da CDN. Se o tempo de cache for muito curto, os nós da CDN irão recorrer à origem com frequência, perdendo o objetivo de aceleração; se for muito longo, os utilizadores não conseguirão obter as atualizações atempadamente. Os engenheiros de front-end precisam de definir estratégias de cache precisas com base no tipo de recurso (ficheiros de biblioteca, código de negócio, imagens) e compreender como utilizar as impressões digitais dos ficheiros (Hash) para equilibrar o “cache permanente” e as atualizações em tempo real.

Implementar uma gestão eficiente de recursos estáticos.

As práticas modernas de engenharia front-end enfatizam a construção de produtos (bundles) e a hospedagem de recursos estáticos em CDNs. Isso não só alivia a pressão no servidor de origem, como também permite que os recursos sejam distribuídos de forma eficiente por meio de carregamento paralelo e protocolos modernos, como o HTTP/2. Os engenheiros front-end precisam saber como configurar as ferramentas de construção, carregar os recursos corretamente no CDN e gerar referências aos recursos com o domínio do CDN.

Garantir a alta disponibilidade e segurança do site.

A CDN fornece uma camada de segurança adicional. Ela pode resistir a ataques de negação de serviço distribuídos de certa escala, pois o tráfego é distribuído por vários nós periféricos. Ao mesmo tempo, a maioria dos serviços de CDN oferece suporte a HTTPS, anti-phishing, WAF (Web Application Firewall) e outras funcionalidades. Os engenheiros de front-end devem incluir as capacidades da CDN no planejamento da arquitetura de segurança do site.

Como colaborar com a CDN na prática do front-end.

Colocar o conhecimento de CDN em prática é uma importante demonstração do valor dos engenheiros front-end.

Classificação de recursos e definição de estratégias de cache.

Este é o passo mais importante. Você precisa classificar os recursos do projeto:
- Recursos que quase nunca mudam: como bibliotecas de terceiros (React, Vue, Lodash). Use URLs com números de versão ou impressões digitais de arquivos e configure o cache para até um ano.max-age=31536000Isso garante que o navegador do usuário e os nós CDN o armazenem em cache por um longo período de tempo.
- Recursos atualizados periodicamente: como o Bundle de código de negócios que você criou. Da mesma forma, use as impressões digitais dos arquivos para configurar o cache de longo prazo. Quando o código é atualizado, a impressão digital do nome do arquivo muda, o que equivale a um novo recurso, desencadeando naturalmente o novo cache do CDN e do navegador.
- Recursos que mudam com frequência: como as imagens de perfil dos utilizadores e as interfaces de dados em tempo real. Devem ser definidos tempos de cache mais curtos (por exemplo, <1 minuto).max-age=300ou não armazenar em cache, garantindo a atualidade das informações.

Integrar o processo de construção e implantação

No processo de CI/CD, os ficheiros estáticos compilados são carregados automaticamente na CDN ou no armazenamento de objetos (como o AWS S3 ou o Alibaba Cloud OSS) e a tabela de mapeamento de recursos é atualizada automaticamente. Certifique-se de que o ficheiro de entrada HTML faz referência correta ao endereço do recurso mais recente na CDN.

Leitura recomendada Explicação detalhada da tecnologia CDN: do princípio da aceleração à implantação de nós globais e ao guia de seleção。

Monitorização e análise de desempenho

Utilize as ferramentas relevantes para monitorizar a taxa de sucesso, a taxa de recurso à origem, o tráfego e a largura de banda da CDN. Monitorize os dados de desempenho reais dos utilizadores em diferentes regiões geográficas para avaliar o efeito da CDN e como base para ajustar a estratégia dos nós ou as regras de cache.

\nLidar com o problema de invalidade do cache.

Quando é necessário limpar proativamente os recursos antigos armazenados em cache no CDN (por exemplo, uma correção de emergência, mas a impressão digital não foi alterada), é necessário saber como usar a função de “atualização de cache” fornecida pelo provedor de CDN. Compreender a diferença e o custo entre a “atualização de URL” e a “atualização de diretório”, e elaborar planos de emergência adequados.

Os principais fornecedores de CDN e os critérios de seleção

Existem muitos fornecedores de CDN no mercado, desde gigantes globais a prestadores de serviços regionais, cada um com as suas próprias especialidades.

Prestadores de serviços globais

Tais como Cloudflare, Akamai, Fastly, Amazon CloudFront, etc. Eles têm uma ampla cobertura de nós e funcionalidades poderosas (como a computação de borda Worker da Cloudflare e uma rede distribuída segura), sendo adequados para produtos destinados a utilizadores em todo o mundo. Possuem um ecossistema tecnológico rico e documentação completa.

Fornecedores regionais/locais de serviços

Como a Alibaba Cloud CDN, a Tencent Cloud CDN e a NetEase Technology, etc. Estas têm nós e recursos de largura de banda mais densos na China continental e concluíram o registo ICP no Ministério da Indústria e Tecnologia da Informação, o que garante a velocidade de acesso e a conformidade para os utilizadores domésticos. Para negócios cujos principais utilizadores se encontram na China, estas são, geralmente, uma escolha obrigatória.

Os fatores-chave na hora de escolher

Ao escolher, o front-end e a equipa devem considerar o seguinte: se a cobertura dos nós corresponde à área do utilizador-alvo, se os protocolos como HTTP/2 e HTTP/3 são suportados, se o HTTPS é gratuito e fácil de usar, se a API é completa para integração automática, se a consola é intuitiva, se o modelo de preços (por tráfego ou largura de banda) se adequa ao modelo de negócio e a capacidade de resposta do suporte técnico.

resumos

A CDN é um elemento fundamental da arquitetura moderna da Web, que otimiza o desempenho, estendendo-o de um único servidor para uma rede global de pontos de presença. Para os engenheiros de front-end, dominar a CDN vai muito além de saber como alterar o nome de domínio de um recurso. Isso implica compreender profundamente os mecanismos de cache, dominar as estratégias de publicação de recursos e integrar as capacidades da CDN nos processos de engenharia de front-end e nos sistemas de gestão de desempenho. Ao utilizar a CDN de forma eficaz, os engenheiros de front-end podem melhorar direta e significativamente a experiência de acesso dos utilizadores em todo o mundo, criando aplicações web mais rápidas, estáveis e fiáveis. Nos dias de hoje, em que o desempenho é sinónimo de experiência do utilizador, este conhecimento deixou de ser um “extra” para se tornar um requisito indispensável para os engenheiros de front-end.

Perguntas frequentes Perguntas frequentes

Todos os websites têm de utilizar uma CDN?

Isso não é absoluto. Pequenos blogs pessoais, sistemas de gestão internos ou sites com uma comunidade de utilizadores altamente concentrada numa única região podem não necessitar de uma CDN. No entanto, para qualquer site ou aplicação web comercial com requisitos de desempenho, utilizadores distribuídos por várias localizações ou que necessite de lidar com flutuações de tráfego, os benefícios de velocidade, alívio de carga e reforço de segurança proporcionados por uma CDN são geralmente muito superiores aos seus custos.

O CDN só consegue acelerar recursos estáticos?

Tradicionalmente, as CDN são usadas principalmente para acelerar o conteúdo estático. No entanto, com o desenvolvimento da computação de borda e das tecnologias de borda, a capacidade das CDN modernas foi ampliada significativamente. Agora, elas podem executar funções de borda (como o Cloudflare Workers e o AWS Lambda@Edge), processar solicitações de API, realizar testes A/B, personalizar conteúdo e até executar lógicas leves de renderização do servidor, otimizando assim o conteúdo dinâmico também.

Se utilizar uma CDN, o servidor de origem não será necessário?

É absolutamente necessário. O servidor de origem é a “única fonte verdadeira” do conteúdo. Os nós periféricos da CDN são apenas cópias em cache. Quando o cache não é atingido, o cache expira ou quando se depara com um pedido dinâmico que não pode ser colocado em cache, o pedido acaba por voltar para o servidor de origem para obter o conteúdo mais recente ou correto. A estabilidade, a segurança e a configuração de regras de cache adequadas do servidor de origem são pré-requisitos para que a CDN funcione de forma eficiente.

Como resolver o problema de os utilizadores não conseguirem ver o conteúdo atualizado devido à cache do CDN?

Isso precisa ser resolvido através de uma boa estratégia de “quebra de cache”. A melhor prática é: adicionar um valor de hash baseado no conteúdo (impressão digital do ficheiro) aos nomes de todos os recursos estáticos que podem ser armazenados em cache (como JS, CSS, imagens). Quando o conteúdo do ficheiro muda, o seu valor de hash muda e o nome do ficheiro também muda. Para os ficheiros HTML de entrada, é normalmente configurado para não serem armazenados em cache ou para serem armazenados em cache por um período muito curto, de forma a garantir que os utilizadores tenham sempre acesso ao HTML que faz referência aos nomes de ficheiros mais recentes. Desta forma, garante-se que os utilizadores obtenham as atualizações sem dificuldades, ao mesmo tempo que desfrutam dos benefícios do armazenamento em cache a longo prazo.

Os recursos de terceiros já estão alojados na CDN. Ainda precisamos de os processar?

Sim, é necessário prestar atenção. Por exemplo, ao utilizar recursos públicos de CDN, como o Google Fonts e o Bootstrap CDN, deve ter consciência de que estes dependem da disponibilidade de serviços externos e podem implicar questões de privacidade do utilizador e de conformidade com os dados. Num ambiente de produção, uma prática mais segura consiste em “internalizar” os recursos de bibliotecas de terceiros essenciais, ou seja, descarregá-los para o seu projeto e distribuí-los através da sua própria CDN, de forma a controlar totalmente a sua disponibilidade e desempenho.