00:00:00Hello everyone.
00:00:24Welcome to this week's personnel community live session.
00:00:27I'm Amy and I'm joined by Maya today.
00:00:31Hello everyone.
00:00:32We both work on the Vercel community team.
00:00:35We are streaming this live on X and YouTube,
00:00:37but if you want to ask questions,
00:00:39be sure to sign on at community.vercel.com/live
00:00:43to join the chat and make sure we see those questions.
00:00:47Absolutely. If you're hanging out in our chat,
00:00:50just a friendly reminder to be respectful,
00:00:52follow our code of conduct,
00:00:54and help us keep this a nice space for everyone.
00:00:56So today's session is all about the Vercel CDN.
00:01:00Fun fact, if you're watching from our platform,
00:01:04that is actually utilizing Vercel CDN, very metal.
00:01:07So if you're curious about that,
00:01:10Jacob Parris, who is a fellow DX engineer team,
00:01:13he shipped a great blog post about
00:01:15that implementation recently on the Vercel website.
00:01:19>> I just dropped the link into the chat,
00:01:22so if anyone wants to read it, it is there.
00:01:25Then if you've been paying attention,
00:01:28we've actually been shipping a lot in
00:01:30our changelog that's related to Vercel CDN.
00:01:33So we wanted to have the folks from
00:01:35the team here to tell more about it,
00:01:37and let you know all of the ways that we built it,
00:01:40how you can use it, all of the features that are available.
00:01:43So welcome to the stage,
00:01:45Mark, Andrew, and Yash here to talk to you about it.
00:01:48We'll get out of your way, guys.
00:01:51>> Thanks, Amy and Maya.
00:01:55Everyone, my name is Mark.
00:01:57I'm a Software Engineer on the CDN team,
00:01:59and I'm here with Andrew and Yash.
00:02:03I'm here in Vercel's nice
00:02:06San Francisco office, quite warm this week here in California.
00:02:09Today, I wanted to talk about
00:02:12the recent CDN features that we have been working on.
00:02:15So pretty excited to talk about them.
00:02:18First, I wanted to just introduce a bit about the Vercel CDN.
00:02:21So I'm going to share just a few slides that we have on that,
00:02:25and then I'll hand it over to Andrew,
00:02:27who will start walking through a demo of the CDN dashboard.
00:02:32Awesome. I just wanted to give a bit about how the Vercel CDN works.
00:02:39You may not know it, but every single project
00:02:42deployed to Vercel uses the Vercel CDN.
00:02:44You get this for free.
00:02:46But it can be a hidden thing that you may not know how it works.
00:02:51So the Vercel CDN,
00:02:54it takes in requests from your client,
00:02:56from your browser, from your machine,
00:02:58and ingresses it into a point of presence.
00:03:01This point of presence is all over the world.
00:03:03We have over 125 of them distributed geographically around the world.
00:03:07Then it transits to a Vercel region where we terminate the TLS,
00:03:14and then we handle the request.
00:03:16This is where we do caching.
00:03:18We also do routing.
00:03:19If the request is not a cache hit,
00:03:21we can forward it on to the function region where we can do
00:03:25incremental static regeneration served from a function and so forth.
00:03:29I'll go through this diagram in a bit more detail when we talk about caching later.
00:03:33As part of this, you get the ingress,
00:03:35you also get firewall, routing,
00:03:38traffic management features like skew protection,
00:03:40rolling releases, micro front-ends, and a lot more.
00:03:44So what is special about the Vercel CDN?
00:03:49The Vercel CDN understands framework code natively.
00:03:52So what that means is that when you deploy a project to Vercel,
00:03:56the code that you have,
00:03:57the configuration is automatically translated into
00:04:00artifacts that the Vercel CDN processes natively.
00:04:04Most other CDNs you have to configure it yourself.
00:04:07This comes out of the box if you're using one of the frameworks.
00:04:10You get built-in request acceleration,
00:04:13high availability that I was mentioning before.
00:04:16You also get a feature like ISR,
00:04:19which is incremental static regeneration.
00:04:21This is our first class,
00:04:23so this means that you can regenerate pages without redeploying
00:04:27your code just by sending
00:04:29an API request or webhook and just targeting specific pages.
00:04:34Then again, you get an unmetered,
00:04:36always on DDoS integrations for every one of your projects.
00:04:40This comes for free and consistently handles threats across applications,
00:04:46as well as coming with configurable web application firewall and bot management.
00:04:51Over the past few months,
00:04:53we have worked on a number of new features that
00:04:56are available inside the Vercel dashboard,
00:05:00and we're going to walk through those features today.
00:05:02Those features include a brand new CDN dashboard experience,
00:05:06the ability to define routing rules on
00:05:09the project level without needing a new deployment,
00:05:12a brand new caching tab,
00:05:13and also the ability to define redirects up to a million redirects.
00:05:18With that, I'm going to hand it over to Andrew,
00:05:22who is going to walk through the CDN dashboard. Andrew?
00:05:27>> Thanks, Mark. Thank you.
00:05:29Everyone, I'm Andrew Gazek.
00:05:31I'm a software engineer on the CDN team, if you can tell.
00:05:36I'm located in New Hampshire.
00:05:38Today, it's about 35 degrees and sunny, pretty cold still.
00:05:45Looking forward to those warm summer days coming soon.
00:05:49Today, I'm going to share my screen,
00:05:53and I'm going to walk you through a little demo app that we've
00:05:56built for today's community session.
00:05:59We have this Next.js app.
00:06:02It contains a bunch of routes for a blog.
00:06:08We can view a dashboard.
00:06:10There's an API route that returns to data, etc.
00:06:16But this isn't what we're here for.
00:06:18We're here for the dashboard changes.
00:06:22When you're in the Vercel dashboard,
00:06:25you'll now notice that there's a new CDN tab here.
00:06:28If you click on that,
00:06:30it brings you to this overview page where we list
00:06:35all the Vercel regions that are currently
00:06:39serving your project within the specified time period.
00:06:45Here we have the last 12 hours.
00:06:47We can see that traffic from San Francisco and
00:06:49Washington are hitting our site.
00:06:52You can hover over these to see more details.
00:06:55You can open an observability
00:06:58to dig down further into the traffic data.
00:07:04Cool thing about this page is you can view a 3D map,
00:07:08go back to the 2D map,
00:07:10and then as well as see more observability data here,
00:07:17which also links back to the specific observability pages.
00:07:22That's the overview page.
00:07:27It's just meant to give you a snapshot into
00:07:30your project's traffic as
00:07:35well as show you where your functions are located as well.
00:07:38You can see that this project's functions region is Washington.
00:07:44The next thing I want to demo is redirects.
00:07:48Bulk redirects, forgive me.
00:07:52Oh no, that's supposed to happen.
00:08:00Let's see. If I can try a different projects here.
00:08:07Okay. Well, let's try a different projects.
00:08:18Sorry for the inconvenience.
00:08:22So we have this bulk redirects projects.
00:08:27Let's try adding some redirects to it.
00:08:30So to create a redirect,
00:08:35you come to this page, click "Manual".
00:08:37Now let's say I want to flash demo goes to,
00:08:44let's see, about blog 2020,
00:08:5110 style, make sure, something like that.
00:08:57So you click "Create", creates it in the background,
00:09:02and then it's going to bring up this review changes model.
00:09:07So right now, these changes are not live in production.
00:09:11They're in a staging environment,
00:09:13and you can test the new redirect with this.
00:09:18Click here, and this page just doesn't exist.
00:09:24But yeah, that's how it works.
00:09:27Then if you want to publish a production, you click "Publish".
00:09:30If you want to keep it in staging, you click "Cancel",
00:09:34and then you can view the staging changes here where we did that.
00:09:39If we publish this to production,
00:09:42these changes would go away.
00:09:45We should see it in production.
00:09:58Now you can search.
00:10:01You can view your history.
00:10:05You can compare the live changes to the previous changes,
00:10:14and you can restore this version if you wanted to.
00:10:17Click "Restore", and we should see that demo doesn't exist anymore.
00:10:26Perfect. Awesome. I'm going to hand it over to Yash for his demo.
00:10:34>> Thank you, Andrew. Hey, everyone.
00:10:38My name is Yash. I'm an engineering intern on the CEN team,
00:10:42and I'm also based in the SF headquarters of
00:10:55the University of California San Francisco.
00:10:58I'm an engineering intern at the University of California San Francisco.
00:11:03I'm also an engineering intern at the University of California San Francisco.
00:11:08I'm also an engineering intern at the University of California San Francisco.
00:11:14I'm also an engineering intern at the University of California San Francisco.
00:11:18I'm also an engineering intern at the University of California San Francisco.
00:11:23I'm also an engineering intern at the University of California San Francisco.
00:11:26I'm also an engineering intern at the University of California San Francisco.
00:11:32I'm also an engineering intern at the University of California San Francisco.
00:11:37I'm also an engineering intern at the University of California San Francisco.
00:11:41I'm also an engineering intern at the University of California San Francisco.
00:11:46I'm also an engineering intern at the University of California San Francisco.
00:11:50I'm also an engineering intern at the University of California San Francisco.
00:11:57I'm also an engineering intern at the University of California San Francisco.
00:12:02I'm also an engineering intern at the University of California San Francisco.
00:12:07I'm also an engineering intern at the University of California San Francisco.
00:12:13I'm also an engineering intern at the University of California San Francisco.
00:12:17I'm also an engineering intern at the University of California San Francisco.
00:12:22I'm also an engineering intern at the University of California San Francisco.
00:12:27I'm also an engineering intern at the University of California San Francisco.
00:12:32I'm also an engineering intern at the University of California San Francisco.
00:12:37I'm also an engineering intern at the University of California San Francisco.
00:12:41I'm also an engineering intern at the University of California San Francisco.
00:12:45If we were able to do the same thing in code, we'd have to redeploy our project.
00:12:49But now it happens instantly.
00:12:53Now I'm going to create a second route. This one will be a bit more complex.
00:12:56Instead of filling out the form like I did last time, I'm going to type in what I want here.
00:13:00We're going to use the AI to generate the route.
00:13:02So I have a dashboard, and I'm making version two, which I want to slowly roll out to only beta users.
00:13:08So I can rewrite our dashboard to version two of the dashboard.
00:13:14Let's see if the user has a beta cookie which is set to true.
00:13:21Now we can generate the rule, and within a couple seconds the AI should fill out the form for us.
00:13:27So we can take a look at the rule we created. It's rewriting dashboard to dashboard v2.
00:13:32What this means is the user will still see slash dashboard in their URL,
00:13:35but they'll be shown the new content from the new dashboard.
00:13:39And there's this condition over here. What this means is the writing rule will only apply
00:13:43if the user has a cookie called beta which is equal to true.
00:13:46So if they do have this cookie, they'll see a new dashboard, otherwise they'll see the old dashboard.
00:13:53And again we can test this out very quickly.
00:13:58So this is the old dashboard, but now if we set a cookie called beta equal to true,
00:14:09and we refresh, we can see a new dashboard, but our URL is still slash dashboard and not slash dashboard slash v2.
00:14:16This is because we use the rewrite instead of redirect, and we can publish it.
00:14:22And now the last writing rule I want to show you is related to caching headers.
00:14:26So this is something you can set to improve your site performance,
00:14:30and in particular I want to optimize our static images.
00:14:33So I can say that we want to optimize our caching for static images,
00:14:41set the cache control header to public max age equals one year in mutable for our images.
00:14:52And again we can generate the rule with AI.
00:14:55And now we create this rule which for all images it will set a one year cache.
00:14:59So instead of the browser hitting your server every time to fetch the image,
00:15:03it will try to fetch it locally and this can improve your performance and save costs.
00:15:08There's a bunch of other values you can set the cache control header to,
00:15:11but I think for static assets this is the best one.
00:15:14So you can again create and then publish the route.
00:15:19And like I mentioned earlier all these routes can also be defined in code.
00:15:23And we have this model over here where you can
00:15:26transform all of your routes in the dashboard into something you can copy and paste
00:15:30into either Vercel Json or Vercel.ts whichever you prefer.
00:15:35The main benefit of putting them in your code is for best version control practices,
00:15:40but if you make changes here you'll note that you'll have to redeploy your project for them to go live.
00:15:46And the other thing I want to show you is the history page.
00:15:49This is similar to what Andrew demoed in the bulk redirects page.
00:15:52You can see your past versions of what's changed.
00:15:55And let's say we want to undo our most recent change which is adding the caching rule.
00:16:00We can immediately restore it just by hitting this restore button.
00:16:04And now almost immediately the rule will be gone so we can see it's not here anymore.
00:16:09You can also search through and filter by type so if you want to see all your redirects you can do that.
00:16:14And yeah that's project while we're adding.
00:16:16All the functionality I demoed is also available through the API, the CLI, and SDK.
00:16:22Thank you so much and I'll hand over to Mark.
00:16:26Cool thanks so much Yash, that was really cool.
00:16:29I like the natural language feature.
00:16:31So I am going to be showing the last feature of the new CDN tabs which is the caching tab.
00:16:41So just like Yash was talking about where you can set a cache control header,
00:16:46by default in the results CDN you get caching for free when you use features like incremental
00:16:53static regeneration or you can control the cache headers yourself.
00:16:56So here on the caches tab at the top we have this caching diagram.
00:17:04So I just wanted to spend a bit of time explaining this since unlike other CDNs there's actually
00:17:09multiple tiers here that help you optimize your site.
00:17:12So if you're using ISR again this is the diagram we saw earlier.
00:17:17The request is ingressed very close to the client.
00:17:20It passes to the closest per cell region.
00:17:22There are 20 regions all over the world where it is mapped against the CDN cache.
00:17:27If there is a miss here then it can go to your function region where there's another cache
00:17:33for your ISR and if the function needs to be executed there's also a cache you can use for
00:17:39requesting data from your backends so that you can protect your backends.
00:17:43There are different types of requests that you can make on top of yourself.
00:17:47So for example if you're just making an API request and you're using cache controls headers,
00:17:52click on the documentation, here it also uses the CDN cache.
00:17:56It skips the ISR cache but it also still has the function and runtime cache.
00:18:00And lastly also if you're rewriting on the result CDN to an external origin,
00:18:07let's say you're proxying to the Vercel backend, you get the benefit of Vercel CDN features like
00:18:14the cache and the firewall but then the request would go to the external origin.
00:18:18And that leads us to the purge cache functionality.
00:18:22So let's say for a reason that you want to revalidate the content.
00:18:26Here on this page I have an example with ISR of using a fetch with a specific cache tag.
00:18:36So here this is called the fetch data tag.
00:18:38You can see here that this was regenerated about an hour ago and it's using the fetch data cache tag.
00:18:45If I want to purge that, let's say I want that page to be regenerated, I have a few options.
00:18:54Here I can purge by cache tag so I can enter the fetch data tag.
00:18:58And then I can choose between invalidating the content or deleting the content.
00:19:04And invalidate allows us to serve as stale page while that page is being regenerated in
00:19:09the background which is why it's recommended for users so you don't get that latency on
00:19:14the next request for the users.
00:19:16So let's say I do this, I click purge, yes I want to purge.
00:19:21When I refresh the page this time didn't change, it's still incrementing.
00:19:27But if I refresh the page again you can see that the time reset back to it was freshly
00:19:33regenerated.
00:19:34I can also do the same thing while deleting content.
00:19:39So if I delete this content and click purge the next time I refresh this page you can see
00:19:45the time is immediately reset back to that.
00:19:48That's because this was like blocking revalidate the next request waited for the page to regenerate
00:19:53before being served.
00:19:55So we do recommend using invalidate when you want to refresh content because it can serve
00:20:00that stale content while it's being regenerated in the background.
00:20:05You can purge by cache tag, you can also purge by a source image via the same way.
00:20:11You can also purge all of the content in the cache and you can do that on the two layers
00:20:16we were discussing earlier either on the CDN cache or the runtime or data cache.
00:20:21And this purges all content so it's a delete of all the content so the next request would
00:20:28block and refresh that content.
00:20:30So that's all we had on the new features today and we're going to open it up to questions
00:20:39and let us know what you want to know.
00:20:43All right thank you.
00:20:44Hey guys we have a couple of questions in the chat.
00:20:50I'll start with the first one.
00:20:51After I deploy a Vercel app how do I utilize the CDN and how do you charge for it?
00:21:10Yeah great question.
00:21:11Every Vercel application gets the CDN for free and that means that when you deploy your
00:21:20application we automatically look at the contents of it and then optimize it for serving on
00:21:27the Vercel CDN.
00:21:28If you are using a framework that supports ISR we will map that run SSG static site generation
00:21:35and map that content into the ISR cache and the CDN cache.
00:21:40So out of the box you probably don't need to configure everything to get started.
00:21:46However you absolutely can if you want to so for example if you are defining an API request
00:21:53you can set cache control headers if you want to customize that for example or as Yash showed
00:22:00if you're serving static content from a different directory than the standard one you can set
00:22:07caching rule for all of those content.
00:22:11So for hobby users this is provided for free and for pro users you get an allotment of
00:22:21requests in bandwidth and after that there are rates depending on the region that you
00:22:26can find on our site.
00:22:27Second question.
00:22:31What if I already have a CDN in front of my app?
00:22:38How do I switch it to Vercel?
00:22:40So also great question.
00:22:44This is something we can absolutely support.
00:22:47So for the most part there are I think two stages that you can do to migrate.
00:22:54The first is if you're already using a CDN in front of Vercel then you can just let the
00:22:58content through so that Vercel handles the caching and the serving and then once you have
00:23:04that and also the routing rules and then once you have all of that configuration on Vercel
00:23:10then all you need to do is you can change your DNS to Vercel to point to Vercel so that
00:23:15requests come to Vercel automatically.
00:23:18We have a guide that we can link in the comments about how you can migrate to Vercel's DNS
00:23:23without any downtime.
00:23:25If you have questions about the differences in configuration we have a few guides on our
00:23:33knowledge base that help map the different concepts from each of the other CDNs to the
00:23:37Vercel concepts as well so we can provide some links for those.
00:23:41Maybe I'll toss this one over to Andrew.
00:23:49How can I analyze my CDN traffic?
00:23:52Yeah there's a couple ways.
00:23:55So the first way I demoed.
00:24:00Do you not hear me?
00:24:00Yeah okay thank you.
00:24:04So the first way I demoed earlier you can look at the CDN overview tab that shows you a snapshot
00:24:11of your project's traffic on the Vercel CDN for the given specified time period.
00:24:17Another place you can go to is the observability edge request page and you can break down all
00:24:24of your traffic by various categories.
00:24:34Yep and at the observability page in Vercel it has a lot of rich breakdowns that you can
00:24:44go to so feel free to keep digging on that.
00:24:48Another question that I see come up a lot is does the CDN handle DDoS attacks or what kind
00:24:57of security gets added or is available with the CDN?
00:25:04Yeah fantastic question.
00:25:06Vercel does come with unmetered out of the box protections for DDoS mitigations.
00:25:12What that means is that it comes for free and the DDoS mitigations there's a wide range of
00:25:19different types of attacks that Vercel protects you from out of the box.
00:25:23So we have a web application firewall and we also have L3, L4 and L7 protections so that
00:25:32attacks ranging from just a spike in the number of requests to a specific path to more sophisticated
00:25:39attacks that are cycling IP addresses or other information that we can detect and protect
00:25:47you from.
00:25:48So yes absolutely it comes out of the box for all projects.
00:25:52You can also define custom rules if you would like.
00:25:57This is available in the firewall tab in the dashboard that's a session we should also
00:26:02absolutely do sometime soon.
00:26:04And there you can define even more specific rules for your application if there's something
00:26:09in particular that you want to block.
00:26:13Security is definitely a big one you could do a whole session on that.
00:26:22Yeah I really love all the things that you guys are doing to reduce all the friction in
00:26:27all of these different flows.
00:26:29And actually got kind of a random one but I saw on Twitter there was a lot of love for
00:26:34the 2D to 3D animation on the CBN page.
00:26:38Can you show us that and maybe if you have any more words on that?
00:26:42Yeah I can show my screen again.
00:26:49Let's see for anyone who hasn't seen it.
00:26:52Yeah so on the CDN overview page we show a 2D map and if you click on the globe you get
00:27:00a 3D map.
00:27:01Now it's pretty interactive you can spin it either way you want.
00:27:07You can hover over and transition back.
00:27:12So yeah that's it.
00:27:18Thanks.
00:27:19I love the graphic and I love how easy it makes it for you to drill into the observability
00:27:24side of it where it's like I visualize where the traffic is and then I can kind of dig
00:27:29down deeper into it.
00:27:30Exactly.
00:27:32Another question kind of related to some problems that I see people run into before we had added
00:27:43some of these features and also just something that I wonder for myself because I haven't
00:27:47dug into all of the latest greatest.
00:27:50It's all so new.
00:27:51What safeguards are in place to help prevent or maybe detect like a misconfiguration or
00:27:58just generally exposing an internal service or sensitive data that you wouldn't want someone
00:28:03else to see?
00:28:04Yeah definitely.
00:28:07So there are a number of different types of protections for hiding internal routes.
00:28:15So by default projects have a deployment protection which allow you to use Vercel authentication
00:28:23or passwords to protect your site against unwanted visitors and this can protect the entire deployment.
00:28:31There are also we also have you can use cookies and authentication libraries against particular
00:28:43routes to protect against that.
00:28:46There are also custom firewall rules that you can use if you wanted to protect certain routes.
00:28:54So there's a number of different options.
00:28:56Inside the dashboard you'll see a lot of observability of what routes are being served.
00:29:04You're also per every single deployment see a deployment summary about all of the routes
00:29:10so you can inspect some information about each of those routes and functions that you see.
00:29:15So give it a shot if you have any questions I'm happy to like also answer it in more detail.
00:29:22Amazing.
00:29:34All right let's see another one that I've seen come up that maybe you guys kind of touched
00:29:41on this but maybe a little more detail.
00:29:43Can project level routes be used to route traffic to external APIs or microservices?
00:29:51Yeah absolutely.
00:29:55So there is a template maybe Ash do you want to talk about it yeah since you've been working
00:30:04on it sure I can go ahead.
00:30:06Yeah you can definitely rewrite all of your API requests to external origins.
00:30:11I'll share more on this in the coming weeks but you can set up writing rules.
00:30:15I can actually share my screen and I'm wondering.
00:30:18But if I set up a writing rule I can set for example a rewrite from my API.
00:30:35To any external origin so for example if it's like https/api-external.com
00:30:44you can do something like this to proxy your API to an external origin.
00:30:50But yeah that's definitely supported and you can also make this via the CLI
00:31:00or any other methods you'd like.
00:31:04Nice it makes it so easy when you're kind of partially switching over I know we're using
00:31:10a little bit of that with our community site so that we could build some extra features.
00:31:16So it's not all part of discourse but you know we don't want to completely leave discourse
00:31:21either right that's the the primary foundation of the community site and then we've got extra
00:31:25on top of it so that's been really convenient for us.
00:31:27Yeah it was definitely a big unlock.
00:31:31Yeah I definitely think it's really useful that you get the benefits of the caching layer,
00:31:35the firewall and also the routing rules where you can decide what to do with this nice easy
00:31:42to use syntax but then also be able to use different backends that you already have content on.
00:31:48Awesome and I think that's all the questions from the chat but I'd love to ask what's next?
00:31:56Can you tell us anything?
00:32:00Oh great question.
00:32:02Well there are a number of things next but I think one of the things that you know we talked about
00:32:09earlier that we should do more on is security and look for more content on security coming soon.
00:32:15Awesome thank you guys for joining us I know you're very busy we'll let you get
00:32:22back to your day but we really appreciate you taking the time to be here.
00:32:25Thanks so much for having us.
00:32:28Yeah thank you so much.
00:32:30Thanks all.
00:32:30All right that was great what do we have coming up next Maya?
00:32:37Oh we have we have the sandbox ask me anything on Thursday.
00:32:45So stay tuned for that.
00:32:47We also actually have I want to plug this because there are some really exciting events going on at
00:32:54the weekend for the Zero to Agent Vercel events. We've also got ship coming up in June and if you
00:33:03haven't seen already go to vercel.com/ship and you can make your own little suitcase.
00:33:09The design team absolutely cooked on this page so go check it out make sure to save the day
00:33:15for the events all around the world and yeah we've got more community sessions coming up so
00:33:21you can see all of those at community.vercel.com/events.
00:33:26Thanks everyone it's great.
00:33:28Bye!