▲ Sesión de la comunidad: Recorrido por la CDN de Vercel

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

Transcript

00:00:00Hola a todos.
00:00:24Bienvenidos a la sesión en vivo de la comunidad de Vercel de esta semana.
00:00:27Soy Amy y hoy me acompaña Maya.
00:00:31Hola a todos.
00:00:32Ambas trabajamos en el equipo de comunidad de Vercel.
00:00:35Estamos transmitiendo esto en vivo por X y YouTube,
00:00:37pero si quieren hacer preguntas,
00:00:39asegúrense de registrarse en [community.vercel.com/live](https://community.vercel.com/live)
00:00:43para unirse al chat y que podamos ver sus dudas.
00:00:47Exactamente. Si nos acompañan en el chat,
00:00:50solo un recordatorio amistoso de ser respetuosos,
00:00:52seguir nuestro código de conducta
00:00:54y ayudarnos a que este sea un espacio agradable para todos.
00:00:56La sesión de hoy trata sobre la CDN de Vercel.
00:01:00Dato curioso: si nos están viendo desde nuestra plataforma,
00:01:04en realidad están utilizando la CDN de Vercel; muy meta.
00:01:07Así que si tienen curiosidad sobre eso,
00:01:10Jacob Parris, compañero del equipo de ingeniería de DX,
00:01:13publicó hace poco un gran artículo en el blog
00:01:15sobre esa implementación en el sitio web de Vercel.
00:01:19Acabo de dejar el enlace en el chat,
00:01:22por si alguien quiere leerlo, ahí está.
00:01:25Además, si han estado atentos,
00:01:28hemos estado lanzando muchas novedades en
00:01:30nuestro registro de cambios relacionadas con la CDN de Vercel.
00:01:33Por eso queríamos que viniera la gente
00:01:35del equipo para contarnos más al respecto,
00:01:37y que sepan todas las formas en que la construimos,
00:01:40cómo pueden usarla y todas las funciones disponibles.
00:01:43Así que damos la bienvenida al escenario
00:01:45a Mark, Andrew y Yash para hablarles de ello.
00:01:48Los dejamos con ellos, chicos.
00:01:51Gracias, Amy y Maya.
00:01:55Hola a todos, mi nombre es Mark.
00:01:57Soy ingeniero de software en el equipo de CDN,
00:01:59y estoy aquí con Andrew y Yash.
00:02:03Me encuentro en la bonita
00:02:06oficina de Vercel en San Francisco; hace bastante calor esta semana aquí en California.
00:02:09Hoy quería hablar sobre
00:02:12las funciones recientes de la CDN en las que hemos estado trabajando.
00:02:15Estoy muy emocionado de comentarlas.
00:02:18Primero, quería introducir un poco qué es la CDN de Vercel.
00:02:21Voy a compartir unas cuantas diapositivas que tenemos sobre eso,
00:02:25y luego le pasaré la palabra a Andrew,
00:02:27quien empezará a mostrar una demostración del panel de la CDN.
00:02:32Genial. Quería explicar un poco cómo funciona la CDN de Vercel.
00:02:39Quizás no lo sepan, pero cada proyecto
00:02:42desplegado en Vercel utiliza la CDN de Vercel.
00:02:44Esto lo obtienen de forma gratuita.
00:02:46Pero puede ser algo oculto y tal vez no sepan cómo funciona.
00:02:51La CDN de Vercel
00:02:54recibe las peticiones de su cliente,
00:02:56ya sea su navegador o su máquina,
00:02:58y las ingresa en un punto de presencia.
00:03:01Estos puntos de presencia están por todo el mundo.
00:03:03Tenemos más de 125 distribuidos geográficamente por todo el planeta.
00:03:07Luego, transita a una región de Vercel donde terminamos el TLS,
00:03:14y entonces procesamos la petición.
00:03:16Aquí es donde realizamos el almacenamiento en caché.
00:03:18También hacemos el enrutamiento.
00:03:19Si la petición no es un acierto de caché,
00:03:21podemos reenviarla a la región de la función donde podemos hacer
00:03:25regeneración estática incremental servida desde una función, y demás.
00:03:29Analizaré este diagrama con más detalle cuando hablemos de caché más adelante.
00:03:33Como parte de esto, obtienen el ingreso,
00:03:35también obtienen cortafuegos, enrutamiento,
00:03:38funciones de gestión de tráfico como protección contra desajustes,
00:03:40lanzamientos progresivos, micro front-ends y mucho más.
00:03:44Entonces, ¿qué tiene de especial la CDN de Vercel?
00:03:49La CDN de Vercel entiende el código del framework de forma nativa.
00:03:52Esto significa que cuando despliegan un proyecto en Vercel,
00:03:56el código que tienen,
00:03:57la configuración, se traduce automáticamente en
00:04:00artefactos que la CDN de Vercel procesa nativamente.
00:04:04En la mayoría de las otras CDN tienen que configurarlo ustedes mismos.
00:04:07Esto viene incluido si usan uno de los frameworks.
00:04:10Obtienen aceleración de peticiones integrada
00:04:13y la alta disponibilidad que mencioné antes.
00:04:16También tienen una función como ISR,
00:04:19que es la regeneración estática incremental.
00:04:21Esto es de primer nivel para nosotros,
00:04:23lo que significa que pueden regenerar páginas sin volver a desplegar
00:04:27su código, simplemente enviando
00:04:29una petición API o un webhook y apuntando a páginas específicas.
00:04:34Además, obtienen integraciones DDoS
00:04:36sin límite y siempre activas para cada uno de sus proyectos.
00:04:40Esto es gratuito y gestiona amenazas de forma constante en todas las aplicaciones,
00:04:46además de incluir un firewall de aplicaciones web configurable y gestión de bots.
00:04:51En los últimos meses,
00:04:53hemos trabajado en una serie de nuevas funciones que
00:04:56están disponibles dentro del panel de control de Vercel,
00:05:00y vamos a repasarlas hoy.
00:05:02Estas funciones incluyen una experiencia de panel de CDN totalmente nueva,
00:05:06la capacidad de definir reglas de enrutamiento a
00:05:09nivel de proyecto sin necesidad de un nuevo despliegue,
00:05:12una nueva pestaña de almacenamiento en caché,
00:05:13y también la posibilidad de definir hasta un millón de redirecciones.
00:05:18Con eso, le paso la palabra a Andrew,
00:05:22quien nos mostrará el panel de control de la CDN. ¿Andrew?
00:05:27Gracias, Mark. Gracias.
00:05:29Hola a todos, soy Andrew Gazek.
00:05:31Soy ingeniero de software en el equipo de CDN, por si no se nota.
00:05:36Me encuentro en New Hampshire.
00:05:38Hoy hace unos 35 grados Fahrenheit y está soleado, todavía hace bastante frío.
00:05:45Estoy deseando que lleguen pronto esos cálidos días de verano.
00:05:49Hoy voy a compartir mi pantalla,
00:05:53y voy a mostrarles una pequeña aplicación de demostración que
00:05:56hemos construido para la sesión de la comunidad de hoy.
00:05:59Tenemos esta aplicación de Next.js.
00:06:02Contiene un montón de rutas para un blog.
00:06:08Podemos ver un panel de control.
00:06:10Hay una ruta de API que devuelve datos, etc.
00:06:16Pero no estamos aquí por esto.
00:06:18Estamos aquí por los cambios en el panel de control.
00:06:22Cuando estén en el panel de Vercel,
00:06:25notarán que ahora hay una nueva pestaña de CDN aquí.
00:06:28Si hacen clic en ella,
00:06:30los llevará a esta página de resumen donde enumeramos
00:06:35todas las regiones de Vercel que están
00:06:39sirviendo su proyecto en el periodo de tiempo especificado.
00:06:45Aquí tenemos las últimas 12 horas.
00:06:47Podemos ver que el tráfico de San Francisco y
00:06:49Washington está llegando a nuestro sitio.
00:06:52Pueden pasar el ratón por encima para ver más detalles.
00:06:55Pueden abrir la observabilidad
00:06:58para profundizar más en los datos de tráfico.
00:07:04Lo genial de esta página es que pueden ver un mapa 3D,
00:07:08volver al mapa 2D,
00:07:10y también ver más datos de observabilidad aquí,
00:07:17que también enlazan con las páginas específicas de observabilidad.
00:07:22Esa es la página de resumen.
00:07:27Su objetivo es darles una instantánea de
00:07:30el tráfico de su proyecto, así como
00:07:35mostrarles dónde están ubicadas sus funciones.
00:07:38Pueden ver que la región de funciones de este proyecto es Washington.
00:07:44Lo siguiente que quiero mostrar son las redirecciones.
00:07:48Redirecciones masivas, perdónenme.
00:07:52Oh no, se supone que esto no debería pasar.
00:08:00Veamos. Puedo intentar con un proyecto diferente.
00:08:07De acuerdo. Probemos con otros proyectos.
00:08:18Siento las molestias.
00:08:22Así que tenemos este proyecto de redirecciones masivas.
00:08:27Intentemos añadirle algunas redirecciones.
00:08:30Para crear una redirección,
00:08:35vienen a esta página y hacen clic en "Manual".
00:08:37Digamos que quiero que "/demo" vaya a,
00:08:44veamos, "/about/blog/2020",
00:08:51algo así, para asegurarme.
00:08:57Hacen clic en "Crear", se crea en segundo plano
00:09:02y luego aparecerá este modelo de revisión de cambios.
00:09:07Ahora mismo, estos cambios no están activos en producción.
00:09:11Están en un entorno de pruebas (staging),
00:09:13y pueden probar la nueva redirección con esto.
00:09:18Hacen clic aquí, y bueno, esta página simplemente no existe.
00:09:24Pero sí, así es como funciona.
00:09:27Luego, si quieren publicarlo en producción, hacen clic en "Publicar".
00:09:30Si quieren mantenerlo en staging, hacen clic en "Cancelar",
00:09:34y entonces pueden ver los cambios de staging donde lo hicimos.
00:09:39Si publicamos esto en producción,
00:09:42estos cambios desaparecerían.
00:09:45Deberíamos verlo en producción.
00:09:58Ahora pueden buscar.
00:10:01Pueden ver su historial.
00:10:05Pueden comparar los cambios actuales con los anteriores,
00:10:14y podrían restaurar esta versión si quisieran.
00:10:17Hacen clic en "Restaurar", y veríamos que "/demo" ya no existe.
00:10:26Perfecto. Genial. Le paso la palabra a Yash para su demostración.
00:10:34Gracias, Andrew. Hola a todos.
00:10:38Me llamo Yash. Soy pasante de ingeniería en el equipo de CDN,
00:10:42y también resido en la sede central en San Francisco.
00:10:55de la Universidad de California en San Francisco.
00:10:58Soy pasante de ingeniería en la Universidad de California en San Francisco.
00:11:03También soy pasante de ingeniería en la Universidad de California en San Francisco.
00:11:08También soy pasante de ingeniería en la Universidad de California en San Francisco.
00:11:14También soy pasante de ingeniería en la Universidad de California en San Francisco.
00:11:18También soy pasante de ingeniería en la Universidad de California en San Francisco.
00:11:23También soy pasante de ingeniería en la Universidad de California en San Francisco.
00:11:26También soy pasante de ingeniería en la Universidad de California en San Francisco.
00:11:32También soy pasante de ingeniería en la Universidad de California en San Francisco.
00:11:37También soy pasante de ingeniería en la Universidad de California en San Francisco.
00:11:41También soy pasante de ingeniería en la Universidad de California en San Francisco.
00:11:46También soy pasante de ingeniería en la Universidad de California en San Francisco.
00:11:50También soy pasante de ingeniería en la Universidad de California en San Francisco.
00:11:57También soy pasante de ingeniería en la Universidad de California en San Francisco.
00:12:02También soy pasante de ingeniería en la Universidad de California en San Francisco.
00:12:07También soy pasante de ingeniería en la Universidad de California en San Francisco.
00:12:13También soy pasante de ingeniería en la Universidad de California en San Francisco.
00:12:17También soy pasante de ingeniería en la Universidad de California en San Francisco.
00:12:22También soy pasante de ingeniería en la Universidad de California en San Francisco.
00:12:27También soy pasante de ingeniería en la Universidad de California en San Francisco.
00:12:32También soy pasante de ingeniería en la Universidad de California en San Francisco.
00:12:37También soy pasante de ingeniería en la Universidad de California en San Francisco.
00:12:41También soy pasante de ingeniería en la Universidad de California en San Francisco.
00:12:45Si pudiéramos hacer lo mismo mediante código, tendríamos que volver a desplegar nuestro proyecto.
00:12:49Pero ahora ocurre de forma instantánea.
00:12:53Ahora voy a crear una segunda ruta. Esta será un poco más compleja.
00:12:56En lugar de rellenar el formulario como hice la última vez, voy a escribir lo que quiero aquí.
00:13:00Vamos a usar la IA para generar la ruta.
00:13:02Tengo un panel de control y estoy creando la versión dos, que quiero lanzar lentamente solo a usuarios beta.
00:13:08Así que puedo reescribir nuestro panel a la versión dos del panel.
00:13:14Veamos si el usuario tiene una cookie beta establecida en true.
00:13:21Ahora podemos generar la regla, y en un par de segundos la IA debería completar el formulario por nosotros.
00:13:27Podemos echar un vistazo a la regla que creamos. Está reescribiendo dashboard a dashboard v2.
00:13:32Esto significa que el usuario seguirá viendo /dashboard en su URL,
00:13:35pero se le mostrará el nuevo contenido del nuevo panel.
00:13:39Y aquí hay una condición. Significa que la regla de reescritura solo se aplicará
00:13:43si el usuario tiene una cookie llamada "beta" que sea igual a "true".
00:13:46Si tienen esta cookie, verán el nuevo panel; de lo contrario, verán el antiguo.
00:13:53Y de nuevo, podemos probar esto muy rápidamente.
00:13:58Este es el panel antiguo, pero ahora, si configuramos una cookie llamada beta igual a true,
00:14:09y actualizamos, vemos el nuevo panel, aunque la URL sigue siendo /dashboard y no /dashboard/v2.
00:14:16Esto es porque usamos una reescritura en lugar de una redirección, y ya podemos publicarlo.
00:14:22La última regla de escritura que quiero mostrarles está relacionada con los encabezados de caché.
00:14:26Esto es algo que pueden configurar para mejorar el rendimiento de su sitio,
00:14:30y en particular, quiero optimizar nuestras imágenes estáticas.
00:14:33Puedo indicar que queremos optimizar el almacenamiento en caché de las imágenes estáticas,
00:14:41estableciendo el encabezado cache-control como public, con un max-age de un año e inmutable para las imágenes.
00:14:52Y de nuevo, podemos generar la regla con IA.
00:14:55Ahora creamos esta regla que, para todas las imágenes, establecerá un caché de un año.
00:14:59Así, en lugar de que el navegador consulte al servidor cada vez para obtener la imagen,
00:15:03intentará obtenerla localmente, lo que mejora el rendimiento y ahorra costos.
00:15:08Hay muchos otros valores que pueden asignar al encabezado cache-control,
00:15:11pero creo que para activos estáticos este es el mejor.
00:15:14Así que, de nuevo, pueden crear la ruta y luego publicarla.
00:15:19Como mencioné antes, todas estas rutas también pueden definirse en el código.
00:15:23Y tenemos este modelo aquí donde pueden
00:15:26transformar todas sus rutas del panel en algo que puedan copiar y pegar
00:15:30ya sea en Vercel.json o Vercel.ts, lo que prefieran.
00:15:35El principal beneficio de ponerlas en el código es seguir las mejores prácticas de control de versiones,
00:15:40pero tengan en cuenta que si hacen cambios aquí, tendrán que redestinar su proyecto para que se apliquen.
00:15:46Lo otro que quiero mostrarles es la página de historial.
00:15:49Es similar a lo que Andrew demostró en la página de redirecciones masivas.
00:15:52Pueden ver las versiones anteriores de lo que ha cambiado.
00:15:55Digamos que queremos deshacer nuestro cambio más reciente, que fue añadir la regla de caché.
00:16:00Podemos restaurarlo inmediatamente con solo pulsar este botón de restaurar.
00:16:04Y ahora, casi al instante, la regla habrá desaparecido; vemos que ya no está aquí.
00:16:09También pueden buscar y filtrar por tipo; por ejemplo, si quieren ver todas sus redirecciones, pueden hacerlo.
00:16:14Y sí, eso es el enrutamiento de proyectos.
00:16:16Toda la funcionalidad que mostré también está disponible a través de la API, la CLI y el SDK.
00:16:22Muchas gracias, le paso la palabra a Mark.
00:16:26Genial, gracias Yash, eso fue muy interesante.
00:16:29Me gusta la función de lenguaje natural.
00:16:31Voy a mostrar la última función de las nuevas pestañas de CDN, que es la pestaña de caché.
00:16:41Tal como decía Yash sobre la configuración de un encabezado cache-control,
00:16:46por defecto en la CDN de Vercel obtienes caché gratis al usar funciones como
00:16:53la regeneración estática incremental, o pueden controlar los encabezados de caché ustedes mismos.
00:16:56Aquí, en la pestaña de caché de arriba, tenemos este diagrama de almacenamiento en caché.
00:17:04Quería dedicar un momento a explicar esto, ya que, a diferencia de otras CDN,
00:17:09aquí hay múltiples niveles que ayudan a optimizar su sitio.
00:17:12Si están usando ISR, este es el diagrama que vimos antes.
00:17:17La solicitud ingresa muy cerca del cliente.
00:17:20Pasa a la región de Vercel más cercana.
00:17:22Hay 20 regiones en todo el mundo donde se coteja con la caché de la CDN.
00:17:27Si hay un fallo aquí, puede ir a la región de su función donde hay otra caché
00:17:33para su ISR, y si la función debe ejecutarse, también hay una caché que pueden usar
00:17:39para solicitar datos de sus backends y así protegerlos.
00:17:43Hay diferentes tipos de solicitudes que pueden realizar en Vercel.
00:17:47Por ejemplo, si solo hacen una solicitud de API y usan encabezados de control de caché,
00:17:52según la documentación, esto también utiliza la caché de la CDN.
00:17:56Omite la caché de ISR, pero sigue teniendo la caché de función y de ejecución.
00:18:00Y por último, si están reescribiendo en la CDN de Vercel hacia un origen externo,
00:18:07digamos que están haciendo proxy al backend de Vercel, obtienen el beneficio de las funciones de la CDN
00:18:14como la caché y el firewall, pero la solicitud iría al origen externo.
00:18:18Y eso nos lleva a la funcionalidad de purgar la caché.
00:18:22Digamos que por alguna razón quieren revalidar el contenido.
00:18:26En esta página tengo un ejemplo con ISR usando un fetch con una etiqueta de caché específica.
00:18:36Aquí se llama la etiqueta de datos fetch (fetch data tag).
00:18:38Pueden ver que esto se regeneró hace una hora y usa esa etiqueta de caché.
00:18:45Si quiero purgar eso, por ejemplo, si quiero que la página se regenere, tengo varias opciones.
00:18:54Aquí puedo purgar por etiqueta de caché, así que ingreso la etiqueta fetch-data.
00:18:58Luego puedo elegir entre invalidar el contenido o eliminarlo.
00:19:04Invalidar nos permite servir una página obsoleta mientras se regenera
00:19:09en segundo plano, por eso se recomienda para que los usuarios no experimenten
00:19:14esa latencia en su próxima solicitud.
00:19:16Digamos que hago esto, hago clic en purgar, confirmo.
00:19:21Al refrescar la página, esta vez no cambió, sigue incrementando.
00:19:27Pero si refresco de nuevo, verán que el tiempo se reinició porque fue
00:19:33recientemente regenerada.
00:19:34También puedo hacer lo mismo eliminando el contenido.
00:19:39Si elimino este contenido y purgo, la próxima vez que refresque la página
00:19:45el tiempo se reinicia inmediatamente.
00:19:48Esto es porque fue una revalidación bloqueante; la siguiente solicitud esperó a que la página se regenerara
00:19:53antes de ser servida.
00:19:55Por eso recomendamos usar invalidar cuando quieran refrescar contenido, ya que puede servir
00:20:00ese contenido obsoleto mientras se regenera en segundo plano.
00:20:05Pueden purgar por etiqueta de caché, o también por una imagen de origen de la misma forma.
00:20:11Incluso pueden purgar todo el contenido de la caché, y pueden hacerlo en las dos capas
00:20:16que discutimos: en la caché de la CDN o en la de ejecución o de datos.
00:20:21Esto purga todo el contenido; es un borrado total, por lo que la siguiente solicitud
00:20:28se bloquearía para refrescar dicho contenido.
00:20:30Eso es todo lo que teníamos sobre las nuevas funciones hoy, y vamos a abrir la sesión de preguntas
00:20:39para que nos digan qué más quieren saber.
00:20:43Muy bien, gracias.
00:20:44Hola chicos, tenemos un par de preguntas en el chat.
00:20:50Empezaré con la primera.
00:20:51Tras desplegar una app en Vercel, ¿cómo utilizo la CDN y cómo se cobra por ella?
00:21:10Sí, excelente pregunta.
00:21:11Toda aplicación en Vercel recibe la CDN gratis, lo que significa que al desplegar
00:21:20su aplicación, analizamos automáticamente su contenido y lo optimizamos para
00:21:27servirlo en la CDN de Vercel.
00:21:28Si usan un framework que soporte ISR, ejecutaremos SSG (generación de sitios estáticos)
00:21:35y mapearemos ese contenido en la caché de ISR y en la de la CDN.
00:21:40Así que, de entrada, probablemente no necesiten configurar nada para empezar.
00:21:46Sin embargo, pueden hacerlo si quieren; por ejemplo, si están definiendo una solicitud de API,
00:21:53pueden configurar encabezados cache-control para personalizarlo o, como mostró Yash,
00:22:00si sirven contenido estático desde un directorio distinto al estándar, pueden establecer
00:22:07reglas de caché para todo ese contenido.
00:22:11Para los usuarios de nivel Hobby, esto se ofrece gratis, y para los usuarios Pro,
00:22:21tienen una asignación de solicitudes y ancho de banda; después de eso,
00:22:26hay tarifas según la región que pueden consultar en nuestro sitio.
00:22:27Segunda pregunta.
00:22:31¿Qué pasa si ya tengo una CDN delante de mi aplicación?
00:22:38¿Cómo la cambio a Vercel?
00:22:40También es una excelente pregunta.
00:22:44Es algo que podemos soportar perfectamente.
00:22:47En general, creo que hay dos etapas para realizar la migración.
00:22:54La primera es que, si ya usan una CDN frente a Vercel, pueden dejar pasar
00:22:58el contenido para que Vercel maneje la caché y el servicio, y también las reglas de enrutamiento.
00:23:04Una vez que tengan toda esa configuración en Vercel,
00:23:10lo único que deben hacer es cambiar su DNS para que apunte a Vercel,
00:23:15de modo que las solicitudes lleguen automáticamente.
00:23:18Tenemos una guía que podemos enlazar en los comentarios sobre cómo migrar
00:23:23al DNS de Vercel sin tiempo de inactividad.
00:23:25Si tienen dudas sobre las diferencias de configuración, tenemos varias guías en nuestra
00:23:33base de conocimientos que ayudan a mapear los conceptos de otras CDN
00:23:37a los conceptos de Vercel; podemos proporcionar los enlaces.
00:23:41Quizás le pase esta a Andrew.
00:23:49¿Cómo puedo analizar el tráfico de mi CDN?
00:23:52Sí, hay un par de formas.
00:23:55La primera es la que demostré antes.
00:24:00¿No me oyen?
00:24:00Ah, sí, vale, gracias.
00:24:04Como mostré antes, pueden consultar la pestaña de descripción general de la CDN,
00:24:11que muestra una instantánea del tráfico de su proyecto en un periodo determinado.
00:24:17Otro lugar es la página de solicitudes perimetrales (edge requests) en observabilidad,
00:24:24donde pueden desglosar todo su tráfico por varias categorías.
00:24:34Sí, la página de observabilidad en Vercel tiene desgloses muy detallados
00:24:44que pueden consultar; sigan explorando por ahí.
00:24:48Otra pregunta recurrente es si la CDN maneja ataques DDoS o qué tipo
00:24:57de seguridad se añade o está disponible con la CDN.
00:25:04Sí, una pregunta fantástica.
00:25:06Vercel incluye protecciones sin coste adicional para la mitigación de DDoS.
00:25:12Esto significa que viene gratis y cubre una amplia gama
00:25:19de diferentes tipos de ataques de los que Vercel te protege automáticamente.
00:25:23Tenemos un firewall de aplicaciones web y protecciones en las capas L3, L4 y L7,
00:25:32así que ataques que van desde un pico de solicitudes a una ruta específica hasta otros
00:25:39más sofisticados que rotan direcciones IP u otra información, podemos detectarlos
00:25:47y protegerte.
00:25:48Así que sí, viene incluido por defecto en todos los proyectos.
00:25:52También pueden definir reglas personalizadas si lo desean.
00:25:57Esto está disponible en la pestaña de firewall del panel; es un tema que
00:26:02deberíamos tratar en profundidad pronto.
00:26:04Allí pueden definir reglas aún más específicas para su aplicación si hay
00:26:09algo en particular que quieran bloquear.
00:26:13La seguridad es un gran tema, daría para una sesión entera.
00:26:22Sí, me encanta todo lo que están haciendo para reducir la fricción
00:26:27en todos estos flujos.
00:26:29Y ahora una un poco aleatoria, pero vi en Twitter que gustó mucho
00:26:34la animación de 2D a 3D en la página de la CDN.
00:26:38¿Pueden enseñárnosla y comentar algo al respecto?
00:26:42Sí, puedo volver a compartir mi pantalla.
00:26:49Veamos, para quien no lo haya visto.
00:26:52En la página de visión general de la CDN mostramos un mapa 2D, y si haces clic en el globo,
00:27:00obtienes un mapa 3D.
00:27:01Es bastante interactivo, puedes hacerlo girar hacia donde quieras.
00:27:07Puedes pasar el ratón por encima y volver al estado anterior.
00:27:12Así que eso es.
00:27:18Gracias.
00:27:19Me encanta el gráfico y lo fácil que resulta profundizar en la parte de
00:27:24observabilidad: visualizo dónde está el tráfico y luego puedo
00:27:29investigar más a fondo.
00:27:30Exactamente.
00:27:32Otra pregunta relacionada con problemas que he visto antes de añadir
00:27:43estas funciones, y algo que yo mismo me pregunto porque no he
00:27:47profundizado en lo más nuevo.
00:27:50Todo es tan reciente.
00:27:51¿Qué salvaguardas existen para ayudar a prevenir o detectar una mala configuración
00:27:58o evitar exponer accidentalmente un servicio interno o datos sensibles?
00:28:03Sí, sin duda.
00:28:04Hay varios tipos de protecciones para ocultar rutas internas.
00:28:07Por defecto, los proyectos tienen una protección de despliegue que permite usar
00:28:15la autenticación de Vercel o contraseñas para proteger su sitio de visitas no deseadas,
00:28:23y esto puede proteger todo el despliegue.
00:28:31También pueden usar cookies y librerías de autenticación en rutas específicas
00:28:43para protegerse contra eso.
00:28:46Además, hay reglas de firewall personalizadas para proteger ciertas rutas.
00:28:54Hay muchas opciones disponibles.
00:28:56Dentro del panel verán mucha observabilidad sobre qué rutas se están sirviendo.
00:29:04En cada despliegue verán un resumen de despliegue con todas las rutas,
00:29:10donde pueden inspeccionar información sobre cada una de ellas y sus funciones.
00:29:15Pruébenlo y, si tienen preguntas, estaré encantado de responderlas en detalle.
00:29:22Increíble.
00:29:34Muy bien, veamos otra que ha surgido; quizás la mencionaron un poco,
00:29:41pero tal vez puedan dar más detalles.
00:29:43¿Se pueden usar rutas a nivel de proyecto para dirigir tráfico a APIs externas o microservicios?
00:29:51Sí, absolutamente.
00:29:55Hay una plantilla... tal vez Yash, ¿quieres hablar de eso tú que has estado
00:30:04trabajando en ello? Claro, adelante.
00:30:06Sí, definitivamente puedes reescribir todas tus solicitudes de API a orígenes externos.
00:30:11Compartiré más sobre esto en las próximas semanas, pero puedes configurar reglas de escritura.
00:30:15De hecho, puedo compartir mi pantalla.
00:30:18Si configuro una regla de escritura, puedo establecer, por ejemplo, una reescritura desde mi API...
00:30:35...a cualquier origen externo, por ejemplo, algo como [https://api-external.com](https://www.google.com/search?q=https://api-external.com)
00:30:44puedes hacer algo así para hacer proxy de tu API a un origen externo.
00:30:50Sí, eso está soportado, y también puedes hacerlo a través de la CLI
00:31:00o cualquier otro método que prefieras.
00:31:04Qué bien, facilita mucho las cosas cuando estás haciendo una transición parcial; sé que usamos
00:31:10un poco de eso en nuestro sitio de la comunidad para añadir funciones extra.
00:31:16Así no todo es parte de Discourse, pero tampoco queremos dejar Discourse del todo,
00:31:21ya que es la base principal del sitio; tener ese extra encima
00:31:25ha sido muy conveniente para nosotros.
00:31:27Sí, fue un gran avance.
00:31:31Creo que es realmente útil obtener los beneficios de la capa de caché,
00:31:35el firewall y las reglas de enrutamiento, donde decides qué hacer con una sintaxis sencilla,
00:31:42pudiendo usar al mismo tiempo diferentes backends donde ya tienes contenido.
00:31:48Genial. Creo que no hay más preguntas en el chat, pero me gustaría preguntar: ¿qué es lo siguiente?
00:31:56¿Pueden adelantarnos algo?
00:32:00Oh, buena pregunta.
00:32:02Bueno, hay varias cosas en camino, pero creo que una de las que mencionamos
00:32:09antes y en la que deberíamos profundizar es en seguridad; esperen más contenido pronto.
00:32:15Genial, gracias chicos por acompañarnos, sé que están muy ocupados; les dejamos
00:32:22seguir con su día, pero agradecemos mucho que hayan dedicado este tiempo.
00:32:25Muchas gracias por invitarnos.
00:32:28Sí, muchísimas gracias.
00:32:30Gracias a todos.
00:32:30Muy bien, eso estuvo genial. ¿Qué tenemos ahora, Maya?
00:32:37Tenemos la sesión de preguntas abiertas sobre el Sandbox este jueves.
00:32:45Así que estén atentos a eso.
00:32:47También quiero promocionar esto porque hay eventos muy emocionantes el
00:32:54fin de semana: los eventos "Zero to Agent" de Vercel. También tenemos el Vercel Ship en junio,
00:33:03vayan a [vercel.com/ship](https://vercel.com/ship) si aún no lo han visto, pueden crear su propia maletita.
00:33:09El equipo de diseño se lució con esta página, así que échenle un vistazo y reserven la fecha
00:33:15para los eventos en todo el mundo. Tendremos más sesiones de la comunidad,
00:33:21pueden verlas todas en [community.vercel.com/events](https://www.google.com/search?q=https://community.vercel.com/events).
00:33:26Gracias a todos, ha sido estupendo.
00:33:28¡Adiós!

Key Takeaway

Vercel ha transformado su CDN en una plataforma programable e inteligente que permite gestionar el enrutamiento, la caché y la seguridad de forma instantánea tanto desde el código como desde un panel potenciado por IA.

Highlights

Vercel CDN ofrece una red global con más de 125 puntos de presencia para optimizar la entrega de contenido.

Integración nativa con frameworks que permite funciones avanzadas como la Regeneración Estática Incremental (ISR) sin configuración manual.

Nueva interfaz en el panel de control que incluye mapas de tráfico en 3D y herramientas de observabilidad detalladas.

Capacidad de gestionar hasta un millón de redirecciones y reglas de enrutamiento mediante lenguaje natural con IA.

Funciones de seguridad integradas y gratuitas que incluyen mitigación de DDoS en las capas L3, L4 y L7.

Nuevas herramientas para la purga selectiva de caché por etiquetas (tags) e invalidación de contenido en segundo plano.

Timeline

Introducción y Contexto de la Comunidad

Amy y Maya inician la sesión de la comunidad de Vercel dando la bienvenida a los espectadores de X y YouTube. Explican que la propia plataforma de transmisión utiliza la CDN de Vercel, demostrando la eficacia de su propia infraestructura. Mencionan recursos adicionales como artículos de ingeniería sobre la implementación técnica en el sitio oficial de Vercel. Esta sección establece el propósito de la charla: presentar las actualizaciones recientes del equipo de ingeniería de CDN. Se invita a los usuarios a registrarse para participar en el chat en vivo y seguir el código de conducta.

Fundamentos y Arquitectura de Vercel CDN

Mark, ingeniero de software, explica que cada proyecto en Vercel utiliza la CDN de forma automática y gratuita. La arquitectura cuenta con más de 125 puntos de presencia globales donde se procesa el tráfico y se termina el TLS. Un aspecto diferencial es que la CDN entiende el código del framework nativamente, traduciendo configuraciones en artefactos de red sin intervención manual. Esto facilita funciones como la Regeneración Estática Incremental (ISR) y proporciona protección DDoS siempre activa. Mark destaca que las peticiones se optimizan mediante un enrutamiento inteligente que conecta rápidamente con las regiones de funciones.

Demostración: Nuevo Panel y Redirecciones Masivas

Andrew Gazek presenta la nueva pestaña de CDN en el panel de control, destacando la visualización de tráfico geográfico. Muestra un mapa interactivo en 3D que permite a los desarrolladores ver de dónde provienen las solicitudes en tiempo real. La demostración se centra luego en la gestión de redirecciones masivas, permitiendo crear reglas manuales con un entorno de pruebas (staging). Los cambios pueden revisarse y probarse antes de publicarse definitivamente en producción para evitar errores. Además, se introduce un sistema de historial que permite comparar versiones y restaurar configuraciones anteriores de forma sencilla.

Enrutamiento de Proyectos y Configuración con IA

Yash muestra cómo el enrutamiento a nivel de proyecto permite realizar cambios de tráfico sin necesidad de redestinar o volver a desplegar el código. Utiliza una herramienta de IA para generar reglas complejas mediante lenguaje natural, como configurar una cookie beta para usuarios específicos. También demuestra cómo optimizar activos estáticos estableciendo encabezados de cache-control directamente desde la interfaz. Estas reglas pueden exportarse a archivos de configuración como vercel.json para mantener las mejores prácticas de control de versiones. La flexibilidad de este sistema permite realizar pruebas A/B y ajustes de rendimiento de manera casi instantánea.

Estrategias de Caché y Purga de Contenido

Mark retoma la palabra para profundizar en los niveles de almacenamiento en caché, diferenciando entre la caché de la CDN y la de ejecución. Explica detalladamente el proceso de purga de caché mediante etiquetas (tags), lo cual es vital para actualizar contenido específico sin afectar el rendimiento global. Se comparan los métodos de 'invalidar' versus 'eliminar', recomendando la invalidación para servir contenido obsoleto mientras se regenera el nuevo en segundo plano. Este enfoque minimiza la latencia para el usuario final y protege los servidores de origen. El diagrama de flujo presentado ayuda a visualizar cómo viaja una solicitud a través de las distintas capas de optimización.

Sesión de Preguntas y Respuestas (Seguridad y Migración)

El equipo responde dudas sobre costos, aclarando que el nivel Hobby es gratuito mientras que el Pro tiene asignaciones por ancho de banda. Se discute la migración desde otras CDN, sugiriendo un cambio gradual de DNS y el uso de las guías de mapeo de conceptos de Vercel. Respecto a la seguridad, confirman que las protecciones L3 a L7 contra ataques DDoS son automáticas y están incluidas por defecto. También abordan el uso de la CDN para hacer proxy hacia APIs externas o microservicios mediante reglas de reescritura. Finalmente, mencionan que la seguridad será un tema central en futuras actualizaciones y sesiones técnicas.

Cierre y Próximos Eventos de Vercel

Amy y Maya concluyen la sesión agradeciendo a los ingenieros por su tiempo y por las demostraciones técnicas. Promocionan los próximos eventos de la comunidad, incluyendo una sesión sobre el Sandbox y los talleres 'Zero to Agent'. Hacen un llamado especial para el evento 'Vercel Ship' en junio, invitando a los usuarios a registrarse en el sitio web oficial. Se destaca la importancia de estas sesiones en vivo para mantener a la comunidad conectada con el equipo de desarrollo. La transmisión termina con un recordatorio de consultar los enlaces proporcionados para profundizar en la nueva documentación de la CDN.

Community Posts

View all posts