00:00:00안녕하세요, 여러분.
00:00:24이번 주 Vercel 커뮤니티 라이브 세션에 오신 것을 환영합니다.
00:00:27저는 에이미이고, 오늘은 마야와 함께합니다.
00:00:31안녕하세요, 여러분.
00:00:32저희 둘 다 Vercel 커뮤니티 팀에서 일하고 있습니다.
00:00:35현재 X와 YouTube를 통해 라이브 스트리밍 중인데요,
00:00:37질문을 하고 싶으시다면
00:00:39[community.vercel.com/live에](https://www.google.com/search?q=https://community.vercel.com/live%EC%97%90) 접속해 주세요.
00:00:43채팅에 참여하셔야 저희가 질문을 확인할 수 있습니다.
00:00:47맞습니다. 채팅창에 계신 분들께
00:00:50정중하게 매너를 지켜달라는 당부 말씀을 드립니다.
00:00:52저희 행동 강령을 준수하며
00:00:54모두에게 즐거운 공간이 될 수 있도록 도와주세요.
00:00:56자, 오늘 세션의 주제는 Vercel CDN입니다.
00:01:00재미있는 사실은, 지금 저희 플랫폼으로 시청 중이시라면
00:01:04실제로 Vercel CDN을 사용하고 계신 겁니다. 정말 대단하죠.
00:01:07이 부분에 대해 궁금하시다면,
00:01:10DX 엔지니어 팀의 동료인 제이콥 패리스가
00:01:13최근 Vercel 웹사이트에 이 구현 방식에 관한
00:01:15멋진 블로그 포스트를 올렸습니다.
00:01:19방금 채팅창에 링크를 공유해 드렸으니,
00:01:22관심 있는 분들은 확인해 보세요.
00:01:25그리고 평소 저희 소식을 지켜보셨다면,
00:01:28최근 변경 로그(changelog)에 Vercel CDN과 관련된
00:01:30업데이트가 많았다는 걸 아실 겁니다.
00:01:33그래서 담당 팀원들을 모시고
00:01:35직접 자세한 이야기를 들어보려 합니다.
00:01:37어떻게 구축했는지, 어떻게 활용할 수 있는지,
00:01:40그리고 어떤 기능들이 있는지 전부 알려드릴게요.
00:01:43그럼 무대로 모셔보겠습니다.
00:01:45마크, 앤드류, 야시가 CDN에 대해 이야기해 줄 거예요.
00:01:48이제 저희는 물러가겠습니다.
00:01:51고마워요, 에이미, 마야.
00:01:55여러분 안녕하세요, 마크입니다.
00:01:57저는 CDN 팀의 소프트웨어 엔지니어이고,
00:01:59앤드류, 야시와 함께 나왔습니다.
00:02:03저는 지금 Vercel의 멋진
00:02:06샌프란시스코 사무실에 있는데, 이번 주 캘리포니아는 꽤 덥네요.
00:02:09오늘은 저희가 작업해 온
00:02:12최신 CDN 기능들에 대해 이야기해 보려 합니다.
00:02:15소개해 드릴 생각에 무척 기대되네요.
00:02:18먼저 Vercel CDN에 대해 간략히 소개하겠습니다.
00:02:21준비한 슬라이드를 몇 장 보여드린 뒤,
00:02:25앤드류에게 마이크를 넘겨서
00:02:27CDN 대시보드 데모를 진행하도록 하겠습니다.
00:02:32좋습니다. Vercel CDN의 작동 방식에 대해 잠시 설명해 드릴게요.
00:02:39잘 모르셨을 수도 있겠지만, Vercel에 배포된
00:02:42모든 프로젝트는 Vercel CDN을 사용합니다.
00:02:44이 기능은 무료로 제공되죠.
00:02:46하지만 구체적으로 어떻게 작동하는지는 잘 안 보일 수 있습니다.
00:02:51Vercel CDN은
00:02:54여러분의 브라우저나 기기 등 클라이언트의 요청을 받아
00:02:56네트워크 거점인 POP(Point of Presence)으로
00:02:58유입(Ingress)시킵니다.
00:03:01이 거점들은 전 세계에 퍼져 있습니다.
00:03:03전 세계적으로 125개 이상의 거점이 지리적으로 분산되어 있죠.
00:03:07그다음 요청이 Vercel 리전으로 전달되어 TLS 암호화가 종료되고,
00:03:14본격적으로 요청을 처리하게 됩니다.
00:03:16여기서 캐싱(caching)이 이루어지고
00:03:18라우팅(routing)도 처리됩니다.
00:03:19만약 캐시 히트(cache hit)가 발생하지 않으면,
00:03:21해당 요청을 함수 리전으로 전달하여
00:03:25함수에서 제공하는 ISR(Incremental Static Regeneration) 등을 처리합니다.
00:03:29나중에 캐싱을 설명할 때 이 다이어그램을 더 자세히 살펴볼게요.
00:03:33이 과정의 일부로 데이터 유입뿐만 아니라,
00:03:35방화벽, 라우팅,
00:03:38그리고 스큐(skew) 방지 같은 트래픽 관리 기능,
00:03:40롤링 업데이트, 마이크로 프론트엔드 등 많은 혜택을 누릴 수 있습니다.
00:03:44그렇다면 Vercel CDN만의 특별한 점은 무엇일까요?
00:03:49Vercel CDN은 프레임워크 코드를 네이티브하게 이해합니다.
00:03:52이게 무슨 뜻이냐면, 프로젝트를 Vercel에 배포할 때
00:03:56여러분이 작성한 코드와
00:03:57설정 사항들이 Vercel CDN이 직접 처리할 수 있는
00:04:00결과물로 자동 변환된다는 의미입니다.
00:04:04다른 대부분의 CDN은 직접 설정을 해줘야 하죠.
00:04:07하지만 Vercel에서 지원하는 프레임워크를 쓴다면 기본으로 제공됩니다.
00:04:10내장된 요청 가속화 기능과
00:04:13앞서 언급한 고가용성 혜택도 받게 됩니다.
00:04:16또한 ISR 같은 기능도
00:04:19기본으로 제공되는데요, 이는 증분 정적 재생성 기술입니다.
00:04:21이것은 저희의 핵심 기능으로,
00:04:23코드를 다시 배포하지 않고도 특정 페이지만을 대상으로
00:04:27API 요청이나 웹훅을 보내
00:04:29페이지를 다시 생성할 수 있다는 뜻입니다.
00:04:34또한 모든 프로젝트에 대해 트래픽 제한이 없는
00:04:36상시 가동 DDoS 방어 시스템이 통합되어 있습니다.
00:04:40이 기능은 무료이며 여러 애플리케이션에 걸쳐 위협을 일관되게 처리하고,
00:04:46설정 가능한 WAF(웹 애플리케이션 방화벽) 및 봇 관리 기능도 함께 제공됩니다.
00:04:51지난 몇 달 동안 저희는
00:04:53Vercel 대시보드 내에서 사용할 수 있는
00:04:56다양한 신규 기능들을 개발해 왔으며,
00:05:00오늘 그 기능들을 하나씩 살펴보려 합니다.
00:05:02새로운 CDN 대시보드 경험과
00:05:06새로운 배포 없이도 프로젝트 수준에서
00:05:09라우팅 규칙을 정의할 수 있는 기능,
00:05:12완전히 새로워진 캐싱 탭,
00:05:13그리고 최대 100만 개까지 리다이렉트를 설정할 수 있는 기능 등이 포함됩니다.
00:05:18그럼 이제 앤드류에게 마이크를 넘겨서
00:05:22CDN 대시보드를 살펴보겠습니다. 앤드류?
00:05:27마크, 고마워요.
00:05:29여러분 안녕하세요, 앤드류 가젝입니다.
00:05:31보시다시피 저도 CDN 팀의 소프트웨어 엔지니어입니다.
00:05:36저는 뉴햄프셔에 살고 있는데요.
00:05:38오늘은 화창하지만 화씨 35도(영상 1.6도) 정도로 아직 꽤 춥네요.
00:05:45빨리 따뜻한 여름이 왔으면 좋겠습니다.
00:05:49오늘 제가 화면을 공유해서,
00:05:53이번 커뮤니티 세션을 위해 만든
00:05:56간단한 데모 앱을 보여드리겠습니다.
00:05:59여기 Next.js 앱이 하나 있는데요.
00:06:02블로그용 경로(route)들이 잔뜩 들어있습니다.
00:06:08대시보드도 볼 수 있고,
00:06:10데이터를 반환하는 API 경로 등도 있습니다.
00:06:16하지만 이건 오늘 주요 주제가 아니죠.
00:06:18저희가 여기 모인 이유는 대시보드의 변화 때문입니다.
00:06:22Vercel 대시보드에 들어가 보시면,
00:06:25이제 새로운 “CDN” 탭이 생긴 것을 보실 수 있습니다.
00:06:28그 탭을 클릭하면,
00:06:30개요(Overview) 페이지로 이동하는데, 여기에는
00:06:35지정한 시간 동안 프로젝트 트래픽을 처리 중인
00:06:39모든 Vercel 리전의 목록이 표시됩니다.
00:06:45여기 지난 12시간 기록을 보면,
00:06:47샌프란시스코와 워싱턴발 트래픽이
00:06:49우리 사이트로 들어오는 것을 볼 수 있습니다.
00:06:52마우스를 올리면 더 자세한 내용을 볼 수 있고,
00:06:55관측성(Observability) 도구를 열어서
00:06:58트래픽 데이터를 더 깊이 있게 파고들 수도 있습니다.
00:07:04이 페이지의 재밌는 점은 3D 지도를 보거나
00:07:08다시 2D 지도로 돌아갈 수 있다는 것이고,
00:07:10여기서 더 많은 관측성 데이터를 확인할 수 있으며,
00:07:17해당 데이터는 특정 관측성 페이지로 연결됩니다.
00:07:22이게 개요 페이지입니다.
00:07:27프로젝트의 트래픽 현황을 한눈에
00:07:30파악할 수 있게 해주는 기능이며,
00:07:35여러분의 함수(functions)들이 어디에 위치했는지도 보여줍니다.
00:07:38이 프로젝트의 함수 리전은 워싱턴인 것을 확인할 수 있네요.
00:07:44다음으로 데모할 기능은 리다이렉트입니다.
00:07:48정확히는 대량(Bulk) 리다이렉트입니다.
00:07:52어라, 원래 이렇게 되어야 하는 건데...
00:08:00잠시만요. 다른 프로젝트로 시도해 보겠습니다.
00:08:07음, 다른 프로젝트를 한번 보죠.
00:08:18불편을 드려 죄송합니다.
00:08:22자, 여기 대량 리다이렉트 프로젝트가 있습니다.
00:08:27여기에 리다이렉트를 몇 개 추가해 보겠습니다.
00:08:30리다이렉트를 생성하려면,
00:08:35이 페이지로 와서 “수동(Manual)”을 클릭합니다.
00:08:37이제 예를 들어 “flash-demo”가 어디로 가느냐 하면,
00:08:44음, “about/blog/2020/10/style”
00:08:51뭐 이런 식으로 경로를 지정해 보겠습니다.
00:08:57그다음 “생성(Create)”을 누르면 백그라운드에서 생성되고,
00:09:02변경 사항 검토 모달창이 뜹니다.
00:09:07현재 이 변경 사항은 아직 실제 운영 환경(production)에 반영되지 않았습니다.
00:09:11일단 스테이징(staging) 환경에 있는 상태이므로,
00:09:13여기서 새 리다이렉트를 테스트해 볼 수 있습니다.
00:09:18여기를 클릭하면... 아직 이 페이지가 존재하지 않네요.
00:09:24아무튼 이런 식으로 작동합니다.
00:09:27그다음 운영 환경에 배포하고 싶으면 “게시(Publish)”를 누릅니다.
00:09:30스테이징에만 두고 싶다면 “취소”를 누르면 되고,
00:09:34수행한 스테이징 변경 사항은 여기서 볼 수 있습니다.
00:09:39이걸 운영 환경에 게시하면,
00:09:42이 임시 변경 사항 목록은 사라지게 되고,
00:09:45운영 환경에서 실제로 확인할 수 있게 됩니다.
00:09:58이제 검색도 가능하고,
00:10:01내역(history)도 확인할 수 있습니다.
00:10:05현재 상태와 이전 상태를 비교해 볼 수도 있고,
00:10:14원한다면 해당 버전으로 복구(restore)할 수도 있습니다.
00:10:17“복구”를 누르면 방금 만든 데모 리다이렉트가 사라지는 걸 볼 수 있죠.
00:10:26완벽하네요. 좋습니다. 이제 야시에게 데모를 넘기겠습니다.
00:10:34고마워요, 앤드류. 안녕하세요, 여러분.
00:10:38제 이름은 야시입니다. CDN 팀의 엔지니어링 인턴이고,
00:10:42저 역시 샌프란시스코 본사에 베이스를 두고 있습니다.
00:10:55저는 샌프란시스코 캘리포니아 대학교 소속입니다.
00:10:58저는 샌프란시스코 캘리포니아 대학교의 엔지니어링 인턴입니다.
00:11:03저는 또한 샌프란시스코 캘리포니아 대학교의 엔지니어링 인턴입니다.
00:11:08저는 또한 샌프란시스코 캘리포니아 대학교의 엔지니어링 인턴입니다.
00:11:14저는 또한 샌프란시스코 캘리포니아 대학교의 엔지니어링 인턴입니다.
00:11:18저는 또한 샌프란시스코 캘리포니아 대학교의 엔지니어링 인턴입니다.
00:11:23저는 또한 샌프란시스코 캘리포니아 대학교의 엔지니어링 인턴입니다.
00:11:26저는 또한 샌프란시스코 캘리포니아 대학교의 엔지니어링 인턴입니다.
00:11:32저는 또한 샌프란시스코 캘리포니아 대학교의 엔지니어링 인턴입니다.
00:11:37저는 또한 샌프란시스코 캘리포니아 대학교의 엔지니어링 인턴입니다.
00:11:41저는 또한 샌프란시스코 캘리포니아 대학교의 엔지니어링 인턴입니다.
00:11:46저는 또한 샌프란시스코 캘리포니아 대학교의 엔지니어링 인턴입니다.
00:11:50저는 또한 샌프란시스코 캘리포니아 대학교의 엔지니어링 인턴입니다.
00:11:57저는 또한 샌프란시스코 캘리포니아 대학교의 엔지니어링 인턴입니다.
00:12:02저는 또한 샌프란시스코 캘리포니아 대학교의 엔지니어링 인턴입니다.
00:12:07저는 또한 샌프란시스코 캘리포니아 대학교의 엔지니어링 인턴입니다.
00:12:13저는 또한 샌프란시스코 캘리포니아 대학교의 엔지니어링 인턴입니다.
00:12:17저는 또한 샌프란시스코 캘리포니아 대학교의 엔지니어링 인턴입니다.
00:12:22저는 또한 샌프란시스코 캘리포니아 대학교의 엔지니어링 인턴입니다.
00:12:27저는 또한 샌프란시스코 캘리포니아 대학교의 엔지니어링 인턴입니다.
00:12:32저는 또한 샌프란시스코 캘리포니아 대학교의 엔지니어링 인턴입니다.
00:12:37저는 또한 샌프란시스코 캘리포니아 대학교의 엔지니어링 인턴입니다.
00:12:41저는 또한 샌프란시스코 캘리포니아 대학교의 엔지니어링 인턴입니다.
00:12:45똑같은 작업을 코드로 하려면 프로젝트를 다시 배포해야 했겠죠.
00:12:49하지만 이제는 즉각적으로 처리됩니다.
00:12:53이제 두 번째 경로를 만들어 볼 건데요, 이번엔 좀 더 복잡하게 해보죠.
00:12:56지난번처럼 양식을 직접 채우는 대신, 원하는 내용을 타이핑해 보겠습니다.
00:13:00AI를 사용해서 경로를 생성할 거거든요.
00:13:02기존 대시보드가 있고 버전 2를 만들었는데, 이걸 베타 사용자에게만 천천히 배포하고 싶다고 가정해 봅시다.
00:13:08그래서 기존 대시보드 경로를 대시보드 버전 2로 다시 쓰기(rewrite) 하려고 합니다.
00:13:14사용자에게 'beta' 쿠키가 있고 그 값이 'true'로 설정되어 있는지 확인해 보겠습니다.
00:13:21이제 규칙을 생성하면, 몇 초 안에 AI가 우리 대신 양식을 채워줄 것입니다.
00:13:27생성된 규칙을 살펴보면, 'dashboard'를 'dashboard-v2'로 다시 쓰고(rewrite) 있습니다.
00:13:32이것은 사용자의 URL에는 여전히 '/dashboard'로 표시되지만,
00:13:35실제로는 새로운 대시보드의 콘텐츠가 보여진다는 것을 의미합니다.
00:13:39그리고 여기 조건이 있습니다. 이 말은 이 리라이트 규칙이
00:13:43사용자에게 'beta'라는 이름의 쿠키 값이 'true'인 경우에만 적용된다는 뜻입니다.
00:13:46따라서 해당 쿠키가 있으면 새 대시보드를 보고, 없으면 기존 대시보드를 보게 됩니다.
00:13:53이것도 아주 빠르게 테스트해 볼 수 있습니다.
00:13:58지금은 기존 대시보드지만, 'beta' 쿠키 값을 'true'로 설정하고
00:14:09새로고침하면 새 대시보드가 나타납니다. 하지만 URL은 '/dashboard/v2'가 아니라 여전히 '/dashboard'입니다.
00:14:16리다이렉트가 아닌 리라이트를 사용했기 때문입니다. 이제 이를 배포해 보겠습니다.
00:14:22마지막으로 보여드릴 리라이팅 규칙은 캐싱 헤더와 관련이 있습니다.
00:14:26사이트 성능을 개선하기 위해 설정할 수 있는 항목으로,
00:14:30특히 정적 이미지 최적화를 해보려 합니다.
00:14:33정적 이미지에 대한 캐싱을 최적화하고 싶다고 입력하고,
00:14:41이미지에 대해 캐시 제어 헤더를 'public, max-age=31536000, immutable'로 설정하겠습니다.
00:14:52이번에도 AI를 통해 규칙을 생성합니다.
00:14:55이제 모든 이미지에 대해 1년의 캐시 기간을 설정하는 규칙이 만들어졌습니다.
00:14:59브라우저가 이미지를 가져오기 위해 매번 서버에 요청하는 대신,
00:15:03로컬에서 가져오게 되므로 성능이 향상되고 비용이 절감됩니다.
00:15:08캐시 제어 헤더에 설정할 수 있는 값은 다양하지만,
00:15:11정적 자산에는 이 설정이 가장 적합하다고 생각합니다.
00:15:14이제 규칙을 생성하고 게시하면 됩니다.
00:15:19앞서 언급했듯이 이 모든 경로는 코드로도 정의할 수 있습니다.
00:15:23여기 보이는 모달을 통해
00:15:26대시보드의 모든 경로를 복사하여 붙여넣을 수 있는 형태로 변환할 수 있습니다.
00:15:30'vercel.json'이나 'vercel.ts' 중 선호하는 파일에 넣으시면 됩니다.
00:15:35코드로 관리하면 버전 제어 관점에서 가장 좋지만,
00:15:40여기서 변경 사항을 만들면 프로젝트를 다시 배포해야 실서비스에 반영된다는 점을 유의하세요.
00:15:46다음으로 보여드릴 것은 히스토리 페이지입니다.
00:15:49앤드류가 대량 리다이렉트 페이지에서 시연했던 것과 유사합니다.
00:15:52과거에 어떤 변경 사항이 있었는지 버전을 확인할 수 있습니다.
00:15:55방금 추가한 캐싱 규칙을 취소하고 싶다고 가정해 봅시다.
00:16:00여기 있는 복구(Restore) 버튼을 누르면 즉시 되돌릴 수 있습니다.
00:16:04그러면 거의 즉시 규칙이 사라진 것을 확인할 수 있습니다.
00:16:09유형별로 검색하거나 필터링할 수도 있어서 리다이렉트만 따로 보는 것도 가능합니다.
00:16:14네, 이것이 프로젝트 라우팅 기능입니다.
00:16:16시연해 드린 모든 기능은 API, CLI, SDK를 통해서도 사용할 수 있습니다.
00:16:22감사합니다. 이제 마크에게 넘기겠습니다.
00:16:26좋은 시연 감사합니다, 야시. 정말 멋졌어요.
00:16:29자연어 처리 기능이 특히 마음에 드네요.
00:16:31저는 새로운 CDN 탭의 마지막 기능인 캐싱(Caching) 탭을 소개해 드리겠습니다.
00:16:41야시가 캐시 제어 헤더 설정에 대해 이야기했던 것처럼,
00:16:46Vercel CDN은 증분 정적 재생성(ISR) 같은 기능을 사용할 때
00:16:53기본적으로 캐싱 기능을 무료로 제공하며, 직접 헤더를 제어할 수도 있습니다.
00:16:56상단의 캐시 탭을 보면 이런 캐싱 다이어그램이 있습니다.
00:17:04다른 CDN과는 달리 사이트 최적화를 돕는 여러 계층이 존재하기 때문에
00:17:09이에 대해 잠시 설명해 드리고자 합니다.
00:17:12ISR을 사용하는 경우, 아까 보았던 다이어그램이 적용됩니다.
00:17:17요청은 클라이언트와 아주 가까운 곳에서 유입되어
00:17:20가장 가까운 Vercel 리전으로 전달됩니다.
00:17:22전 세계 20개 리전에서 CDN 캐시와 대조 작업을 거칩니다.
00:17:27여기서 캐시 미스가 발생하면 함수 리전으로 이동하여 ISR을 위한 또 다른 캐시를 거치고,
00:17:33함수 실행이 필요한 경우 백엔드에서 데이터를 요청할 때
00:17:39백엔드를 보호하기 위해 사용할 수 있는 캐시가 또 존재합니다.
00:17:43Vercel 위에서 수행할 수 있는 요청 유형은 다양합니다.
00:17:47예를 들어, 일반적인 API 요청에 캐시 제어 헤더를 사용하는 경우,
00:17:52문서에 나와 있듯이 이 역시 CDN 캐시를 사용합니다.
00:17:56ISR 캐시는 건너뛰지만 함수 및 런타임 캐시는 여전히 활용합니다.
00:18:00마지막으로 Vercel CDN에서 외부 오리진으로 리라이트하는 경우,
00:18:07예를 들어 외부 백엔드로 프록시를 보낼 때도 캐시와 방화벽 같은
00:18:14Vercel CDN 기능의 이점을 누리면서 요청을 외부로 보낼 수 있습니다.
00:18:18이는 캐시 퍼지(Purge) 기능으로 이어집니다.
00:18:22어떤 이유로 콘텐츠를 재검증(Revalidate)하고 싶다고 가정해 봅시다.
00:18:26여기 ISR 예제 페이지에서 특정 캐시 태그와 함께 'fetch'를 사용하고 있습니다.
00:18:36이 태그의 이름은 'fetch-data'입니다.
00:18:38약 한 시간 전에 재생성되었으며 'fetch-data' 캐시 태그를 사용 중인 것을 볼 수 있습니다.
00:18:45이 페이지를 재생성하기 위해 캐시를 퍼지하고 싶다면 몇 가지 방법이 있습니다.
00:18:54캐시 태그별로 퍼지할 수 있으므로 'fetch-data' 태그를 입력합니다.
00:18:58그런 다음 콘텐츠를 무효화(Invalidate)할지 삭제(Delete)할지 선택할 수 있습니다.
00:19:04무효화는 백그라운드에서 페이지가 재생성되는 동안 기존의 오래된(stale) 페이지를
00:19:09계속 보여줄 수 있도록 하므로, 다음 요청 시 사용자가 대기 시간을 겪지 않게 해줍니다.
00:19:14그래서 사용자에게 권장되는 방식입니다.
00:19:16이제 퍼지 버튼을 눌러보겠습니다.
00:19:21페이지를 새로고침해도 처음에는 시간이 바뀌지 않고 계속 유지됩니다.
00:19:27하지만 다시 한번 새로고침하면 시간이 초기화되어
00:19:33방금 막 재생성되었음을 확인할 수 있습니다.
00:19:34콘텐츠 삭제 방식으로도 같은 작업을 수행할 수 있습니다.
00:19:39콘텐츠를 삭제하고 퍼지한 뒤 페이지를 새로고침하면
00:19:45시간이 즉시 초기화되는 것을 볼 수 있습니다.
00:19:48이는 차단 방식의 재검증(Blocking Revalidate)이 되어 다음 요청이
00:19:53페이지 재생성이 완료될 때까지 기다렸다가 서빙되기 때문입니다.
00:19:55따라서 콘텐츠를 갱신할 때는 백그라운드 재생성 중에 기존 콘텐츠를 보여주는
00:20:00무효화(Invalidate) 방식을 사용하시길 권장합니다.
00:20:05캐시 태그뿐만 아니라 소스 이미지도 같은 방식으로 퍼지할 수 있습니다.
00:20:11캐시의 모든 콘텐츠를 한꺼번에 퍼지할 수도 있는데,
00:20:16앞서 논의한 CDN 캐시나 런타임/데이터 캐시 두 계층 모두 가능합니다.
00:20:21이것은 모든 콘텐츠를 삭제하므로 다음 요청은
00:20:28콘텐츠가 새로고침될 때까지 대기하게 됩니다.
00:20:30오늘 준비한 새로운 기능은 여기까지이며, 이제 질문을
00:20:39받아보도록 하겠습니다. 궁금한 점이 있으면 말씀해 주세요.
00:20:43감사합니다.
00:20:44네, 채팅창에 몇 가지 질문이 올라와 있네요.
00:20:50첫 번째 질문부터 시작하겠습니다.
00:20:51Vercel 앱을 배포한 후 CDN을 어떻게 활용하며, 비용은 어떻게 청구되나요?
00:21:10네, 좋은 질문입니다.
00:21:11모든 Vercel 애플리케이션은 CDN을 무료로 제공받습니다. 즉, 여러분이
00:21:20애플리케이션을 배포하면 저희가 자동으로 콘텐츠를 분석하여
00:21:27Vercel CDN에서 서빙하기 최적화된 상태로 만듭니다.
00:21:28만약 ISR을 지원하는 프레임워크를 사용 중이라면, SSG(정적 사이트 생성)를 실행하고
00:21:35해당 콘텐츠를 ISR 캐시와 CDN 캐시에 매핑합니다.
00:21:40따라서 시작하기 위해 별도의 설정을 할 필요가 거의 없습니다.
00:21:46하지만 원하신다면 얼마든지 커스텀할 수 있습니다. 예를 들어 API 요청을 정의할 때
00:21:53캐시 제어 헤더를 직접 설정하거나, 아까 야시가 보여준 것처럼
00:22:00표준 디렉토리가 아닌 다른 곳에서 정적 콘텐츠를 서빙하는 경우
00:22:07해당 콘텐츠 전체에 대한 캐싱 규칙을 설정할 수 있습니다.
00:22:11Hobby 사용자에게는 무료로 제공되며, Pro 사용자의 경우
00:22:21일정량의 요청과 대역폭이 할당됩니다. 그 이후에는 리전에 따른 요율이 적용되며
00:22:26자세한 내용은 저희 사이트에서 확인하실 수 있습니다.
00:22:27두 번째 질문입니다.
00:22:31이미 앱 앞에 다른 CDN을 사용하고 있는 경우는 어떻게 하나요?
00:22:38어떻게 Vercel로 전환할 수 있을까요?
00:22:40매우 좋은 질문이네요.
00:22:44이 부분도 충분히 지원 가능합니다.
00:22:47마이그레이션을 위해 거쳐야 할 단계는 크게 두 가지라고 생각합니다.
00:22:54첫째, Vercel 앞에 이미 CDN을 사용 중이라면 Vercel이 캐싱과 서빙을
00:22:58직접 처리할 수 있도록 콘텐츠를 통과시켜야 합니다.
00:23:04그렇게 라우팅 규칙과 모든 설정을 Vercel에 구성하고 나면,
00:23:10DNS를 Vercel로 변경하여 모든 요청이
00:23:15자동으로 Vercel로 유입되게 하면 됩니다.
00:23:18다운타임 없이 Vercel DNS로 마이그레이션하는 방법에 대한 가이드를
00:23:23댓글로 링크해 드리겠습니다.
00:23:25설정 방식의 차이에 대해 궁금한 점이 있다면,
00:23:33다른 CDN의 개념을 Vercel의 개념으로 매핑해주는
00:23:37지식 베이스 가이드 링크도 함께 제공해 드리겠습니다.
00:23:41이 질문은 앤드류에게 넘겨볼까요?
00:23:49CDN 트래픽은 어떻게 분석할 수 있나요?
00:23:52네, 몇 가지 방법이 있습니다.
00:23:55먼저 아까 시연했던 방식이 있습니다.
00:24:00제 목소리 들리시나요?
00:24:00네, 알겠습니다. 감사합니다.
00:24:04아까 보여드린 대로 CDN 개요(Overview) 탭을 보면 특정 기간 동안
00:24:11Vercel CDN에서 발생하는 프로젝트 트래픽의 스냅샷을 볼 수 있습니다.
00:24:17또 다른 방법은 관측성(Observability) 메뉴의 Edge 요청 페이지로 이동하여
00:24:24다양한 카테고리별로 트래픽을 세분화해서 보는 것입니다.
00:24:34네, Vercel의 관측성 페이지에는 아주 풍부한 상세 분석 정보가 있으니
00:24:44그곳에서 더 자세히 살펴보시기 바랍니다.
00:24:48자주 나오는 또 다른 질문은 'CDN이 DDoS 공격을 방어해 주는지',
00:24:57또는 'CDN과 함께 제공되는 보안 기능은 무엇인지'입니다.
00:25:04네, 훌륭한 질문입니다.
00:25:06Vercel은 별도의 비용 없이 기본적으로 DDoS 완화 기능을 제공합니다.
00:25:12이 말은 무료로 제공된다는 뜻이며, 이 기능은
00:25:19매우 광범위한 유형의 공격으로부터 여러분의 프로젝트를 보호합니다.
00:25:23저희는 웹 애플리케이션 방화벽(WAF)과 L3, L4, L7 계층의 보호 기능을 갖추고 있어,
00:25:32단순히 특정 경로에 요청이 급증하는 공격부터
00:25:39IP 주소를 계속 바꾸는 정교한 공격까지 모두 탐지하고
00:25:47방어할 수 있습니다.
00:25:48네, 모든 프로젝트에 기본적으로 포함되는 기능입니다.
00:25:52원하신다면 커스텀 규칙을 정의할 수도 있습니다.
00:25:57대시보드의 방화벽 탭에서 설정 가능한데, 이 주제는
00:26:02나중에 별도 세션으로 꼭 다뤄봐야겠네요.
00:26:04그곳에서 특정 대상을 차단하고 싶은 경우
00:26:09애플리케이션에 맞는 더 구체적인 규칙을 정의할 수 있습니다.
00:26:13보안은 정말 큰 주제라 세션 하나를 통째로 할애할 만하죠.
00:26:22다양한 흐름에서 발생하는 마찰을 줄이기 위해
00:26:27여러분이 노력하시는 모습이 정말 보기 좋습니다.
00:26:29약간 뜬금없는 질문일 수 있지만, 트위터에서
00:26:34CDN 페이지의 2D에서 3D로 전환되는 애니메이션이 화제가 됐더라고요.
00:26:38그걸 한번 보여주실 수 있을까요? 관련해서 한 말씀 해주신다면요?
00:26:42네, 제 화면을 다시 공유하겠습니다.
00:26:49못 보신 분들을 위해 보여드릴게요.
00:26:52CDN 개요 페이지에 2D 지도가 있는데, 지구본 아이콘을 클릭하면
00:27:003D 지도가 나타납니다.
00:27:01매우 인터랙티브해서 원하는 방향으로 돌려볼 수도 있고,
00:27:07마우스를 올려보거나 다시 원래대로 전환할 수도 있습니다.
00:27:12네, 바로 이 기능입니다.
00:27:18감사합니다.
00:27:19그래픽도 멋지고, 관측성 측면에서도 트래픽 위치를 시각화해서 본 뒤
00:27:24더 깊이 파고들 수 있게 해주는 점이 정말 좋네요.
00:27:29정확합니다.
00:27:30네.
00:27:32이 기능들이 생기기 전에 사람들이 겪었던 문제와 관련된 질문인데,
00:27:43저도 아직 최신 기능들을 다 써보지 못해서
00:27:47개인적으로 궁금한 점이기도 합니다.
00:27:50워낙 다 새롭잖아요.
00:27:51설정 오류를 방지하거나 감지하기 위해, 혹은 내부 서비스나
00:27:58민감한 데이터가 노출되지 않도록 하기 위해
00:28:03어떤 안전 장치들이 마련되어 있나요?
00:28:04네, 물론입니다.
00:28:07내부 경로를 숨기기 위한 여러 가지 보호 장치가 있습니다.
00:28:15기본적으로 프로젝트에는 배포 보호(Deployment Protection) 기능이 있어,
00:28:23Vercel 인증이나 비밀번호를 사용해 원치 않는 방문자로부터 사이트 전체를 보호할 수 있습니다.
00:28:31또한 쿠키나 인증 라이브러리를 사용해
00:28:43특정 경로를 보호할 수도 있습니다.
00:28:46특정 경로를 보호하기 위해 커스텀 방화벽 규칙을 사용할 수도 있고요.
00:28:54이처럼 다양한 옵션이 존재합니다.
00:28:56대시보드 내에서 어떤 경로가 서빙되고 있는지 관측할 수 있으며,
00:29:04매 배포마다 제공되는 배포 요약(Deployment Summary)을 통해
00:29:10각 경로와 함수에 대한 정보를 검토할 수 있습니다.
00:29:15한번 시도해 보시고, 더 자세한 내용이 궁금하시면 기꺼이 답변해 드리겠습니다.
00:29:22멋지네요.
00:29:34자, 채팅창에서 본 질문 중에 조금 더
00:29:41자세한 설명이 필요할 것 같은 질문이 하나 더 있네요.
00:29:43프로젝트 레벨의 경로 설정을 사용해 외부 API나 마이크로서비스로 트래픽을 보낼 수 있나요?
00:29:51네, 당연히 가능합니다.
00:29:55관련된 템플릿이 있는데, 야시가 이 부분을
00:30:04담당해 왔으니 직접 이야기해 보는 게 어떨까요?
00:30:06물론이죠. 모든 API 요청을 외부 오리진으로 리라이트할 수 있습니다.
00:30:11앞으로 몇 주간 더 많은 내용을 공유하겠지만, 라우팅 규칙을 설정하면 됩니다.
00:30:15화면을 공유해서 보여드리고 싶은데요.
00:30:18라우팅 규칙을 설정할 때, 예를 들어 제 API로부터
00:30:35임의의 외부 오리진(예: [https://api-external.com](https://www.google.com/search?q=https://api-external.com))으로
00:30:44리라이트를 설정하여 API를 외부 오리진으로 프록시할 수 있습니다.
00:30:50네, 확실히 지원되는 기능이며 CLI나
00:31:00다른 원하는 방식을 통해서도 설정할 수 있습니다.
00:31:04좋네요. 서비스를 부분적으로 이전할 때 매우 편리하겠어요.
00:31:10저희 커뮤니티 사이트에서도 추가 기능을 구축하기 위해 이 방식을 조금 쓰고 있거든요.
00:31:16모든 것이 Discourse(커뮤니티 솔루션)의 일부는 아니지만, 그렇다고
00:31:21Discourse를 완전히 떠나고 싶지도 않았죠. 그게 사이트의 기반이니까요.
00:31:25그 위에 기능을 얹을 수 있어서 정말 편리했습니다.
00:31:27네, 정말 큰 돌파구가 되었죠.
00:31:31캐싱 레이어, 방화벽, 그리고 사용하기 쉬운 구문으로
00:31:35동작을 결정할 수 있는 라우팅 규칙의 이점을 누리면서,
00:31:42기존 콘텐츠가 있는 서로 다른 백엔드를 활용할 수 있다는 점이 매우 유용하다고 생각합니다.
00:31:48좋습니다. 채팅창 질문은 다 확인한 것 같네요. 마지막으로 다음 행보는 무엇인가요?
00:31:56살짝 알려주실 수 있나요?
00:32:00오, 좋은 질문이네요.
00:32:02준비 중인 것들이 많지만, 앞서 말씀드렸던
00:32:09보안 관련 콘텐츠가 곧 더 많이 나올 예정이니 기대해 주세요.
00:32:15바쁘신 와중에 함께해 주셔서 감사합니다. 두 분을 이제
00:32:22보내드려야겠네요. 시간 내주셔서 정말 감사합니다.
00:32:25초대해 주셔서 감사합니다.
00:32:28네, 정말 감사합니다.
00:32:30모두 감사합니다.
00:32:30정말 유익한 세션이었네요. 마야, 다음 일정은 어떻게 되죠?
00:32:37아, 목요일에 샌드박스 무엇이든 물어보세요(AMA) 세션이 있습니다.
00:32:45채널 고정해 주세요.
00:32:47그리고 이번 주말에 정말 흥미로운 이벤트가 있어서 홍보하고 싶네요.
00:32:54'Zero to Agent' Vercel 이벤트가 있고, 6월에는 'Ship' 컨퍼런스도 열립니다.
00:33:03아직 못 보셨다면 [vercel.com/ship](https://vercel.com/ship) 에 방문해서 자신만의 여행 가방을 만들어보세요.
00:33:09디자인 팀이 이 페이지에 정말 공을 많이 들였으니 꼭 확인해 보시고,
00:33:15전 세계에서 열리는 이벤트 일정도 챙기세요. 더 많은 커뮤니티 세션 정보는
00:33:21[community.vercel.com/events](https://www.google.com/search?q=https://community.vercel.com/events) 에서 확인하실 수 있습니다.
00:33:26모두 감사합니다. 즐거웠어요.
00:33:28안녕히 계세요!