00:00:00Halo semuanya.
00:00:24Selamat datang di sesi langsung komunitas Vercel minggu ini.
00:00:27Saya Amy dan saya ditemani oleh Maya hari ini.
00:00:31Halo semuanya.
00:00:32Kami berdua bekerja di tim komunitas Vercel.
00:00:35Kami menyiarkan ini secara langsung di X dan YouTube,
00:00:37tapi jika Anda ingin mengajukan pertanyaan,
00:00:39pastikan untuk masuk ke [community.vercel.com/live](https://community.vercel.com/live)
00:00:43untuk bergabung dalam obrolan agar kami bisa melihat pertanyaan tersebut.
00:00:47Tentu saja. Jika Anda sedang berada di obrolan kami,
00:00:50sekadar pengingat ramah untuk tetap sopan,
00:00:52ikuti kode etik kami,
00:00:54dan bantu kami menjaga ruang ini tetap nyaman bagi semua orang.
00:00:56Jadi sesi hari ini adalah tentang Vercel CDN.
00:01:00Fakta menarik, jika Anda menonton dari platform kami,
00:01:04itu sebenarnya menggunakan Vercel CDN, sangat keren.
00:01:07Jadi jika Anda penasaran tentang itu,
00:01:10Jacob Parris, rekan dari tim insinyur DX,
00:01:13baru-baru ini merilis postingan blog yang bagus tentang
00:01:15implementasi tersebut di situs web Vercel.
00:01:19>> Saya baru saja menaruh tautannya di obrolan,
00:01:22jadi jika ada yang ingin membacanya, sudah tersedia di sana.
00:01:25Lalu jika Anda memperhatikan,
00:01:28kami sebenarnya telah merilis banyak hal di
00:01:30catatan perubahan kami yang berkaitan dengan Vercel CDN.
00:01:33Jadi kami ingin mengundang orang-orang dari
00:01:35tim tersebut di sini untuk bercerita lebih lanjut,
00:01:37dan memberi tahu Anda semua cara kami membangunnya,
00:01:40cara menggunakannya, dan semua fitur yang tersedia.
00:01:43Jadi, selamat datang di panggung,
00:01:45Mark, Andrew, dan Yash di sini untuk membahasnya bersama Anda.
00:01:48Kami persilakan waktunya untuk kalian, teman-teman.
00:01:51>> Terima kasih, Amy dan Maya.
00:01:55Halo semuanya, nama saya Mark.
00:01:57Saya seorang Insinyur Perangkat Lunak di tim CDN,
00:01:59dan saya di sini bersama Andrew dan Yash.
00:02:03Saya sedang berada di kantor Vercel yang bagus
00:02:06di San Francisco, cukup hangat minggu ini di California.
00:02:09Hari ini, saya ingin berbicara tentang
00:02:12fitur-fitur CDN terbaru yang telah kami kerjakan.
00:02:15Jadi saya sangat senang untuk membahasnya.
00:02:18Pertama, saya ingin memperkenalkan sedikit tentang Vercel CDN.
00:02:21Jadi saya akan membagikan beberapa slide yang kami miliki,
00:02:25lalu saya akan menyerahkannya kepada Andrew,
00:02:27yang akan mulai mendemokan dasbor CDN.
00:02:32Luar biasa. Saya hanya ingin menjelaskan sedikit tentang cara kerja Vercel CDN.
00:02:39Anda mungkin tidak menyadarinya, tapi setiap proyek
00:02:42yang diterapkan di Vercel menggunakan Vercel CDN.
00:02:44Anda mendapatkan ini secara gratis.
00:02:46Tapi ini bisa menjadi sesuatu yang tersembunyi dan mungkin Anda tidak tahu cara kerjanya.
00:02:51Jadi, Vercel CDN,
00:02:54menerima permintaan dari klien Anda,
00:02:56dari browser, atau dari mesin Anda,
00:02:58dan memasukkannya ke dalam titik kehadiran (PoP).
00:03:01Titik kehadiran ini tersebar di seluruh dunia.
00:03:03Kami memiliki lebih dari 125 titik yang tersebar secara geografis di seluruh dunia.
00:03:07Kemudian permintaan diteruskan ke wilayah Vercel di mana kami mengakhiri TLS,
00:03:14dan kemudian kami menangani permintaan tersebut.
00:03:16Di sinilah kami melakukan caching.
00:03:18Kami juga melakukan perutean (routing).
00:03:19Jika permintaan tersebut bukan merupakan cache hit,
00:03:21kami dapat meneruskannya ke wilayah fungsi di mana kami dapat melakukan
00:03:25regenerasi statis inkremental (ISR) yang disajikan dari sebuah fungsi dan seterusnya.
00:03:29Saya akan membahas diagram ini lebih detail saat kita bicara soal caching nanti.
00:03:33Sebagai bagian dari ini, Anda mendapatkan ingress,
00:03:35Anda juga mendapatkan firewall, perutean,
00:03:38fitur manajemen lalu lintas seperti perlindungan skew,
00:03:40rilis bertahap, micro front-end, dan banyak lagi.
00:03:44Jadi apa yang istimewa dari Vercel CDN?
00:03:49Vercel CDN memahami kode kerangka kerja (framework) secara native.
00:03:52Artinya, saat Anda menerapkan proyek ke Vercel,
00:03:56kode yang Anda miliki,
00:03:57konfigurasinya secara otomatis diterjemahkan ke dalam
00:04:00artefak yang diproses oleh Vercel CDN secara native.
00:04:04Pada kebanyakan CDN lain, Anda harus mengonfignya sendiri.
00:04:07Ini sudah tersedia langsung jika Anda menggunakan salah satu framework kami.
00:04:10Anda mendapatkan akselerasi permintaan bawaan,
00:04:13serta ketersediaan tinggi yang saya sebutkan tadi.
00:04:16Anda juga mendapatkan fitur seperti ISR,
00:04:19yaitu regenerasi statis inkremental.
00:04:21Ini adalah fitur utama kami,
00:04:23yang berarti Anda dapat meregenerasi halaman tanpa menyebarkan ulang
00:04:27kode Anda, cukup dengan mengirimkan
00:04:29permintaan API atau webhook dan menargetkan halaman tertentu saja.
00:04:34Lalu sekali lagi, Anda mendapatkan integrasi DDoS
00:04:36tanpa meteran yang selalu aktif untuk setiap proyek Anda.
00:04:40Ini gratis dan secara konsisten menangani ancaman di seluruh aplikasi,
00:04:46serta dilengkapi dengan firewall aplikasi web (WAF) dan manajemen bot yang dapat dikonfigurasi.
00:04:51Selama beberapa bulan terakhir,
00:04:53kami telah mengerjakan sejumlah fitur baru yang
00:04:56tersedia di dalam dasbor Vercel,
00:05:00dan kami akan meninjau fitur-fitur tersebut hari ini.
00:05:02Fitur-fitur itu mencakup pengalaman dasbor CDN yang benar-benar baru,
00:05:06kemampuan untuk menentukan aturan perutean pada
00:05:09tingkat proyek tanpa perlu melakukan deployment baru,
00:05:12tab caching yang baru,
00:05:13dan juga kemampuan untuk menentukan hingga satu juta pengalihan (redirect).
00:05:18Dengan itu, saya akan menyerahkannya kepada Andrew,
00:05:22yang akan memandu kita melihat dasbor CDN. Andrew?
00:05:27>> Terima kasih, Mark. Terima kasih.
00:05:29Halo semuanya, saya Andrew Gazek.
00:05:31Saya seorang insinyur perangkat lunak di tim CDN, seperti yang Anda lihat.
00:05:36Saya berlokasi di New Hampshire.
00:05:38Hari ini suhunya sekitar 35 derajat dan cerah, masih cukup dingin.
00:05:45Sangat menantikan hari-hari musim panas yang hangat segera tiba.
00:05:49Hari ini, saya akan membagikan layar saya,
00:05:53dan saya akan memandu Anda melalui aplikasi demo kecil yang kami
00:05:56bangun untuk sesi komunitas hari ini.
00:05:59Kami memiliki aplikasi Next.js ini.
00:06:02Aplikasi ini berisi sekumpulan rute untuk sebuah blog.
00:06:08Kita bisa melihat dasbornya.
00:06:10Ada rute API yang mengembalikan data, dan sebagainya.
00:06:16Tapi bukan itu alasan kita di sini.
00:06:18Kita di sini untuk melihat perubahan pada dasbor.
00:06:22Saat Anda berada di dasbor Vercel,
00:06:25Anda sekarang akan melihat adanya tab CDN baru di sini.
00:06:28Jika Anda mengekliknya,
00:06:30ia akan membawa Anda ke halaman ringkasan di mana kami mencantumkan
00:06:35semua wilayah Vercel yang saat ini
00:06:39melayani proyek Anda dalam periode waktu yang ditentukan.
00:06:45Di sini kita melihat data 12 jam terakhir.
00:06:47Kita bisa melihat bahwa lalu lintas dari San Francisco dan
00:06:49Washington sedang mengakses situs kita.
00:06:52Anda bisa mengarahkan kursor ke atasnya untuk melihat detail lebih lanjut.
00:06:55Anda bisa membuka fitur observabilitas
00:06:58untuk menggali lebih dalam ke data lalu lintas tersebut.
00:07:04Hal keren tentang halaman ini adalah Anda bisa melihat peta 3D,
00:07:08kembali ke peta 2D,
00:07:10serta melihat lebih banyak data observabilitas di sini,
00:07:17yang juga menautkan kembali ke halaman observabilitas spesifik.
00:07:22Itulah halaman ringkasannya.
00:07:27Ini dimaksudkan untuk memberi Anda gambaran cepat tentang
00:07:30lalu lintas proyek Anda serta
00:07:35menunjukkan di mana letak fungsi-fungsi Anda berada.
00:07:38Anda bisa melihat bahwa wilayah fungsi proyek ini ada di Washington.
00:07:44Hal berikutnya yang ingin saya demokan adalah pengalihan (redirect).
00:07:48Pengalihan massal (bulk redirects), maafkan saya.
00:07:52Oh tidak, ini seharusnya tidak terjadi.
00:08:00Coba kita lihat. Saya akan mencoba proyek yang berbeda di sini.
00:08:07Oke. Baiklah, mari kita coba proyek lain.
00:08:18Maaf atas ketidaknyamanannya.
00:08:22Jadi kita punya proyek pengalihan massal ini.
00:08:27Mari kita coba menambahkan beberapa pengalihan ke dalamnya.
00:08:30Untuk membuat sebuah pengalihan,
00:08:35Anda masuk ke halaman ini, klik "Manual".
00:08:37Sekarang katakanlah saya ingin demo flash mengarah ke,
00:08:44mari kita lihat, tentang blog 2020,
00:08:51gaya 10, pastikan, sesuatu seperti itu.
00:08:57Jadi Anda klik "Create", itu akan dibuat di latar belakang,
00:09:02lalu ia akan memunculkan model peninjauan perubahan.
00:09:07Jadi saat ini, perubahan ini belum aktif di produksi.
00:09:11Mereka ada di lingkungan pementasan (staging),
00:09:13dan Anda bisa menguji pengalihan baru tersebut dengan ini.
00:09:18Klik di sini, dan halaman ini memang tidak ada.
00:09:24Tapi ya, begitulah cara kerjanya.
00:09:27Lalu jika ingin menerbitkannya ke produksi, klik "Publish".
00:09:30Jika ingin menyimpannya di staging saja, klik "Cancel",
00:09:34dan Anda bisa melihat perubahan staging di tempat kita melakukannya tadi.
00:09:39Jika kita menerbitkan ini ke produksi,
00:09:42perubahan ini akan hilang dari staging.
00:09:45Kita seharusnya bisa melihatnya di produksi.
00:09:58Sekarang Anda bisa melakukan pencarian.
00:10:01Anda bisa melihat riwayat Anda.
00:10:05Anda bisa membandingkan perubahan langsung dengan perubahan sebelumnya,
00:10:14dan Anda bisa memulihkan versi ini jika Anda mau.
00:10:17Klik "Restore", dan kita akan melihat bahwa demo tersebut sudah tidak ada lagi.
00:10:26Sempurna. Luar biasa. Saya akan menyerahkannya kepada Yash untuk demonya.
00:10:34>> Terima kasih, Andrew. Halo, semuanya.
00:10:38Nama saya Yash. Saya seorang magang teknik di tim CDN,
00:10:42dan saya juga berbasis di kantor pusat San Francisco.
00:10:55di Universitas California San Francisco.
00:10:58Saya seorang magang teknik di Universitas California San Francisco.
00:11:03Saya juga seorang magang teknik di Universitas California San Francisco.
00:11:08Saya juga seorang magang teknik di Universitas California San Francisco.
00:11:14Saya juga seorang magang teknik di Universitas California San Francisco.
00:11:18Saya juga seorang magang teknik di Universitas California San Francisco.
00:11:23Saya juga seorang magang teknik di Universitas California San Francisco.
00:11:26Saya juga seorang magang teknik di Universitas California San Francisco.
00:11:32Saya juga seorang magang teknik di Universitas California San Francisco.
00:11:37Saya juga seorang magang teknik di Universitas California San Francisco.
00:11:41Saya juga seorang magang teknik di Universitas California San Francisco.
00:11:46Saya juga seorang magang teknik di Universitas California San Francisco.
00:11:50Saya juga seorang magang teknik di Universitas California San Francisco.
00:11:57Saya juga seorang magang teknik di Universitas California San Francisco.
00:12:02Saya juga seorang magang teknik di Universitas California San Francisco.
00:12:07Saya juga seorang magang teknik di Universitas California San Francisco.
00:12:13Saya juga seorang magang teknik di Universitas California San Francisco.
00:12:17Saya juga seorang magang teknik di Universitas California San Francisco.
00:12:22Saya juga seorang magang teknik di Universitas California San Francisco.
00:12:27Saya juga seorang magang teknik di Universitas California San Francisco.
00:12:32Saya juga seorang magang teknik di Universitas California San Francisco.
00:12:37Saya juga seorang magang teknik di Universitas California San Francisco.
00:12:41Saya juga seorang magang teknik di Universitas California San Francisco.
00:12:45Jika kita melakukan hal yang sama di kode, kita harus melakukan deployment ulang proyek kita.
00:12:49Tapi sekarang hal itu terjadi secara instan.
00:12:53Sekarang saya akan membuat rute kedua. Yang ini akan sedikit lebih kompleks.
00:12:56Alih-alih mengisi formulir seperti sebelumnya, saya akan mengetik apa yang saya inginkan di sini.
00:13:00Kita akan menggunakan AI untuk menghasilkan rutenya.
00:13:02Jadi saya punya dasbor, dan saya sedang membuat versi kedua, yang ingin saya luncurkan perlahan hanya untuk pengguna beta.
00:13:08Jadi saya bisa menulis ulang dasbor kita ke dasbor versi dua.
00:13:14Mari kita lihat apakah pengguna memiliki cookie beta yang disetel ke true.
00:13:21Sekarang kita bisa membuat aturannya, dan dalam beberapa detik AI akan mengisi formulirnya untuk kita.
00:13:27Jadi kita bisa melihat aturan yang kita buat. Ini mengubah rute dashboard ke dashboard v2.
00:13:32Artinya, pengguna akan tetap melihat slash dashboard di URL mereka,
00:13:35tetapi mereka akan melihat konten baru dari dashboard yang baru.
00:13:39Dan ada kondisi di sini. Ini berarti aturan penulisan ulang hanya akan berlaku
00:13:43jika pengguna memiliki cookie bernama beta yang bernilai true.
00:13:46Jadi jika mereka memiliki cookie ini, mereka akan melihat dashboard baru, jika tidak, mereka melihat yang lama.
00:13:53Dan sekali lagi, kita bisa menguji ini dengan sangat cepat.
00:13:58Jadi ini adalah dashboard lama, tapi sekarang jika kita menyetel cookie bernama beta bernilai true,
00:14:09dan kita segarkan, kita bisa melihat dashboard baru, tapi URL kita tetap slash dashboard dan bukan v2.
00:14:16Ini karena kita menggunakan rewrite, bukan redirect, dan kita bisa mempublikasikannya.
00:14:22Dan aturan penulisan terakhir yang ingin saya tunjukkan adalah terkait header caching.
00:14:26Ini adalah sesuatu yang bisa Anda atur untuk meningkatkan performa situs Anda,
00:14:30dan khususnya saya ingin mengoptimalkan gambar statis kami.
00:14:33Jadi saya bisa katakan bahwa kita ingin mengoptimalkan caching untuk gambar statis,
00:14:41setel header cache-control ke public max-age satu tahun immutable untuk gambar kami.
00:14:52Dan sekali lagi, kita bisa membuat aturannya dengan AI.
00:14:55Sekarang kita membuat aturan ini yang akan menyetel cache satu tahun untuk semua gambar.
00:14:59Jadi, alih-alih browser mengakses server Anda setiap kali untuk mengambil gambar,
00:15:03ia akan mencoba mengambilnya secara lokal dan ini dapat meningkatkan performa serta menghemat biaya.
00:15:08Ada banyak nilai lain yang bisa Anda setel untuk header cache-control,
00:15:11tapi menurut saya untuk aset statis, ini adalah yang terbaik.
00:15:14Jadi Anda bisa membuatnya lagi dan kemudian mempublikasikan rutenya.
00:15:19Dan seperti yang saya sebutkan tadi, semua rute ini juga bisa didefinisikan dalam kode.
00:15:23Dan kami memiliki model di sini di mana Anda dapat
00:15:26mengubah semua rute di dashboard menjadi sesuatu yang bisa Anda salin dan tempel
00:15:30ke dalam Vercel JSON atau Vercel.ts, mana pun yang Anda sukai.
00:15:35Manfaat utama menaruhnya di kode adalah untuk praktik kontrol versi yang lebih baik,
00:15:40tapi jika Anda membuat perubahan di sini, Anda harus melakukan deploy ulang agar perubahannya aktif.
00:15:46Hal lain yang ingin saya tunjukkan adalah halaman riwayat (history).
00:15:49Ini mirip dengan yang didemokan Andrew di halaman pengalihan massal (bulk redirects).
00:15:52Anda dapat melihat versi sebelumnya dari apa yang telah berubah.
00:15:55Dan katakanlah kita ingin membatalkan perubahan terbaru yaitu penambahan aturan caching.
00:16:00Kita bisa segera memulihkannya hanya dengan menekan tombol restore ini.
00:16:04Dan sekarang hampir seketika aturannya akan hilang, bisa kita lihat sudah tidak ada lagi di sini.
00:16:09Anda juga dapat mencari dan memfilter berdasarkan tipe, jadi jika ingin melihat semua redirect, Anda bisa.
00:16:14Dan ya, itulah proyek yang sedang kami kerjakan.
00:16:16Semua fungsionalitas yang saya demokan juga tersedia melalui API, CLI, dan SDK.
00:16:22Terima kasih banyak, dan saya serahkan kepada Mark.
00:16:26Oke, terima kasih banyak Yash, itu tadi sangat keren.
00:16:29Saya suka fitur bahasa alaminya.
00:16:31Jadi saya akan menunjukkan fitur terakhir dari tab CDN baru yaitu tab caching.
00:16:41Sama seperti yang dibicarakan Yash tentang menyetel header cache-control,
00:16:46secara default di Vercel CDN Anda mendapatkan caching gratis saat menggunakan fitur seperti
00:16:53incremental static regeneration atau Anda bisa mengontrol header cache sendiri.
00:16:56Di sini pada tab cache di bagian atas, kami memiliki diagram caching ini.
00:17:04Saya ingin meluangkan waktu sejenak menjelaskan ini karena tidak seperti CDN lain, sebenarnya
00:17:09ada beberapa tingkatan di sini yang membantu Anda mengoptimalkan situs Anda.
00:17:12Jika Anda menggunakan ISR, sekali lagi ini adalah diagram yang kita lihat tadi.
00:17:17Permintaan masuk (ingress) sangat dekat dengan klien.
00:17:20Lalu diteruskan ke wilayah Vercel terdekat.
00:17:22Ada 20 wilayah di seluruh dunia di mana permintaan dipetakan terhadap cache CDN.
00:17:27Jika terjadi miss di sini, maka permintaan bisa pergi ke wilayah fungsi di mana ada cache lain
00:17:33untuk ISR Anda, dan jika fungsi perlu dieksekusi, ada juga cache yang bisa Anda gunakan untuk
00:17:39meminta data dari backend Anda sehingga Anda dapat melindungi backend Anda.
00:17:43Ada berbagai jenis permintaan yang dapat Anda buat di atas Vercel.
00:17:47Contohnya jika Anda hanya membuat permintaan API dan menggunakan header cache-control,
00:17:52klik pada dokumentasi, di sini juga menggunakan cache CDN.
00:17:56Ini melewati cache ISR tetapi tetap memiliki cache fungsi dan runtime.
00:18:00Dan terakhir, jika Anda menulis ulang pada Vercel CDN ke origin eksternal,
00:18:07misalnya Anda melakukan proxy ke backend Vercel, Anda mendapatkan manfaat fitur Vercel CDN seperti
00:18:14cache dan firewall, tetapi kemudian permintaannya akan pergi ke origin eksternal.
00:18:18Dan itu membawa kita ke fungsionalitas pembersihan cache (purge cache).
00:18:22Katakanlah karena suatu alasan Anda ingin memvalidasi ulang konten tersebut.
00:18:26Di halaman ini saya punya contoh penggunaan fetch dengan tag cache tertentu pada ISR.
00:18:36Di sini ini disebut tag fetch-data.
00:18:38Anda bisa melihat di sini bahwa ini diregenerasi sekitar satu jam yang lalu dan menggunakan tag cache fetch-data.
00:18:45Jika saya ingin menghapusnya, katakanlah saya ingin halaman itu diregenerasi, saya punya beberapa pilihan.
00:18:54Di sini saya bisa menghapus berdasarkan tag cache, jadi saya bisa memasukkan tag fetch-data.
00:18:58Dan kemudian saya bisa memilih antara menginvalidasi konten atau menghapus konten.
00:19:04Invalidate memungkinkan kita menyajikan halaman usang (stale) sementara halaman tersebut sedang diregenerasi
00:19:09di latar belakang, itulah sebabnya ini direkomendasikan bagi pengguna agar tidak ada latensi pada
00:19:14permintaan berikutnya bagi pengguna.
00:19:16Jadi katakanlah saya melakukan ini, saya klik purge, ya saya ingin menghapusnya.
00:19:21Saat saya menyegarkan halaman, kali ini tidak berubah, masih bertambah.
00:19:27Tapi jika saya menyegarkan halaman lagi, Anda bisa melihat waktunya tereset kembali karena
00:19:33baru saja diregenerasi.
00:19:34Saya juga bisa melakukan hal yang sama sambil menghapus konten.
00:19:39Jadi jika saya menghapus konten ini dan mengklik purge, saat berikutnya saya menyegarkan halaman ini
00:19:45waktunya akan segera tereset kembali.
00:19:48Itu karena ini seperti blocking revalidate, permintaan berikutnya menunggu halaman diregenerasi
00:19:53sebelum disajikan.
00:19:55Jadi kami merekomendasikan penggunaan invalidate saat Anda ingin menyegarkan konten karena ia dapat menyajikan
00:20:00konten usang tersebut sementara konten baru sedang diregenerasi di latar belakang.
00:20:05Anda bisa menghapus berdasarkan tag cache, atau menghapus gambar sumber dengan cara yang sama.
00:20:11Anda juga bisa menghapus semua konten di cache, dan Anda bisa melakukannya pada dua lapisan
00:20:16yang kita bahas tadi, baik pada cache CDN atau cache runtime atau data.
00:20:21Dan ini menghapus semua konten, jadi permintaan berikutnya akan
00:20:28tertahan (block) dan menyegarkan konten tersebut.
00:20:30Jadi itulah semua fitur baru hari ini dan kami akan membuka sesi tanya jawab
00:20:39dan beri tahu kami apa yang ingin Anda ketahui.
00:20:43Baiklah, terima kasih.
00:20:44Hai teman-teman, ada beberapa pertanyaan di obrolan.
00:20:50Saya akan mulai dengan yang pertama.
00:20:51Setelah saya deploy aplikasi Vercel, bagaimana cara menggunakan CDN dan bagaimana biayanya?
00:21:10Ya, pertanyaan bagus.
00:21:11Setiap aplikasi Vercel mendapatkan CDN secara gratis dan itu berarti ketika Anda melakukan deploy
00:21:20aplikasi, kami secara otomatis melihat kontennya dan mengoptimalkannya untuk disajikan di
00:21:27Vercel CDN.
00:21:28Jika Anda menggunakan kerangka kerja (framework) yang mendukung ISR, kami akan memetakan SSG (static site generation)
00:21:35dan konten tersebut ke dalam cache ISR dan cache CDN.
00:21:40Jadi secara langsung, Anda mungkin tidak perlu mengonfigurasi apa pun untuk memulai.
00:21:46Namun Anda tentu bisa jika mau, misalnya jika Anda mendefinisikan permintaan API
00:21:53Anda bisa menyetel header cache-control jika ingin menyesuaikannya, atau seperti yang ditunjukkan Yash
00:22:00jika Anda menyajikan konten statis dari direktori yang berbeda dari standar, Anda bisa menyetel
00:22:07aturan caching untuk semua konten tersebut.
00:22:11Jadi untuk pengguna hobi, ini disediakan gratis, dan untuk pengguna pro Anda mendapatkan jatah
00:22:21permintaan dan bandwidth, dan setelah itu ada tarif tergantung pada wilayah yang
00:22:26dapat Anda temukan di situs kami.
00:22:27Pertanyaan kedua.
00:22:31Bagaimana jika saya sudah memiliki CDN di depan aplikasi saya?
00:22:38Bagaimana cara memindahkannya ke Vercel?
00:22:40Pertanyaan yang sangat bagus juga.
00:22:44Ini adalah sesuatu yang sangat bisa kami dukung.
00:22:47Jadi secara umum, saya rasa ada dua tahap yang bisa Anda lakukan untuk migrasi.
00:22:54Yang pertama adalah jika Anda sudah menggunakan CDN di depan Vercel, maka Anda bisa membiarkan
00:22:58kontennya lewat agar Vercel yang menangani caching dan penyajiannya, serta
00:23:04aturan peruteannya, dan setelah Anda memiliki semua konfigurasi itu di Vercel,
00:23:10maka Anda hanya perlu mengubah DNS Anda ke Vercel agar
00:23:15permintaan datang ke Vercel secara otomatis.
00:23:18Kami memiliki panduan yang bisa kami tautkan di komentar tentang cara migrasi ke DNS Vercel
00:23:23tanpa downtime apa pun.
00:23:25Jika Anda memiliki pertanyaan tentang perbedaan konfigurasi, kami memiliki beberapa panduan di
00:23:33basis pengetahuan kami yang membantu memetakan konsep-konsep berbeda dari setiap CDN lain ke
00:23:37konsep Vercel, jadi kami bisa menyediakan tautan untuk hal tersebut.
00:23:41Mungkin saya akan serahkan ini kepada Andrew.
00:23:49Bagaimana cara saya menganalisis lalu lintas CDN saya?
00:23:52Ya, ada beberapa cara.
00:23:55Cara pertama sudah saya demokan.
00:24:00Apakah suara saya tidak terdengar?
00:24:00Ya, oke terima kasih.
00:24:04Jadi cara pertama yang saya demokan tadi, Anda bisa melihat tab ringkasan CDN yang menunjukkan cuplikan
00:24:11lalu lintas proyek Anda di Vercel CDN untuk periode waktu tertentu.
00:24:17Tempat lain yang bisa Anda kunjungi adalah halaman observabilitas edge request dan Anda bisa merinci semua
00:24:24lalu lintas Anda berdasarkan berbagai kategori.
00:24:34Ya, dan di halaman observabilitas di Vercel terdapat banyak rincian kaya yang bisa
00:24:44Anda akses, jadi silakan terus telusuri itu.
00:24:48Pertanyaan lain yang sering muncul adalah apakah CDN menangani serangan DDoS atau jenis
00:24:57keamanan apa yang ditambahkan atau tersedia dengan CDN?
00:25:04Ya, pertanyaan yang fantastis.
00:25:06Vercel hadir dengan perlindungan mitigasi DDoS bawaan yang tidak terukur (unmetered).
00:25:12Artinya, ini tersedia gratis dan mitigasi DDoS tersebut mencakup berbagai
00:25:19jenis serangan yang Vercel lindungi untuk Anda secara langsung.
00:25:23Kami memiliki firewall aplikasi web (WAF) dan kami juga memiliki perlindungan L3, L4, dan L7 sehingga
00:25:32serangan mulai dari sekadar lonjakan jumlah permintaan ke jalur tertentu hingga serangan yang lebih canggih
00:25:39yang mengganti alamat IP atau informasi lain dapat kami deteksi dan kami
00:25:47lindungi.
00:25:48Jadi ya, tentu saja ini tersedia langsung untuk semua proyek.
00:25:52Anda juga dapat mendefinisikan aturan kustom jika Anda mau.
00:25:57Ini tersedia di tab firewall di dashboard, itu sesi yang juga harus
00:26:02segera kita lakukan dalam waktu dekat.
00:26:04Dan di sana Anda bisa mendefinisikan aturan yang lebih spesifik untuk aplikasi Anda jika ada sesuatu
00:26:09tertentu yang ingin Anda blokir.
00:26:13Keamanan pastinya hal besar, Anda bisa membuat satu sesi penuh tentang itu.
00:26:22Ya, saya sangat suka semua hal yang kalian lakukan untuk mengurangi semua hambatan di
00:26:27berbagai alur yang berbeda ini.
00:26:29Dan sebenarnya ada satu hal yang agak acak, tapi saya melihat di Twitter banyak sekali apresiasi untuk
00:26:34animasi 2D ke 3D di halaman CDN.
00:26:38Bisakah Anda menunjukkannya kepada kami dan mungkin memberi sedikit penjelasan?
00:26:42Ya, saya bisa menunjukkan layar saya lagi.
00:26:49Mari kita lihat bagi siapa pun yang belum melihatnya.
00:26:52Ya, jadi di halaman ringkasan CDN kami menampilkan peta 2D dan jika Anda mengklik globe, Anda mendapatkan
00:27:00peta 3D.
00:27:01Sekarang ini cukup interaktif, Anda bisa memutarnya ke mana pun Anda mau.
00:27:07Anda bisa mengarahkan kursor ke atasnya dan beralih kembali.
00:27:12Jadi ya, begitulah.
00:27:18Terima kasih.
00:27:19Saya suka grafisnya dan saya suka betapa mudahnya bagi Anda untuk mendalami sisi
00:27:24observabilitasnya di mana saya memvisualisasikan di mana lalu lintas berada dan kemudian saya bisa
00:27:29menggalinya lebih dalam lagi.
00:27:30Tepat sekali.
00:27:32Pertanyaan lain yang terkait dengan beberapa masalah yang saya lihat dialami orang-orang sebelum kita menambahkan
00:27:43beberapa fitur ini dan juga sesuatu yang saya tanyakan pada diri sendiri karena saya belum
00:27:47mendalami semua yang terbaru dan terhebat ini.
00:27:50Semuanya masih sangat baru.
00:27:51Pengaman apa yang diterapkan untuk membantu mencegah atau mungkin mendeteksi seperti kesalahan konfigurasi atau
00:27:58secara umum mengekspos layanan internal atau data sensitif yang tidak ingin
00:28:03dilihat orang lain?
00:28:04Ya, tentu saja.
00:28:07Ada sejumlah jenis perlindungan yang berbeda untuk menyembunyikan rute internal.
00:28:15Secara default, proyek memiliki perlindungan deployment yang memungkinkan Anda menggunakan autentikasi Vercel
00:28:23atau kata sandi untuk melindungi situs Anda dari pengunjung yang tidak diinginkan dan ini dapat melindungi seluruh deployment.
00:28:31Ada juga, Anda bisa menggunakan cookie dan pustaka autentikasi terhadap rute tertentu
00:28:43untuk melindunginya.
00:28:46Ada juga aturan firewall kustom yang dapat Anda gunakan jika ingin melindungi rute tertentu.
00:28:54Jadi ada sejumlah pilihan yang berbeda.
00:28:56Di dalam dashboard Anda akan melihat banyak observabilitas tentang rute mana yang sedang disajikan.
00:29:04Anda juga dapat melihat ringkasan deployment untuk setiap deployment mengenai semua rute
00:29:10sehingga Anda dapat memeriksa beberapa informasi tentang masing-masing rute dan fungsi tersebut.
00:29:15Jadi cobalah, jika Anda memiliki pertanyaan, saya akan senang menjawabnya dengan lebih rinci.
00:29:22Luar biasa.
00:29:34Baiklah, mari kita lihat pertanyaan lain yang saya lihat muncul yang mungkin kalian sudah sedikit
00:29:41singgung tapi mungkin bisa sedikit lebih detail.
00:29:43Bisakah rute tingkat proyek digunakan untuk mengarahkan lalu lintas ke API eksternal atau microservices?
00:29:51Ya, tentu saja.
00:29:55Ada sebuah templat, mungkin Ash ingin membicarakannya karena Anda sudah
00:30:04mengerjakannya. Tentu, silakan.
00:30:06Ya, Anda pasti bisa menulis ulang semua permintaan API Anda ke origin eksternal.
00:30:11Saya akan membagikan lebih banyak tentang ini dalam beberapa minggu ke depan, tetapi Anda bisa menyiapkan aturan penulisan.
00:30:15Saya sebenarnya bisa membagikan layar saya dan saya bertanya-tanya.
00:30:18Tetapi jika saya menyiapkan aturan penulisan, saya bisa menyetel misalnya penulisan ulang (rewrite) dari API saya.
00:30:35Ke origin eksternal mana pun, misalnya jika rutenya seperti https/api-external.com
00:30:44Anda bisa melakukan hal seperti ini untuk melakukan proxy API Anda ke origin eksternal.
00:30:50Tapi ya, itu sudah pasti didukung dan Anda juga bisa melakukan ini melalui CLI
00:31:00atau metode lain yang Anda inginkan.
00:31:04Bagus, itu membuatnya sangat mudah saat Anda sedang beralih sebagian, saya tahu kami menggunakan
00:31:10sedikit hal itu pada situs komunitas kami sehingga kami bisa membangun beberapa fitur tambahan.
00:31:16Jadi tidak semuanya menjadi bagian dari Discourse, tapi Anda tahu, kami tidak ingin sepenuhnya meninggalkan Discourse
00:31:21juga kan? Itulah fondasi utama dari situs komunitas kami dan kemudian kami punya fitur tambahan
00:31:25di atasnya, jadi itu sangat memudahkan kami.
00:31:27Ya, itu benar-benar sebuah terobosan besar.
00:31:31Ya, saya sangat berpikir ini sangat berguna bahwa Anda mendapatkan manfaat dari lapisan caching,
00:31:35firewall, dan juga aturan perutean di mana Anda dapat memutuskan apa yang harus dilakukan dengan sintaks
00:31:42yang mudah digunakan ini, tetapi juga bisa menggunakan backend berbeda yang sudah memiliki konten di dalamnya.
00:31:48Luar biasa, dan saya rasa itu semua pertanyaan dari obrolan, tapi saya ingin bertanya apa selanjutnya?
00:31:56Bisakah kalian memberi tahu kami sesuatu?
00:32:00Oh, pertanyaan bagus.
00:32:02Ada banyak hal selanjutnya, tapi menurut saya salah satu yang kita bicarakan
00:32:09tadi yang harus kita lakukan lebih banyak adalah keamanan, jadi nantikan lebih banyak konten tentang keamanan segera.
00:32:15Luar biasa, terima kasih sudah bergabung bersama kami, saya tahu kalian sangat sibuk, kami akan membiarkan kalian
00:32:22melanjutkan hari kalian, tetapi kami sangat menghargai waktu kalian untuk berada di sini.
00:32:25Terima kasih banyak sudah mengundang kami.
00:32:28Ya, terima kasih banyak.
00:32:30Terima kasih semua.
00:32:30Baiklah, itu tadi luar biasa. Apa yang akan kita bahas selanjutnya, Maya?
00:32:37Oh, kita ada sesi tanya jawab bebas (AMA) sandbox pada hari Kamis.
00:32:45Jadi, tetaplah pantau itu.
00:32:47Kami juga sebenarnya ingin mempromosikan ini karena ada beberapa acara yang sangat menarik di" akhir pekan untuk acara Zero to Agent Vercel.
00:32:54Kami juga punya acara Ship yang akan datang bulan Juni dan jika Anda
00:33:03belum melihatnya, kunjungi [vercel.com/ship](https://vercel.com/ship) dan Anda bisa membuat koper kecil sendiri.
00:33:09Tim desain benar-benar bekerja keras untuk halaman ini, jadi silakan cek dan pastikan untuk mencatat tanggalnya
00:33:15untuk acara-acara di seluruh dunia dan ya, ada lebih banyak sesi komunitas yang akan datang jadi
00:33:21Anda bisa melihat semuanya di [community.vercel.com/events](https://www.google.com/search?q=https://community.vercel.com/events).
00:33:26Terima kasih semuanya, ini luar biasa.
00:33:28Sampai jumpa!