00:00:00Hallo zusammen.
00:00:24Willkommen zur dieswöchigen Live-Session der Vercel-Community.
00:00:27Ich bin Amy und heute ist Maya bei mir.
00:00:31Hallo zusammen.
00:00:32Wir arbeiten beide im Community-Team von Vercel.
00:00:35Wir streamen das hier live auf X und YouTube,
00:00:37aber wenn ihr Fragen stellen wollt,
00:00:39meldet euch unbedingt unter [community.vercel.com/live](https://community.vercel.com/live) an,
00:00:43um am Chat teilzunehmen, damit wir eure Fragen auch sehen.
00:00:47Ganz genau. Wenn ihr euch in unserem Chat aufhaltet,
00:00:50noch eine freundliche Erinnerung: Seid respektvoll,
00:00:52haltet euch an unseren Verhaltenskodex
00:00:54und helft uns, diesen Ort für alle angenehm zu gestalten.
00:00:56In der heutigen Session dreht sich alles um das Vercel CDN.
00:01:00Kleiner Fun Fact: Wenn ihr über unsere Plattform zuschaut,
00:01:04nutzt ihr bereits das Vercel CDN – ziemlich cool.
00:01:07Falls ihr neugierig seid, wie das funktioniert:
00:01:10Jacob Parris aus unserem DX-Engineering-Team
00:01:13hat dazu kürzlich einen tollen Blog-Post
00:01:15auf der Vercel-Website veröffentlicht.
00:01:19Ich habe den Link gerade in den Chat gestellt.
00:01:22Wer ihn lesen möchte, findet ihn dort.
00:01:25Und wenn ihr die letzten News verfolgt habt,
00:01:28werdet ihr gemerkt haben, dass wir viel
00:01:30in unserem Changelog zum Thema Vercel CDN veröffentlicht haben.
00:01:33Deshalb wollten wir die Leute aus dem Team
00:01:35heute hier haben, um mehr darüber zu erzählen.
00:01:37Sie werden euch erklären, wie wir es aufgebaut haben,
00:01:40wie ihr es nutzen könnt und welche Features verfügbar sind.
00:01:43Begrüßen wir also auf der Bühne:
00:01:45Mark, Andrew und Yash, die euch mehr dazu sagen werden.
00:01:48Wir machen Platz für euch, Jungs.
00:01:51Danke, Amy und Maya.
00:01:55Hallo zusammen, mein Name ist Mark.
00:01:57Ich bin Software-Ingenieur im CDN-Team
00:01:59und bin heute hier mit Andrew und Yash.
00:02:03Ich melde mich aus dem schönen
00:02:06San Francisco Office; diese Woche ist es hier in Kalifornien ziemlich warm.
00:02:09Heute möchte ich über die neuesten
00:02:12CDN-Features sprechen, an denen wir gearbeitet haben.
00:02:15Ich freue mich sehr, sie euch vorzustellen.
00:02:18Zuerst möchte ich kurz in das Vercel CDN einführen.
00:02:21Dazu zeige ich euch ein paar Folien,
00:02:25bevor ich an Andrew übergebe,
00:02:27der uns durch eine Demo des CDN-Dashboards führen wird.
00:02:32Super. Ich wollte kurz erklären, wie das Vercel CDN funktioniert.
00:02:39Vielleicht wisst ihr es nicht, aber jedes einzelne Projekt,
00:02:42das auf Vercel bereitgestellt wird, nutzt das Vercel CDN.
00:02:44Das bekommt ihr kostenlos dazu.
00:02:46Aber oft läuft es im Hintergrund, ohne dass man genau weiß, wie es arbeitet.
00:02:51Das Vercel CDN nimmt
00:02:54Anfragen von eurem Client entgegen –
00:02:56vom Browser oder eurem Rechner –
00:02:58und leitet sie an einen Point of Presence weiter.
00:03:01Diese Points of Presence sind über die ganze Welt verteilt.
00:03:03Wir haben über 125 davon an verschiedenen geografischen Standorten.
00:03:07Von dort geht es weiter in eine Vercel-Region, wo wir die TLS-Verschlüsselung beenden
00:03:14und die Anfrage bearbeiten.
00:03:16Hier findet das Caching statt.
00:03:18Wir übernehmen hier auch das Routing.
00:03:19Falls die Anfrage kein Cache-Hit ist,
00:03:21leiten wir sie an die Funktions-Region weiter,
00:03:25wo wir z. B. Incremental Static Regeneration über eine Funktion ausführen.
00:03:29Ich werde dieses Diagramm später beim Thema Caching noch genauer erklären.
00:03:33Als Teil davon erhaltet ihr den Ingress,
00:03:35aber auch Firewall-Schutz, Routing
00:03:38und Traffic-Management-Features wie Skew Protection,
00:03:40Rolling Releases, Micro-Frontends und vieles mehr.
00:03:44Was ist also das Besondere am Vercel CDN?
00:03:49Das Vercel CDN versteht Framework-Code nativ.
00:03:52Das bedeutet: Wenn ihr ein Projekt auf Vercel bereitstellt,
00:03:56werden euer Code
00:03:57und eure Konfiguration automatisch in Artefakte übersetzt,
00:04:00die das Vercel CDN nativ verarbeiten kann.
00:04:04Bei den meisten anderen CDNs müsst ihr das selbst konfigurieren.
00:04:07Hier ist es bei der Nutzung eines der Frameworks direkt inklusive.
00:04:10Ihr bekommt integrierte Anfragenbeschleunigung
00:04:13und die erwähnte hohe Verfügbarkeit.
00:04:16Außerdem gibt es Features wie ISR,
00:04:19also Incremental Static Regeneration.
00:04:21Das ist bei uns ein First-Class-Feature.
00:04:23Das heißt, ihr könnt Seiten aktualisieren, ohne euren Code neu zu deployen.
00:04:27Dazu sendet ihr einfach
00:04:29einen API-Request oder Webhook für bestimmte Seiten.
00:04:34Zudem erhaltet ihr für jedes eurer Projekte
00:04:36einen unbegrenzten, immer aktiven DDoS-Schutz.
00:04:40Dieser ist kostenlos und wehrt Bedrohungen anwendungsübergreifend ab.
00:04:46Dazu kommen eine konfigurierbare Web Application Firewall und Bot-Management.
00:04:51In den letzten Monaten haben wir
00:04:53an einer Reihe neuer Features gearbeitet,
00:04:56die jetzt im Vercel-Dashboard verfügbar sind,
00:05:00und diese werden wir euch heute vorstellen.
00:05:02Dazu gehören ein brandneues CDN-Dashboard-Erlebnis,
00:05:06die Möglichkeit, Routing-Regeln auf Projektebene
00:05:09ohne neues Deployment zu definieren,
00:05:12ein neuer Caching-Tab
00:05:13und die Option, bis zu einer Million Redirects zu erstellen.
00:05:18Damit übergebe ich an Andrew,
00:05:22der uns das CDN-Dashboard zeigt. Andrew?
00:05:27Danke, Mark. Vielen Dank.
00:05:29Hallo zusammen, ich bin Andrew Gazek.
00:05:31Ich bin Software-Ingenieur im CDN-Team, wie man vielleicht merkt.
00:05:36Ich lebe in New Hampshire.
00:05:38Heute sind es etwa 2 Grad und sonnig, also noch ziemlich kalt.
00:05:45Ich freue mich schon auf die warmen Sommertage.
00:05:49Ich werde jetzt meinen Bildschirm teilen
00:05:53und euch durch eine kleine Demo-App führen,
00:05:56die wir für die heutige Community-Session gebaut haben.
00:05:59Wir haben hier diese Next.js-App.
00:06:02Sie enthält verschiedene Routen für einen Blog.
00:06:08Wir können uns ein Dashboard ansehen.
00:06:10Es gibt eine API-Route, die Daten zurückgibt, und so weiter.
00:06:16Aber darum geht es heute nicht primär.
00:06:18Wir sind wegen der Änderungen am Dashboard hier.
00:06:22Im Vercel-Dashboard werdet ihr
00:06:25jetzt diesen neuen CDN-Tab bemerken.
00:06:28Wenn ihr darauf klickt,
00:06:30gelangt ihr auf diese Übersichtseite, die
00:06:35alle Vercel-Regionen auflistet, die
00:06:39euer Projekt im gewählten Zeitraum bedienen.
00:06:45Hier sehen wir die letzten 12 Stunden.
00:06:47Wir sehen, dass Traffic aus San Francisco und
00:06:49Washington auf unsere Seite zugreift.
00:06:52Ihr könnt mit der Maus darüberfahren, um Details zu sehen.
00:06:55Ihr könnt die Observability-Ansicht öffnen,
00:06:58um tiefer in die Traffic-Daten einzutauchen.
00:07:04Ein cooles Feature ist die 3D-Karte,
00:07:08man kann aber auch zur 2D-Karte zurückkehren
00:07:10und hier weitere Observability-Daten einsehen,
00:07:17die ebenfalls auf die spezifischen Analyse-Seiten verlinken.
00:07:22Das ist die Übersichtseite.
00:07:27Sie soll euch einen schnellen Überblick über
00:07:30den Traffic eures Projekts geben
00:07:35und zeigen, wo eure Funktionen lokalisiert sind.
00:07:38Die Funktions-Region dieses Projekts ist beispielsweise Washington.
00:07:44Als Nächstes möchte ich Redirects demonstrieren.
00:07:48Genauer gesagt: Bulk Redirects.
00:07:52Oh nein, das sollte eigentlich klappen.
00:08:00Mal sehen. Ich versuche es mal mit einem anderen Projekt.
00:08:07Okay, versuchen wir ein anderes Projekt.
00:08:18Entschuldigt die Umstände.
00:08:22Wir haben hier dieses Projekt für Bulk Redirects.
00:08:27Versuchen wir, dort ein paar Redirects hinzuzufügen.
00:08:30Um einen Redirect zu erstellen,
00:08:35geht ihr auf diese Seite und klickt auf "Manual".
00:08:37Nehmen wir an, ich möchte /demo weiterleiten nach,
00:08:44mal sehen, /about/blog/2020,
00:08:51irgendwas in der Art.
00:08:57Klickt auf "Create"; es wird im Hintergrund erstellt
00:09:02und dann erscheint dieses Fenster zum Überprüfen der Änderungen.
00:09:07Momentan sind diese Änderungen noch nicht live in der Produktion.
00:09:11Sie befinden sich in einer Staging-Umgebung,
00:09:13wo ihr den neuen Redirect testen könnt.
00:09:18Hier klicken – okay, die Seite existiert gerade nicht.
00:09:24Aber genau so funktioniert es.
00:09:27Wenn es live gehen soll, klickt auf "Publish".
00:09:30Soll es im Staging bleiben, klickt auf "Cancel".
00:09:34Ihr könnt die Staging-Änderungen dann hier einsehen.
00:09:39Sobald wir das in die Produktion publizieren,
00:09:42werden diese (temporären) Änderungen übernommen.
00:09:45Wir sollten es dann in der Produktion sehen.
00:09:58Jetzt könnt ihr suchen.
00:10:01Ihr könnt eure Historie einsehen.
00:10:05Ihr könnt die Live-Änderungen mit früheren Versionen vergleichen
00:10:14und diese Version bei Bedarf wiederherstellen.
00:10:17Klickt auf "Restore", und dann sollte /demo nicht mehr existieren.
00:10:26Perfekt. Großartig. Ich übergebe nun an Yash für seine Demo.
00:10:34Danke, Andrew. Hallo zusammen.
00:10:38Mein Name ist Yash. Ich bin Engineering-Praktikant im CDN-Team
00:10:42und arbeite ebenfalls im Hauptquartier in San Francisco.
00:10:55An der University of California San Francisco.
00:10:58Ich bin Engineering-Praktikant an der University of California San Francisco.
00:11:03Ich bin Engineering-Praktikant an der University of California San Francisco.
00:11:08Ich bin Engineering-Praktikant an der University of California San Francisco.
00:11:14Ich bin Engineering-Praktikant an der University of California San Francisco.
00:11:18Ich bin Engineering-Praktikant an der University of California San Francisco.
00:11:23Ich bin Engineering-Praktikant an der University of California San Francisco.
00:11:26Ich bin Engineering-Praktikant an der University of California San Francisco.
00:11:32Ich bin Engineering-Praktikant an der University of California San Francisco.
00:11:37Ich bin Engineering-Praktikant an der University of California San Francisco.
00:11:41Ich bin Engineering-Praktikant an der University of California San Francisco.
00:11:46Ich bin Engineering-Praktikant an der University of California San Francisco.
00:11:50Ich bin Engineering-Praktikant an der University of California San Francisco.
00:11:57Ich bin Engineering-Praktikant an der University of California San Francisco.
00:12:02Ich bin Engineering-Praktikant an der University of California San Francisco.
00:12:07Ich bin Engineering-Praktikant an der University of California San Francisco.
00:12:13Ich bin Engineering-Praktikant an der University of California San Francisco.
00:12:17Ich bin Engineering-Praktikant an der University of California San Francisco.
00:12:22Ich bin Engineering-Praktikant an der University of California San Francisco.
00:12:27Ich bin Engineering-Praktikant an der University of California San Francisco.
00:12:32Ich bin Engineering-Praktikant an der University of California San Francisco.
00:12:37Ich bin Engineering-Praktikant an der University of California San Francisco.
00:12:41Ich bin Engineering-Praktikant an der University of California San Francisco.
00:12:45Müssten wir dasselbe im Code machen, müssten wir das Projekt neu deployen.
00:12:49Aber jetzt geschieht es sofort.
00:12:53Nun erstelle ich eine zweite Route. Diese wird etwas komplexer.
00:12:56Statt das Formular wie beim letzten Mal auszufüllen, tippe ich hier einfach ein, was ich möchte.
00:13:00Wir werden die KI nutzen, um die Route zu generieren.
00:13:02Ich habe ein Dashboard und erstelle gerade Version 2, die ich langsam nur für Beta-Nutzer ausrollen will.
00:13:08Ich kann also unser Dashboard auf Version 2 des Dashboards umschreiben lassen.
00:13:14Schauen wir mal, ob der User ein Beta-Cookie hat, das auf “true” gesetzt ist.
00:13:21Jetzt können wir die Regel generieren, und innerhalb weniger Sekunden sollte die KI das Formular für uns ausfüllen.
00:13:27Wir können uns die erstellte Regel ansehen. Sie schreibt “dashboard” auf “dashboard-v2” um.
00:13:32Das bedeutet, dass der Nutzer in seiner URL weiterhin “/dashboard” sieht,
00:13:35ihm aber die neuen Inhalte des neuen Dashboards angezeigt werden.
00:13:39Und hier gibt es diese Bedingung. Das bedeutet, dass die Rewrite-Regel nur greift,
00:13:43wenn der Nutzer ein Cookie namens “beta” hat, das den Wert “true” besitzt.
00:13:46Wenn sie dieses Cookie haben, sehen sie das neue Dashboard, andernfalls das alte.
00:13:53Auch das können wir wieder ganz schnell testen.
00:13:58Das hier ist also das alte Dashboard. Wenn wir nun aber ein Cookie namens “beta” auf “true” setzen
00:14:09und die Seite neu laden, sehen wir das neue Dashboard, obwohl unsere URL immer noch “/dashboard” und nicht “/dashboard/v2” lautet.
00:14:16Das liegt daran, dass wir einen Rewrite statt eines Redirects verwendet haben, und wir können es jetzt veröffentlichen.
00:14:22Die letzte Rewrite-Regel, die ich euch zeigen möchte, betrifft Caching-Header.
00:14:26Dies ist etwas, das man einstellen kann, um die Performance der Seite zu verbessern,
00:14:30und insbesondere möchte ich unsere statischen Bilder optimieren.
00:14:33Ich kann also angeben, dass wir das Caching für statische Bilder optimieren wollen,
00:14:41indem wir den Cache-Control-Header für unsere Bilder auf “public, max-age=31536000, immutable” setzen.
00:14:52Und auch hier können wir die Regel mit der KI generieren.
00:14:55Jetzt erstellen wir diese Regel, die für alle Bilder einen Cache von einem Jahr festlegt.
00:14:59Anstatt dass der Browser jedes Mal den Server anfragt, um das Bild zu laden,
00:15:03wird er versuchen, es lokal abzurufen, was die Performance verbessert und Kosten spart.
00:15:08Es gibt noch viele andere Werte, auf die man den Cache-Control-Header setzen kann,
00:15:11aber für statische Assets halte ich diesen für den besten.
00:15:14Ihr könnt die Route also wieder erstellen und anschließend veröffentlichen.
00:15:19Wie ich bereits erwähnt habe, können all diese Routen auch im Code definiert werden.
00:15:23Wir haben hier dieses Modul, mit dem man
00:15:26alle Routen aus dem Dashboard in etwas umwandeln kann, das man einfach kopieren und
00:15:30entweder in die vercel.json oder vercel.ts einfügen kann, je nachdem, was man bevorzugt.
00:15:35Der Hauptvorteil, sie im Code zu speichern, liegt in den Best Practices für die Versionskontrolle,
00:15:40aber wenn ihr hier Änderungen vornehmt, müsst ihr euer Projekt neu deployen, damit sie live gehen.
00:15:46Als Nächstes möchte ich euch die Verlaufsseite (History) zeigen.
00:15:49Diese ähnelt der Seite für Bulk-Redirects, die Andrew vorhin demonstriert hat.
00:15:52Hier könnt ihr die vergangenen Versionen und Änderungen einsehen.
00:15:55Nehmen wir an, wir wollen unsere letzte Änderung rückgängig machen – das Hinzufügen der Caching-Regel.
00:16:00Wir können sie sofort wiederherstellen, indem wir einfach auf diesen “Restore”-Button klicken.
00:16:04Und fast augenblicklich ist die Regel verschwunden – wie man sieht, ist sie nicht mehr da.
00:16:09Man kann den Verlauf auch durchsuchen und nach Typ filtern, um sich zum Beispiel nur alle Redirects anzeigen zu lassen.
00:16:14Und ja, das ist das Projekt, an dem wir gerade arbeiten.
00:16:16Alle Funktionen, die ich gezeigt habe, sind auch über die API, das CLI und das SDK verfügbar.
00:16:22Vielen Dank, und damit übergebe ich an Mark.
00:16:26Cool, vielen Dank Yash, das war wirklich beeindruckend.
00:16:29Besonders das Feature mit der natürlichen Sprache gefällt mir.
00:16:31Ich werde nun das letzte Feature der neuen CDN-Tabs vorstellen: den Caching-Tab.
00:16:41Genau wie Yash über das Setzen eines Cache-Control-Headers gesprochen hat,
00:16:46erhaltet ihr im Vercel CDN standardmäßig kostenloses Caching, wenn ihr Features wie
00:16:53Incremental Static Regeneration nutzt oder die Cache-Header selbst steuert.
00:16:56Hier im Caches-Tab oben sehen wir dieses Caching-Diagramm.
00:17:04Ich wollte mir kurz Zeit nehmen, um das zu erklären, da es hier im Gegensatz zu anderen CDNs
00:17:09tatsächlich mehrere Ebenen gibt, die euch helfen, eure Seite zu optimieren.
00:17:12Wenn ihr ISR verwendet, ist dies wieder das Diagramm, das wir vorhin gesehen haben.
00:17:17Die Anfrage geht sehr nah am Client ein.
00:17:20Sie wird an die nächstgelegene Vercel-Region weitergeleitet.
00:17:22Es gibt weltweit 20 Regionen, in denen die Anfrage gegen den CDN-Cache abgeglichen wird.
00:17:27Gibt es hier einen “Miss”, kann sie an eure Funktions-Region gehen, wo es einen weiteren Cache
00:17:33für euer ISR gibt. Falls die Funktion ausgeführt werden muss, gibt es auch einen Cache,
00:17:39den ihr für Datenanfragen an eure Backends nutzen könnt, um diese zu entlasten.
00:17:43Es gibt verschiedene Arten von Anfragen, die ihr über Vercel stellen könnt.
00:17:47Wenn ihr zum Beispiel eine reine API-Anfrage stellt und Cache-Control-Header verwendet –
00:17:52ein Blick in die Dokumentation zeigt: Auch hier wird der CDN-Cache genutzt.
00:17:56Der ISR-Cache wird übersprungen, aber der Funktions- und Runtime-Cache bleiben bestehen.
00:18:00Und schließlich: Wenn ihr im Vercel CDN einen Rewrite zu einer externen Origin durchführt –
00:18:07sagen wir, ihr proxied zum Vercel-Backend – profitiert ihr von Vercel CDN-Features wie
00:18:14dem Cache und der Firewall, bevor die Anfrage zur externen Origin weitergeht.
00:18:18Das bringt uns zur Funktion “Purge Cache” (Cache leeren).
00:18:22Angenommen, ihr möchtet den Inhalt aus irgendeinem Grund revalidieren.
00:18:26Auf dieser Seite habe ich ein Beispiel mit ISR, bei dem ein Fetch mit einem spezifischen Cache-Tag verwendet wird.
00:18:36Dieser hier heißt “fetch-data-tag”.
00:18:38Man sieht hier, dass die Seite vor etwa einer Stunde neu generiert wurde und diesen Tag nutzt.
00:18:45Wenn ich diesen Cache leeren möchte, damit die Seite neu generiert wird, habe ich mehrere Optionen.
00:18:54Ich kann hier nach Cache-Tag löschen und den Tag “fetch-data” eingeben.
00:18:58Dann kann ich wählen, ob ich den Inhalt invalidieren oder löschen möchte.
00:19:04“Invalidate” erlaubt es uns, eine veraltete (stale) Seite auszuliefern, während diese im Hintergrund
00:19:09neu generiert wird. Deshalb wird dies empfohlen, damit die Nutzer keine
00:19:14Latenz bei der nächsten Anfrage spüren.
00:19:16Sagen wir, ich mache das jetzt. Ich klicke auf “Purge”, ja, ich möchte löschen.
00:19:21Wenn ich die Seite aktualisiere, hat sich die Zeit noch nicht geändert, sie läuft weiter.
00:19:27Aber wenn ich sie noch einmal aktualisiere, sieht man, dass die Zeit zurückgesetzt wurde –
00:19:33sie wurde frisch generiert.
00:19:34Dasselbe kann ich auch beim Löschen von Inhalten tun.
00:19:39Wenn ich den Inhalt lösche und auf “Purge” klicke, sieht man beim nächsten Neuladen,
00:19:45dass die Zeit sofort zurückgesetzt wird.
00:19:48Das liegt daran, dass dies wie ein blockierendes Revalidieren war: Die nächste Anfrage wartete,
00:19:53bis die Seite neu generiert war, bevor sie ausgeliefert wurde.
00:19:55Wir empfehlen daher “Invalidate”, um Inhalte zu aktualisieren, da so veraltete Inhalte
00:20:00ausgeliefert werden können, während die Neugenerierung im Hintergrund läuft.
00:20:05Ihr könnt nach Cache-Tag leeren, aber ebenso nach einem Quellbild auf demselben Weg.
00:20:11Es ist auch möglich, den gesamten Cache-Inhalt zu leeren, und zwar auf den zwei Ebenen,
00:20:16die wir vorhin besprochen haben: entweder im CDN-Cache oder im Runtime- bzw. Daten-Cache.
00:20:21Dadurch werden alle Inhalte gelöscht, sodass die nächste Anfrage blockiert wird,
00:20:28bis der Inhalt frisch geladen ist.
00:20:30Das war alles, was wir heute an neuen Features zeigen wollten. Wir öffnen nun die Runde
00:20:39für Fragen. Lasst uns wissen, was ihr wissen möchtet.
00:20:43Alles klar, danke.
00:20:44Hey Leute, wir haben ein paar Fragen im Chat.
00:20:50Ich fange mal mit der ersten an.
00:20:51Wie nutze ich das CDN, nachdem ich eine Vercel-App deployed habe, und wie wird das abgerechnet?
00:21:10Ja, gute Frage.
00:21:11Jede Vercel-Anwendung erhält das CDN kostenlos. Das bedeutet, wenn ihr eure
00:21:20Anwendung deployt, analysieren wir automatisch deren Inhalte und optimieren sie
00:21:27für die Auslieferung über das Vercel CDN.
00:21:28Wenn ihr ein Framework nutzt, das ISR unterstützt, führen wir die statische Seitengenerierung (SSG) aus
00:21:35und übertragen diese Inhalte in den ISR-Cache und den CDN-Cache.
00:21:40Man muss also anfangs eigentlich gar nichts konfigurieren, um loszulegen.
00:21:46Man kann es aber natürlich tun, wenn man möchte. Wenn ihr zum Beispiel eine API-Anfrage definiert,
00:21:53könnt ihr Cache-Control-Header setzen, um das anzupassen. Oder, wie Yash gezeigt hat,
00:22:00wenn ihr statische Inhalte aus einem anderen Verzeichnis als dem Standardverzeichnis ausliefert,
00:22:07könnt ihr dafür Caching-Regeln festlegen.
00:22:11Für Hobby-Nutzer ist dies kostenlos. Pro-Nutzer erhalten ein gewisses Kontingent
00:22:21an Anfragen und Bandbreite. Danach fallen Gebühren an, die je nach Region variieren
00:22:26und auf unserer Website eingesehen werden können.
00:22:27Zweite Frage:
00:22:31Was ist, wenn ich bereits ein CDN vor meiner App geschaltet habe?
00:22:38Wie wechsle ich zu Vercel?
00:22:40Ebenfalls eine sehr gute Frage.
00:22:44Das ist etwas, das wir absolut unterstützen können.
00:22:47Für die Migration gibt es im Grunde zwei Phasen.
00:22:54Erstens: Wenn ihr bereits ein CDN vor Vercel nutzt, könnt ihr den Inhalt einfach durchleiten,
00:22:58sodass Vercel das Caching, die Auslieferung und auch die Routing-Regeln übernimmt.
00:23:04Sobald diese gesamte Konfiguration auf Vercel steht,
00:23:10müsst ihr nur noch euren DNS auf Vercel umstellen, damit alle
00:23:15Anfragen automatisch direkt bei Vercel ankommen.
00:23:18Wir haben eine Anleitung, die wir in den Kommentaren verlinken können, wie man ohne
00:23:23Ausfallzeiten zu Vercels DNS migriert.
00:23:25Bei Fragen zu den Konfigurationsunterschieden haben wir mehrere Leitfäden in unserer
00:23:33Knowledge Base, die helfen, die Konzepte anderer CDNs auf die
00:23:37Vercel-Konzepte zu übertragen. Wir können dafür einige Links bereitstellen.
00:23:41Vielleicht gebe ich diese Frage an Andrew weiter:
00:23:49Wie kann ich meinen CDN-Traffic analysieren?
00:23:52Ja, da gibt es zwei Wege.
00:23:55Den ersten habe ich vorhin demonstriert.
00:24:00Könnt ihr mich nicht hören?
00:24:00Doch, jetzt ja. Danke.
00:24:04Den ersten Weg habe ich vorhin gezeigt: Ihr könnt den CDN-Übersichts-Tab nutzen, der eine Momentaufnahme
00:24:11des Traffics eures Projekts im Vercel CDN für einen bestimmten Zeitraum anzeigt.
00:24:17Ein weiterer Ort ist die “Observability Edge Request”-Seite. Dort könnt ihr euren gesamten
00:24:24Traffic nach verschiedenen Kategorien aufschlüsseln.
00:24:34Genau, die Observability-Seite in Vercel bietet viele detaillierte Analysen,
00:24:44die ihr nutzen könnt – schaut euch das dort einfach mal genauer an.
00:24:48Eine weitere Frage, die oft gestellt wird: Schützt das CDN vor DDoS-Angriffen, oder welche
00:24:57Art von Sicherheit ist mit dem CDN verfügbar?
00:25:04Ja, eine fantastische Frage.
00:25:06Vercel bietet standardmäßig einen unlimitierten Schutz vor DDoS-Angriffen.
00:25:12Das bedeutet, dass dieser Schutz kostenlos enthalten ist und eine große Bandbreite
00:25:19an verschiedenen Angriffsarten abdeckt, vor denen Vercel euch direkt schützt.
00:25:23Wir haben eine Web Application Firewall und bieten L3-, L4- und L7-Schutz,
00:25:32sodass Angriffe – angefangen bei simplen Peaks in der Anfrageanzahl auf einen bestimmten Pfad bis hin zu
00:25:39komplexeren Angriffen mit wechselnden IP-Adressen oder anderen Merkmalen – erkannt werden und wir euch
00:25:47davor schützen können.
00:25:48Ja, das ist absolut standardmäßig für alle Projekte mit dabei.
00:25:52Man kann aber auch eigene Regeln definieren, wenn man möchte.
00:25:57Dies ist im Firewall-Tab im Dashboard möglich. Dazu sollten wir demnächst
00:26:02unbedingt mal eine eigene Session machen.
00:26:04Dort könnt ihr noch spezifischere Regeln für eure Anwendung festlegen, falls ihr
00:26:09etwas ganz Bestimmtes blockieren wollt.
00:26:13Sicherheit ist definitiv ein großes Thema, dazu könnte man eine ganze Session füllen.
00:26:22Ja, ich finde es toll, wie ihr versucht, die Hürden in all diesen
00:26:27verschiedenen Abläufen abzubauen.
00:26:29Ich habe hier noch eine etwas ausgefallenere Frage: Auf Twitter gab es viel Begeisterung für
00:26:34die 2D-zu-3D-Animation auf der CDN-Seite.
00:26:38Könnt ihr uns das zeigen und vielleicht ein paar Worte dazu sagen?
00:26:42Ja, ich kann meinen Bildschirm noch einmal teilen.
00:26:49Schauen wir mal, für alle, die es noch nicht gesehen haben.
00:26:52Genau, auf der CDN-Übersichtsseite zeigen wir eine 2D-Karte, und wenn man auf den Globus klickt, bekommt man
00:27:00eine 3D-Ansicht.
00:27:01Sie ist ziemlich interaktiv, man kann sie in jede beliebige Richtung drehen.
00:27:07Man kann mit der Maus drüberfahren und wieder zurückwechseln.
00:27:12Ja, das ist es im Grunde.
00:27:18Danke.
00:27:19Ich liebe die Grafik und wie einfach es dadurch wird, in die Analyse einzusteigen.
00:27:24Man sieht, wo der Traffic herkommt, und kann dann von dort aus tiefer
00:27:29ins Detail gehen.
00:27:30Genau.
00:27:32Eine weitere Frage zu Problemen, die mir früher oft begegnet sind,
00:27:43bevor wir diese Features hatten – und auch etwas, das ich mich selbst frage, da ich noch nicht
00:27:47alles Neue im Detail kenne.
00:27:50Es ist alles noch so neu.
00:27:51Welche Schutzmaßnahmen gibt es, um Fehlkonfigurationen zu verhindern oder zu erkennen,
00:27:58damit man nicht versehentlich interne Dienste oder sensible Daten preisgibt,
00:28:03die niemand sehen sollte?
00:28:04Ja, definitiv.
00:28:07Es gibt verschiedene Arten von Schutzmechanismen für interne Routen.
00:28:15Standardmäßig verfügen Projekte über einen “Deployment Protection”, mit dem man Vercel-Authentifizierung
00:28:23oder Passwörter nutzen kann, um die Seite vor unerwünschten Besuchern zu schützen – das kann das gesamte Deployment absichern.
00:28:31Außerdem kann man Cookies und Authentifizierungs-Bibliotheken für bestimmte
00:28:43Routen einsetzen, um diese zu schützen.
00:28:46Es gibt auch benutzerdefinierte Firewall-Regeln, falls man bestimmte Routen absichern möchte.
00:28:54Es gibt also eine ganze Reihe von Optionen.
00:28:56Im Dashboard sieht man sehr genau, welche Routen gerade bedient werden.
00:29:04Man sieht außerdem für jedes einzelne Deployment eine Zusammenfassung aller Routen,
00:29:10sodass man Informationen zu jeder dieser Routen und Funktionen einsehen kann.
00:29:15Probiert es einfach mal aus, und bei weiteren Fragen helfe ich gerne detaillierter weiter.
00:29:22Großartig.
00:29:34Mal sehen... noch eine Frage, die mir aufgefallen ist – ihr habt das vielleicht schon kurz
00:29:41angesprochen, aber vielleicht könnt ihr noch etwas mehr ins Detail gehen.
00:29:43Können Routen auf Projektebene genutzt werden, um Traffic an externe APIs oder Microservices zu leiten?
00:29:51Ja, absolut.
00:29:55Es gibt da ein Template... Yash, möchtest du vielleicht etwas dazu sagen? Du hast ja
00:30:04daran gearbeitet.
00:30:06Klar, gerne.
00:30:11Man kann definitiv alle API-Anfragen an externe Origins umschreiben (rewrite).
00:30:15Ich werde dazu in den nächsten Wochen noch mehr zeigen, aber man kann Routing-Regeln aufsetzen.
00:30:18Ich kann dazu kurz meinen Bildschirm teilen.
00:30:35Wenn ich eine Rewrite-Regel erstelle, kann ich zum Beispiel festlegen,
00:30:44dass Anfragen an meine API an eine externe Adresse wie “[https://api-external.com](https://www.google.com/search?q=https://api-external.com)” weitergeleitet werden.
00:30:50So kann man seine API zu einer externen Origin proxien.
00:31:00Das wird voll unterstützt und lässt sich auch über das CLI oder andere Methoden einrichten.
00:31:04Cool, das macht es so einfach, wenn man gerade mitten im Umzug ist. Ich weiß, dass wir
00:31:10das teilweise für unsere Community-Seite nutzen, um zusätzliche Features einzubauen.
00:31:16So muss nicht alles über Discourse laufen, aber wir wollen Discourse
00:31:21natürlich auch nicht ganz aufgeben, da es das Fundament unserer Seite ist. Das war für uns sehr praktisch.
00:31:25Ja, das war definitiv ein wichtiger Meilenstein.
00:31:27Ich finde es extrem nützlich, dass man die Vorteile der Caching-Ebene,
00:31:31der Firewall und der Routing-Regeln mit dieser einfach zu bedienenden Syntax kombinieren kann,
00:31:35aber gleichzeitig verschiedene Backends nutzen kann, auf denen bereits Inhalte liegen.
00:31:42Großartig. Ich glaube, das waren alle Fragen aus dem Chat. Aber ich würde gerne wissen: Was kommt als Nächstes?
00:31:48Könnt ihr uns schon etwas verraten?
00:31:56Oh, gute Frage.
00:32:00Es stehen einige Dinge an, aber ich denke, ein Thema, über das wir
00:32:02vorhin schon gesprochen haben und das wir vertiefen sollten, ist Sicherheit. Achtet also demnächst auf mehr Inhalte dazu.
00:32:09Klasse, danke euch fürs Dabeisein. Ich weiß, ihr habt viel zu tun, also lassen wir euch
00:32:15wieder an die Arbeit. Wir wissen es sehr zu schätzen, dass ihr euch die Zeit genommen habt.
00:32:22Vielen Dank für die Einladung.
00:32:25Ja, vielen herzlichen Dank.
00:32:28Danke an alle.
00:32:30Alles klar, das war super. Was steht als Nächstes an, Maya?
00:32:30Oh, wir haben am Donnerstag das Sandbox “Ask Me Anything”.
00:32:37Seid also gespannt darauf.
00:32:45Außerdem möchte ich noch kurz Werbung machen, denn am Wochenende finden einige wirklich spannende
00:32:47Events für die “Zero to Agent Vercel”-Reihe statt. Dann haben wir im Juni noch “Ship” vor uns, und falls ihr
00:32:54es noch nicht gesehen habt: Geht auf [vercel.com/ship](https://vercel.com/ship) und erstellt euren eigenen kleinen Koffer.
00:33:03Das Design-Team hat sich bei dieser Seite wirklich selbst übertroffen. Schaut es euch an, merkt euch das Datum
00:33:09für die weltweiten Events vor und ja, wir haben noch mehr Community-Sessions geplant.
00:33:15Alle Termine findet ihr unter [community.vercel.com/events](https://www.google.com/search?q=https://community.vercel.com/events).
00:33:21Danke an alle, es war toll.
00:33:26Tschüss!
00:33:28안녕!