▲ Sessão da Comunidade: Passo a passo do Vercel CDN

VVercel
AI/미래기술창업/스타트업컴퓨터/소프트웨어

Transcript

00:00:00Olá a todos.
00:00:24Bem-vindos à sessão ao vivo da comunidade Vercel desta semana.
00:00:27Eu sou a Amy e hoje estou acompanhada pela Maya.
00:00:31Olá a todos.
00:00:32Nós duas trabalhamos na equipe de comunidade da Vercel.
00:00:35Estamos transmitindo ao vivo no X e no YouTube,
00:00:37mas se quiserem fazer perguntas,
00:00:39certifiquem-se de entrar em [community.vercel.com/live](https://community.vercel.com/live)
00:00:43para participar do chat e garantir que vejamos as perguntas.
00:00:47Com certeza. Se você estiver no nosso chat,
00:00:50apenas um lembrete amigável para ser respeitoso,
00:00:52seguir nosso código de conduta,
00:00:54e nos ajudar a manter este um espaço agradável para todos.
00:00:56A sessão de hoje é toda sobre a CDN da Vercel.
00:01:00Curiosidade: se você está assistindo pela nossa plataforma,
00:01:04ela está usando a CDN da Vercel, o que é bem legal.
00:01:07Então, se você tiver curiosidade sobre isso,
00:01:10Jacob Parris, que é da nossa equipe de engenharia de DX,
00:01:13publicou um ótimo post no blog sobre
00:01:15essa implementação recentemente no site da Vercel.
00:01:19>> Acabei de colocar o link no chat,
00:01:22então se alguém quiser ler, está lá.
00:01:25Além disso, se você tem prestado atenção,
00:01:28lançamos muita coisa no
00:01:30nosso changelog relacionada à CDN da Vercel.
00:01:33Por isso, quisemos trazer o pessoal
00:01:35da equipe aqui para falar mais sobre isso,
00:01:37mostrar como construímos,
00:01:40como usar e todos os recursos disponíveis.
00:01:43Então, bem-vindos ao palco,
00:01:45Mark, Andrew e Yash para falar com vocês sobre isso.
00:01:48Vamos deixar o espaço para vocês, pessoal.
00:01:51>> Obrigado, Amy e Maya.
00:01:55Olá pessoal, meu nome é Mark.
00:01:57Sou engenheiro de software na equipe de CDN,
00:01:59e estou aqui com o Andrew e o Yash.
00:02:03Estou aqui no belo
00:02:06escritório da Vercel em San Francisco; está bem quente esta semana na Califórnia.
00:02:09Hoje, eu queria falar sobre
00:02:12os recursos recentes de CDN em que estamos trabalhando.
00:02:15Estou bem animado para falar sobre eles.
00:02:18Primeiro, queria introduzir um pouco sobre a CDN da Vercel.
00:02:21Vou compartilhar apenas alguns slides que temos sobre isso,
00:02:25e depois passarei a palavra para o Andrew,
00:02:27que começará a demonstração do painel da CDN.
00:02:32Incrível. Só queria explicar um pouco como a CDN da Vercel funciona.
00:02:39Talvez você não saiba, mas cada projeto
00:02:42implantado na Vercel utiliza a nossa CDN.
00:02:44Você ganha isso de graça.
00:02:46Mas pode ser algo oculto que você talvez não saiba como funciona.
00:02:51A CDN da Vercel
00:02:54recebe as requisições do seu cliente,
00:02:56do seu navegador, da sua máquina,
00:02:58e as encaminha para um ponto de presença.
00:03:01Estes pontos de presença estão espalhados por todo o mundo.
00:03:03Temos mais de 125 deles distribuídos geograficamente pelo globo.
00:03:07Então a requisição transita para uma região da Vercel onde terminamos o TLS,
00:03:14e então processamos a requisição.
00:03:16É aqui que fazemos o cache.
00:03:18Também fazemos o roteamento.
00:03:19Se a requisição não for encontrada no cache,
00:03:21podemos encaminhá-la para a região da função onde podemos realizar
00:03:25a regeneração estática incremental servida por uma função e assim por diante.
00:03:29Vou detalhar este diagrama um pouco mais quando falarmos de cache mais tarde.
00:03:33Como parte disso, você tem o ingresso,
00:03:35também tem firewall, roteamento,
00:03:38recursos de gerenciamento de tráfego como proteção de skew,
00:03:40lançamentos graduais, micro front-ends e muito mais.
00:03:44Então, o que há de especial na CDN da Vercel?
00:03:49A CDN da Vercel entende o código do framework nativamente.
00:03:52Isso significa que, ao implantar um projeto na Vercel,
00:03:56o código que você tem,
00:03:57a configuração, é automaticamente traduzida em
00:04:00artefatos que a CDN da Vercel processa nativamente.
00:04:04Na maioria das outras CDNs, você mesmo precisa configurar.
00:04:07Isso já vem pronto se você estiver usando um dos frameworks.
00:04:10Você ganha aceleração de requisições integrada,
00:04:13e a alta disponibilidade que mencionei antes.
00:04:16Você também conta com recursos como ISR,
00:04:19que é a regeneração estática incremental.
00:04:21Isso é nativo para nós,
00:04:23o que significa que você pode regenerar páginas sem precisar reimplantar
00:04:27seu código, apenas enviando
00:04:29uma requisição de API ou webhook para páginas específicas.
00:04:34Além disso, você tem integrações DDoS
00:04:36sem limites e sempre ativas para cada um de seus projetos.
00:04:40Isso é gratuito e lida de forma consistente com ameaças em todas as aplicações,
00:04:46além de vir com firewall de aplicação web configurável e gerenciamento de bots.
00:04:51Nos últimos meses,
00:04:53trabalhamos em vários recursos novos que
00:04:56estão disponíveis no painel da Vercel,
00:05:00e vamos percorrer esses recursos hoje.
00:05:02Esses recursos incluem uma experiência totalmente nova no painel da CDN,
00:05:06a habilidade de definir regras de roteamento no
00:05:09nível do projeto sem precisar de uma nova implantação,
00:05:12uma nova aba de cache,
00:05:13e também a capacidade de definir até um milhão de redirecionamentos.
00:05:18Com isso, vou passar a palavra para o Andrew,
00:05:22que vai mostrar o painel da CDN. Andrew?
00:05:27>> Obrigado, Mark. Valeu.
00:05:29Olá a todos, eu sou o Andrew Gazek.
00:05:31Sou engenheiro de software na equipe de CDN, como podem notar.
00:05:36Estou localizado em New Hampshire.
00:05:38Hoje está fazendo uns 2 graus Celsius e com sol, ainda bem frio.
00:05:45Ansioso por aqueles dias quentes de verão que virão em breve.
00:05:49Hoje, vou compartilhar minha tela,
00:05:53e vou mostrar para vocês um pequeno app de demonstração que
00:05:56construímos para a sessão da comunidade de hoje.
00:05:59Temos este app em Next.js.
00:06:02Ele contém várias rotas para um blog.
00:06:08Podemos ver um painel.
00:06:10Há uma rota de API que retorna dados, etc.
00:06:16Mas não é para isso que estamos aqui.
00:06:18Estamos aqui pelas mudanças no painel.
00:06:22Quando você estiver no painel da Vercel,
00:06:25notará que agora existe uma nova aba "CDN" aqui.
00:06:28Se clicar nela,
00:06:30ela te leva para esta página de visão geral, onde listamos
00:06:35todas as regiões da Vercel que estão atualmente
00:06:39atendendo seu projeto dentro do período especificado.
00:06:45Aqui temos as últimas 12 horas.
00:06:47Podemos ver que o tráfego de San Francisco e
00:06:49Washington está atingindo nosso site.
00:06:52Você pode passar o mouse sobre estes itens para ver mais detalhes.
00:06:55Pode abrir a observabilidade
00:06:58para analisar mais a fundo os dados de tráfego.
00:07:04Uma coisa legal desta página é que você pode ver um mapa 3D,
00:07:08voltar para o mapa 2D,
00:07:10e também ver mais dados de observabilidade aqui,
00:07:17que também linkam de volta para as páginas de observabilidade específicas.
00:07:22Essa é a página de visão geral.
00:07:27Ela serve para te dar um panorama instantâneo
00:07:30do tráfego do seu projeto,
00:07:35bem como mostrar onde suas funções estão localizadas.
00:07:38Dá para ver que a região das funções deste projeto é Washington.
00:07:44A próxima coisa que quero demonstrar são os redirecionamentos.
00:07:48Redirecionamentos em massa, perdoem-me.
00:07:52Ah não, era para isso ter acontecido.
00:08:00Vejamos. Deixe-me tentar um projeto diferente aqui.
00:08:07Ok. Bom, vamos tentar um projeto diferente.
00:08:18Desculpem pelo inconveniente.
00:08:22Temos este projeto de redirecionamentos em massa.
00:08:27Vamos tentar adicionar alguns redirecionamentos a ele.
00:08:30Para criar um redirecionamento,
00:08:35você vem a esta página e clica em "Manual".
00:08:37Agora, digamos que eu queira que /demo vá para,
00:08:44vejamos, /blog/2020,
00:08:51/10/style, algo assim, para garantir.
00:08:57Você clica em "Create", ele cria em segundo plano,
00:09:02e então vai abrir este modelo de revisão de mudanças.
00:09:07No momento, essas mudanças não estão ativas em produção.
00:09:11Elas estão em um ambiente de teste (staging),
00:09:13e você pode testar o novo redirecionamento com isso.
00:09:18Clica aqui, e... essa página simplesmente não existe.
00:09:24Mas enfim, é assim que funciona.
00:09:27Então, se quiser publicar em produção, clique em "Publish".
00:09:30Se quiser manter em staging, clique em "Cancel",
00:09:34e então poderá ver as mudanças de staging onde fizemos aquilo.
00:09:39Se publicarmos isso em produção,
00:09:42essas mudanças seriam aplicadas.
00:09:45Deveríamos vê-las em produção.
00:09:58Agora você pode pesquisar.
00:10:01Pode visualizar seu histórico.
00:10:05Pode comparar as mudanças atuais com as anteriores,
00:10:14e pode restaurar esta versão se quiser.
00:10:17Clique em "Restore", e veremos que o demo não existe mais.
00:10:26Perfeito. Incrível. Vou passar para o Yash para a demonstração dele.
00:10:34>> Obrigado, Andrew. Olá, pessoal.
00:10:38Meu nome é Yash. Sou estagiário de engenharia na equipe de CDN,
00:10:42e também estou baseado na sede de SF da
00:10:55Universidade da Califórnia, San Francisco.
00:10:58Sou estagiário de engenharia na Universidade da Califórnia, San Francisco.
00:11:03Também sou estagiário de engenharia na Universidade da Califórnia, San Francisco.
00:11:08Também sou estagiário de engenharia na Universidade da Califórnia, San Francisco.
00:11:14Também sou estagiário de engenharia na Universidade da Califórnia, San Francisco.
00:11:18Também sou estagiário de engenharia na Universidade da Califórnia, San Francisco.
00:11:23Também sou estagiário de engenharia na Universidade da Califórnia, San Francisco.
00:11:26Também sou estagiário de engenharia na Universidade da Califórnia, San Francisco.
00:11:32Também sou estagiário de engenharia na Universidade da Califórnia, San Francisco.
00:11:37Também sou estagiário de engenharia na Universidade da Califórnia, San Francisco.
00:11:41Também sou estagiário de engenharia na Universidade da Califórnia, San Francisco.
00:11:46Também sou estagiário de engenharia na Universidade da Califórnia, San Francisco.
00:11:50Também sou estagiário de engenharia na Universidade da Califórnia, San Francisco.
00:11:57Também sou estagiário de engenharia na Universidade da Califórnia, San Francisco.
00:12:02Também sou estagiário de engenharia na Universidade da Califórnia, San Francisco.
00:12:07Também sou estagiário de engenharia na Universidade da Califórnia, San Francisco.
00:12:13Também sou estagiário de engenharia na Universidade da Califórnia, San Francisco.
00:12:17Também sou estagiário de engenharia na Universidade da Califórnia, San Francisco.
00:12:22Também sou estagiário de engenharia na Universidade da Califórnia, San Francisco.
00:12:27Também sou estagiário de engenharia na Universidade da Califórnia, San Francisco.
00:12:32Também sou estagiário de engenharia na Universidade da Califórnia, San Francisco.
00:12:37Também sou estagiário de engenharia na Universidade da Califórnia, San Francisco.
00:12:41Também sou estagiário de engenharia na Universidade da Califórnia, San Francisco.
00:12:45Se fôssemos fazer a mesma coisa via código, teríamos que reimplantar nosso projeto.
00:12:49Mas agora isso acontece instantaneamente.
00:12:53Agora vou criar uma segunda rota. Esta será um pouco mais complexa.
00:12:56Em vez de preencher o formulário como fiz da última vez, vou digitar o que desejo aqui.
00:13:00Vamos usar a IA para gerar a rota.
00:13:02Eu tenho um painel e estou fazendo a versão dois, que quero lançar lentamente apenas para usuários beta.
00:13:08Então posso reescrever nosso dashboard para a versão dois do dashboard.
00:13:14Vejamos se o usuário tem um cookie beta definido como verdadeiro.
00:13:21Agora podemos gerar a regra e, em alguns segundos, a IA deve preencher o formulário para nós.
00:13:27Podemos dar uma olhada na regra que criamos. Ela reescreve “dashboard” para “dashboard v2”.
00:13:32Isso significa que o usuário ainda verá “/dashboard” na URL,
00:13:35mas verá o conteúdo novo do novo painel.
00:13:39E há esta condição aqui. Isso significa que a regra de reescrita só será aplicada
00:13:43se o usuário tiver um cookie chamado “beta” que seja igual a “true”.
00:13:46Então, se eles tiverem esse cookie, verão o novo painel; caso contrário, verão o antigo.
00:13:53E, novamente, podemos testar isso muito rapidamente.
00:13:58e atualizarmos, veremos o novo painel, mas nossa URL ainda é “/dashboard” e não “/dashboard/v2”.
00:14:09새로고침을 하면 새로운 대시보드를 볼 수 있지만, URL은 여전히 slash dashboard/v2가 아닌 slash dashboard입니다.
00:14:16Isso porque usamos a reescrita em vez de redirecionamento, e podemos publicar.
00:14:22E agora, a última regra de escrita que quero mostrar está relacionada aos cabeçalhos de cache.
00:14:26Isso é algo que você pode definir para melhorar o desempenho do seu site,
00:14:30e, em particular, quero otimizar nossas imagens estáticas.
00:14:33Posso dizer que queremos otimizar nosso cache para imagens estáticas,
00:14:41definindo o cabeçalho “cache-control” como “public, max-age=31536000, immutable” para nossas imagens.
00:14:52E, novamente, podemos gerar a regra com IA.
00:14:55Agora criamos esta regra que, para todas as imagens, definirá um cache de um ano.
00:14:59Assim, em vez de o navegador acessar seu servidor toda vez para buscar a imagem,
00:15:03ele tentará buscá-la localmente, o que pode melhorar o desempenho e reduzir custos.
00:15:08mas acho que, para ativos estáticos, este é o melhor.
00:15:11하지만 정적 에셋(static assets)의 경우에는 이 방법이 가장 좋다고 생각합니다.
00:15:14Então, você pode criar e publicar a rota novamente.
00:15:19E, como mencionei antes, todas essas rotas também podem ser definidas no código.
00:15:23E temos este modelo aqui onde você pode
00:15:26transformar todas as suas rotas do painel em algo que você pode copiar e colar
00:15:30no “vercel.json” ou “vercel.ts”, o que preferir.
00:15:35O principal benefício de colocá-las no código é seguir as melhores práticas de controle de versão,
00:15:40mas se você fizer alterações aqui, notará que precisará reimplantar seu projeto para que entrem no ar.
00:15:46A outra coisa que quero mostrar é a página de histórico.
00:15:49Isso é semelhante ao que o Andrew demonstrou na página de redirecionamentos em massa.
00:15:52Você pode ver as versões anteriores do que mudou.
00:15:55E digamos que queiramos desfazer nossa mudança mais recente, que foi adicionar a regra de cache.
00:16:00Podemos restaurá-la imediatamente apenas clicando neste botão de restaurar.
00:16:04E agora, quase imediatamente, a regra terá sumido; podemos ver que não está mais aqui.
00:16:09Você também pode pesquisar e filtrar por tipo; se quiser ver todos os seus redirecionamentos, pode fazer isso.
00:16:14E sim, esse é o projeto em que estamos trabalhando.
00:16:16Toda a funcionalidade que demonstrei também está disponível via API, CLI e SDK.
00:16:22Muito obrigado, e agora passo a palavra para o Mark.
00:16:26Legal, muito obrigado Yash, foi muito bacana.
00:16:29Gostei do recurso de linguagem natural.
00:16:31Vou mostrar o último recurso das novas abas de CDN, que é a aba de cache.
00:16:41Assim como o Yash falou sobre definir um cabeçalho de controle de cache,
00:16:46por padrão, na CDN da Vercel, você ganha cache de graça ao usar recursos como
00:16:53Regeneração Estática Incremental (ISR), ou você mesmo pode controlar os cabeçalhos de cache.
00:16:56Aqui na aba de caches, no topo, temos este diagrama de cache.
00:17:04Quero dedicar um tempo para explicar isso, pois, ao contrário de outras CDNs, aqui há
00:17:09múltiplas camadas que ajudam você a otimizar seu site.
00:17:12Se você estiver usando ISR, novamente, este é o diagrama que vimos anteriormente.
00:17:17A requisição entra muito perto do cliente.
00:17:20Ela passa para a região da Vercel mais próxima.
00:17:22Existem 20 regiões em todo o mundo onde ela é comparada com o cache da CDN.
00:17:27Se houver um “miss” aqui, ela pode ir para a sua região de função, onde há outro cache
00:17:33para seu ISR; e se a função precisar ser executada, também há um cache que você pode usar para
00:17:39solicitar dados de seus backends, protegendo-os assim.
00:17:43Existem diferentes tipos de requisições que você pode fazer na Vercel.
00:17:47Por exemplo, se você estiver apenas fazendo uma requisição de API e usando cabeçalhos de controle de cache,
00:17:52clicando na documentação, aqui também se usa o cache da CDN.
00:17:56Ele pula o cache de ISR, mas ainda possui o cache de função e de tempo de execução.
00:18:00E, finalmente, se você estiver reescrevendo na CDN da Vercel para uma origem externa,
00:18:07digamos que esteja fazendo proxy para o backend da Vercel, você obtém o benefício dos recursos da CDN da Vercel,
00:18:14como o cache e o firewall, e então a requisição iria para a origem externa.
00:18:18E isso nos leva à funcionalidade de limpar o cache (purge).
00:18:22Digamos que por algum motivo você queira revalidar o conteúdo.
00:18:26Nesta página, tenho um exemplo com ISR usando um “fetch” com uma tag de cache específica.
00:18:36Aqui, isso é chamado de “fetch data tag”.
00:18:38Você pode ver que isso foi regenerado há cerca de uma hora e está usando a tag de cache “fetch data”.
00:18:45Se eu quiser limpar isso, digamos que eu queira que a página seja regenerada, tenho algumas opções.
00:18:54Aqui posso limpar por tag de cache, então posso inserir a tag “fetch data”.
00:18:58E então posso escolher entre invalidar o conteúdo ou excluir o conteúdo.
00:19:04Invalidar nos permite servir uma página antiga (stale) enquanto essa página está sendo regenerada
00:19:09em segundo plano, por isso é recomendado para usuários, para que você não tenha essa latência
00:19:14na próxima requisição dos usuários.
00:19:16Digamos que eu faça isso, clico em limpar, sim, eu quero limpar.
00:19:21Quando eu atualizo a página, desta vez não mudou, ainda está incrementando.
00:19:27Mas se eu atualizar a página novamente, você pode ver que o tempo resetou, pois foi
00:19:33recém-regenerado.
00:19:34Também posso fazer a mesma coisa ao excluir o conteúdo.
00:19:39Se eu excluir este conteúdo e clicar em limpar, na próxima vez que atualizar esta página, você verá
00:19:45que o tempo é imediatamente resetado.
00:19:48Isso porque foi como uma revalidação bloqueante; a próxima requisição esperou a página regenerar
00:19:53antes de ser servida.
00:19:55Por isso, recomendamos o uso de invalidar quando você quiser atualizar o conteúdo, pois ele pode servir
00:20:00aquele conteúdo antigo enquanto ele é regenerado em segundo plano.
00:20:05Você pode limpar por tag de cache e também pode limpar uma imagem de origem da mesma maneira.
00:20:11Você também pode limpar todo o conteúdo no cache, e pode fazer isso nas duas camadas
00:20:16que discutimos anteriormente: no cache da CDN ou no cache de tempo de execução ou de dados.
00:20:21Isso limpa todo o conteúdo, então é uma exclusão total; a próxima requisição seria
00:20:28bloqueada para atualizar esse conteúdo.
00:20:30Então, isso é tudo o que tínhamos sobre os novos recursos hoje, e vamos abrir para perguntas.
00:20:39Deixem-nos saber o que vocês querem saber.
00:20:43Tudo bem, obrigado.
00:20:44Pessoal, temos algumas perguntas no chat.
00:20:50Vou começar com a primeira.
00:20:51Depois de implantar um app na Vercel, como utilizo a CDN e como vocês cobram por isso?
00:21:10Sim, ótima pergunta.
00:21:11Todo aplicativo Vercel recebe a CDN de graça e isso significa que, quando você implanta seu
00:21:20aplicativo, analisamos automaticamente o conteúdo dele e o otimizamos para ser servido na
00:21:27CDN da Vercel.
00:21:28Se você estiver usando um framework que suporte ISR, mapearemos essa execução de SSG (geração de site estático)
00:21:35e mapearemos esse conteúdo no cache de ISR e no cache da CDN.
00:21:40Portanto, logo de cara, você provavelmente não precisa configurar nada para começar.
00:21:46No entanto, você certamente pode se quiser; por exemplo, se estiver definindo uma requisição de API,
00:21:53pode definir cabeçalhos de controle de cache se quiser personalizar isso ou, como o Yash mostrou,
00:22:00se estiver servindo conteúdo estático de um diretório diferente do padrão, pode definir
00:22:07uma regra de cache para todo esse conteúdo.
00:22:11Para usuários do plano Hobby, isso é fornecido gratuitamente; e para usuários Pro, você recebe uma cota de
00:22:21requisições e largura de banda, e depois disso há taxas dependendo da região que você
00:22:26pode encontrar em nosso site.
00:22:27Segunda pergunta.
00:22:31E se eu já tiver uma CDN na frente do meu aplicativo?
00:22:38Como faço para mudar para a Vercel?
00:22:40Também é uma ótima pergunta.
00:22:44Isso é algo que podemos suportar plenamente.
00:22:47Na maior parte, acho que há dois estágios que você pode seguir para migrar.
00:22:54O primeiro é: se você já usa uma CDN na frente da Vercel, pode simplesmente deixar o
00:22:58conteúdo passar para que a Vercel cuide do cache, do serviço e também
00:23:04das regras de roteamento. E, assim que tiver toda essa configuração na Vercel,
00:23:10tudo o que precisa fazer é alterar seu DNS para apontar para a Vercel, para que as
00:23:15requisições cheguem à Vercel automaticamente.
00:23:18Temos um guia que podemos colocar nos comentários sobre como você pode migrar para o DNS da Vercel
00:23:23sem nenhum tempo de inatividade.
00:23:25Se tiver dúvidas sobre as diferenças de configuração, temos alguns guias em nossa
00:23:33base de conhecimento que ajudam a mapear os diferentes conceitos de cada uma das outras CDNs para os
00:23:37conceitos da Vercel, então podemos fornecer alguns links para isso.
00:23:41Talvez eu passe esta para o Andrew.
00:23:49Como posso analisar o tráfego da minha CDN?
00:23:52Sim, há algumas maneiras.
00:23:55A primeira maneira eu demonstrei anteriormente.
00:24:00Vocês não estão me ouvindo?
00:24:00Sim, ok, obrigado.
00:24:04A primeira maneira que demonstrei antes: você pode olhar na aba de visão geral da CDN, que mostra um instantâneo
00:24:11do tráfego do seu projeto na CDN da Vercel para o período de tempo especificado.
00:24:17Outro lugar onde você pode ir é na página de observabilidade de requisições de borda (edge requests), e você pode detalhar todo
00:24:24o seu tráfego por várias categorias.
00:24:34Sim, e a página de observabilidade na Vercel tem muitos detalhamentos ricos que você
00:24:44pode acessar, então sinta-se à vontade para continuar explorando isso.
00:24:48Outra pergunta que vejo surgir muito é: a CDN lida com ataques DDoS ou que tipo
00:24:57de segurança é adicionada ou está disponível com a CDN?
00:25:04Sim, pergunta fantástica.
00:25:06A Vercel vem com proteções ilimitadas integradas para mitigação de DDoS.
00:25:12O que isso significa é que é gratuito, e as mitigações de DDoS cobrem uma ampla gama de
00:25:19diferentes tipos de ataques contra os quais a Vercel protege você nativamente.
00:25:23Temos um firewall de aplicação web (WAF) e também temos proteções L3, L4 e L7 para que
00:25:32ataques que variam de apenas um pico no número de requisições para um caminho específico até ataques mais sofisticados
00:25:39que alternam endereços IP ou outras informações possam ser detectados para que possamos
00:25:47proteger você.
00:25:48Então sim, com certeza isso já vem incluído em todos os projetos.
00:25:52Você também pode definir regras personalizadas se desejar.
00:25:57Isso está disponível na aba de firewall no painel; essa é uma sessão que também
00:26:02deveríamos fazer com certeza em breve.
00:26:04Lá você pode definir regras ainda mais específicas para sua aplicação se houver algo
00:26:09em particular que você queira bloquear.
00:26:13Segurança é definitivamente um tema importante; daria para fazer uma sessão inteira sobre isso.
00:26:22Sim, eu realmente amo tudo o que vocês estão fazendo para reduzir todo o atrito em
00:26:27todos esses fluxos diferentes.
00:26:29E, na verdade, recebi uma meio aleatória, mas vi no Twitter que houve muito amor pela
00:26:34animação 2D para 3D na página da CDN.
00:26:38Você pode nos mostrar isso e talvez falar um pouco mais sobre?
00:26:42Sim, posso compartilhar minha tela novamente.
00:26:49Vejamos, para quem ainda não viu.
00:26:52Sim, na página de visão geral da CDN, mostramos um mapa 2D e, se você clicar no globo, verá
00:27:00um mapa 3D.
00:27:01Agora ele é bem interativo, você pode girá-lo para qualquer lado que quiser.
00:27:07Você pode passar o mouse e voltar à transição anterior.
00:27:12Então, sim, é isso.
00:27:18Obrigado.
00:27:19Adorei o gráfico e como ele facilita o aprofundamento no lado da observabilidade,
00:27:24onde eu visualizo onde está o tráfego e então posso investigar mais a fundo.
00:27:29Exatamente.
00:27:30Outra pergunta meio relacionada a alguns problemas que vejo as pessoas enfrentarem antes de termos adicionado
00:27:32alguns desses recursos, e também algo que eu mesmo me pergunto, porque ainda não
00:27:43mergulhei em todas as novidades.
00:27:47É tudo tão novo.
00:27:50Quais salvaguardas existem para ajudar a prevenir ou talvez detectar uma configuração incorreta ou,
00:27:51geralmente, a exposição de um serviço interno ou dados sensíveis que você não queira
00:27:58que mais ninguém veja?
00:28:03Sim, com certeza.
00:28:04Existem vários tipos diferentes de proteções para ocultar rotas internas.
00:28:07Por padrão, os projetos têm uma proteção de implantação que permite usar a autenticação da Vercel
00:28:15ou senhas para proteger seu site contra visitantes indesejados, e isso pode proteger toda a implantação.
00:28:23Também é possível usar cookies e bibliotecas de autenticação em rotas específicas
00:28:31para proteger contra isso.
00:28:43Existem também regras de firewall personalizadas que você pode usar se quiser proteger certas rotas.
00:28:46Portanto, há várias opções diferentes.
00:28:54Dentro do painel, você verá muita observabilidade de quais rotas estão sendo servidas.
00:28:56Para cada implantação individual, você também verá um resumo da implantação sobre todas as rotas,
00:29:04para que possa inspecionar informações sobre cada uma dessas rotas e funções que vê.
00:29:10Então, experimente; se tiver qualquer dúvida, ficarei feliz em responder com mais detalhes.
00:29:15Incrível.
00:29:22Certo, vejamos outra que vi surgir, que talvez vocês já tenham tocado
00:29:34mas talvez pudessem detalhar um pouco mais.
00:29:41As rotas de nível de projeto podem ser usadas para rotear o tráfego para APIs externas ou microsserviços?
00:29:43Sim, com certeza.
00:29:51Existe um modelo... talvez o Ash, você queira falar sobre isso, já que tem trabalhado
00:29:55nisso? Claro, eu posso falar.
00:30:04Sim, você definitivamente pode reescrever todas as suas requisições de API para origens externas.
00:30:06Vou compartilhar mais sobre isso nas próximas semanas, mas você pode configurar regras de escrita.
00:30:11Posso até compartilhar minha tela para mostrar.
00:30:15Se eu configurar uma regra de escrita, posso definir, por exemplo, uma reescrita da minha API
00:30:18você pode fazer algo assim para fazer o proxy da sua API para uma origem externa.
00:30:35모든 외부 오리진에 대해서, 예를 들어 https/api-external.com과 같은 경우입니다.
00:30:44Sim, isso é totalmente suportado, e você também pode fazer isso via CLI
00:30:50ou qualquer outro método que preferir.
00:31:00Legal, isso facilita muito quando você está fazendo uma transição parcial. Sei que estamos usando
00:31:04um pouco disso em nosso site da comunidade para podermos construir alguns recursos extras.
00:31:10Assim, nem tudo faz parte do Discourse, mas também não queremos sair completamente do Discourse,
00:31:16certo? Pois ele é a base principal do site da comunidade, e colocamos extras
00:31:21por cima; isso tem sido muito conveniente para nós.
00:31:25Sim, foi definitivamente um grande avanço.
00:31:27Com certeza acho muito útil que você obtenha os benefícios da camada de cache,
00:31:31do firewall e também das regras de roteamento, onde você pode decidir o que fazer com essa sintaxe
00:31:35fácil de usar, mas também ser capaz de usar diferentes backends onde você já tem conteúdo.
00:31:42Incrível, e acho que essas são todas as perguntas do chat, mas eu adoraria perguntar: o que vem a seguir?
00:31:48Podem nos contar algo?
00:31:56Oh, ótima pergunta.
00:32:00Bem, há várias coisas vindo, mas acho que uma das coisas que, você sabe, mencionamos
00:32:02antes e sobre a qual deveríamos falar mais é segurança; fiquem atentos para mais conteúdo sobre segurança em breve.
00:32:09Incrível, obrigado pessoal por se juntarem a nós. Sei que vocês são muito ocupados, vamos deixá-los
00:32:15voltar ao dia de vocês, mas agradecemos muito por dedicarem um tempo para estar aqui.
00:32:22Muito obrigado por nos receberem.
00:32:25Sim, muito obrigado.
00:32:28Obrigado a todos.
00:32:30Certo, isso foi ótimo. O que temos a seguir, Maya?
00:32:30Oh, temos o “sandbox ask me anything” na quinta-feira.
00:32:37Então, fiquem ligados.
00:32:45Também quero divulgar isso, porque há alguns eventos muito empolgantes acontecendo no
00:32:47final de semana para os eventos “Zero to Agent Vercel”. Também temos o “Ship” chegando em junho e, se você
00:32:54ainda não viu, vá para [vercel.com/ship](https://vercel.com/ship) e você pode montar sua própria malinha.
00:33:03A equipe de design realmente arrasou nesta página, então confiram; certifiquem-se de reservar a data
00:33:09para os eventos ao redor do mundo e, sim, temos mais sessões da comunidade chegando, então
00:33:15vocês podem ver todas elas em [community.vercel.com/events](https://www.google.com/search?q=https://community.vercel.com/events).
00:33:21Obrigada a todos, foi ótimo.
00:33:26Tchau!
00:33:28Tchau!

Key Takeaway

A Vercel introduziu uma experiência de gerenciamento de CDN totalmente renovada, focada em observabilidade visual, automação por IA para regras de roteamento e controle granular de cache sem a necessidade de novos deploys.

Highlights

A Vercel CDN oferece integração nativa com frameworks, traduzindo configurações automaticamente em artefatos de borda.

A nova aba CDN no painel inclui um mapa interativo 2D/3D para visualização global de tráfego e localização de funções.

O recurso de redirecionamentos em massa permite gerenciar até um milhão de caminhos com suporte a ambientes de teste (staging) e histórico de versões.

Novas regras de roteamento e cabeçalhos de cache podem ser configurados via interface utilizando linguagem natural processada por IA.

A funcionalidade de 'Purge' permite limpar o cache por tags específicas, oferecendo as opções de 'Invalidate' ou 'Delete'.

Proteção contra ataques DDoS de camadas L3, L4 e L7 está integrada gratuitamente em todos os projetos da plataforma.

É possível realizar o proxy de APIs para origens externas mantendo os benefícios de cache e firewall da infraestrutura Vercel.

Timeline

Introdução e Conceitos Fundamentais da Vercel CDN

Amy e Maya iniciam a sessão comunitária apresentando os engenheiros Mark, Andrew e Yash para discutir as atualizações da CDN. Mark explica que cada projeto na Vercel utiliza a CDN automaticamente através de mais de 125 pontos de presença globais. O diferencial da rede é o entendimento nativo do código do framework, o que dispensa configurações manuais complexas comuns em outras CDNs. O sistema suporta recursos avançados como Regeneração Estática Incremental (ISR) e proteção DDoS sempre ativa. Esta seção estabelece a base técnica sobre como a requisição transita do cliente até a região da função.

Exploração do Novo Painel de Observabilidade

Andrew Gazek demonstra a nova aba dedicada à CDN no painel da Vercel, destacando a transparência sobre a origem do tráfego. Ele apresenta um mapa interativo que alterna entre visualizações 2D e 3D, permitindo identificar quais regiões globais estão atendendo o projeto. Os usuários podem observar dados de tráfego em tempo real e acessar métricas de observabilidade detalhadas com um clique. A interface também revela a localização exata das funções do projeto, como a região de Washington no exemplo citado. Esta ferramenta visa facilitar a depuração e o entendimento da distribuição geográfica da carga de trabalho.

Gerenciamento de Redirecionamentos em Massa e Staging

Nesta parte da demonstração, Andrew foca na funcionalidade de redirecionamentos em massa, que agora suporta até um milhão de entradas. Ele ilustra o fluxo de trabalho criando um redirecionamento manual que passa por um ambiente de staging antes de ir para produção. Os usuários podem testar as mudanças em uma URL de pré-visualização para garantir que o comportamento está correto. O sistema mantém um histórico completo, permitindo comparar versões atuais com anteriores e realizar restaurações rápidas (rollback). Essa flexibilidade é crucial para grandes migrações de sites ou ajustes rápidos em rotas de marketing.

Regras de Roteamento Inteligentes e Uso de IA

Yash apresenta o poder das novas regras de roteamento no nível do projeto, que evitam a necessidade de novos deploys de código. Ele demonstra como usar linguagem natural para pedir que a IA gere regras complexas, como uma reescrita condicional baseada em cookies para usuários beta. Além do roteamento, Yash mostra a configuração de cabeçalhos de 'cache-control' para otimizar o desempenho de ativos estáticos como imagens. Todas as alterações feitas na interface podem ser exportadas para o arquivo 'vercel.json' se o desenvolvedor preferir o controle via código. O recurso de histórico também está presente aqui, permitindo desfazer mudanças de cache quase instantaneamente.

Arquitetura de Cache e Estratégias de Purge

Mark detalha as múltiplas camadas de cache da Vercel, incluindo a borda (Edge), o cache de ISR e o cache de tempo de execução. Ele explica a importância de entender como as requisições de API e origens externas interagem com essas camadas para proteção do backend. A funcionalidade de limpeza de cache (purge) é demonstrada através do uso de tags de dados, permitindo revalidações específicas. Mark enfatiza a diferença entre 'Invalidate', que serve conteúdo antigo enquanto regenera, e 'Delete', que bloqueia até a atualização. Estas ferramentas oferecem aos desenvolvedores um controle fino sobre a frescura do conteúdo entregue ao usuário final.

Sessão de Perguntas: Cobrança, Migração e Segurança

A sessão encerra com uma rodada de perguntas da comunidade cobrindo tópicos vitais como custos e segurança. Mark esclarece que a CDN é gratuita para planos Hobby e incluída com cotas específicas para usuários Pro. Sobre migrações, a equipe recomenda apontar o DNS para a Vercel para aproveitar as mitigações de DDoS e o firewall integrado (WAF). Andrew reforça que a plataforma protege nativamente contra ataques sofisticados em diversas camadas de rede. Por fim, os palestrantes mencionam futuras atualizações focadas em segurança e convidam todos para o evento 'Vercel Ship' em junho. A transmissão termina com um convite para os próximos eventos da comunidade e sessões de 'Ask Me Anything'.

Community Posts

View all posts