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://community.vercel.com/live) にサインオンして、
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その実装に関する素晴らしいブログ記事を
00:01:15最近 Vercel のウェブサイトで公開しました。
00:01:19今チャットにリンクを貼りましたので、
00:01:22興味のある方はぜひ読んでみてください。
00:01:25それから、すでにお気づきの方もいるかもしれませんが、
00:01:28最近、変更履歴（Changelog）の中で
00:01:30Vercel CDN 関連のアップデートをたくさんリリースしています。
00:01:33そこで今日は、開発チームのメンバーを招いて、
00:01:35CDN について詳しく話を聞くとともに、
00:01:37構築の背景や使い方、
00:01:40利用可能な全機能について紹介してもらいたいと思います。
00:01:43それでは、ステージにお迎えしましょう。
00:01:45マーク、アンドリュー、ヤシュの登場です。
00:01:48では、バトンタッチしますね。
00:01:51エイミー、マイア、ありがとう。
00:01:55皆さん、こんにちは。マークです。
00:01:57CDN チームでソフトウェアエンジニアをしています。
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:58POP（Point of Presence）へと引き込みます。
00:03:01この POP は世界中に配置されています。
00:03:03地理的に分散された拠点は、世界に 125 以上あります。
00:03:07そこからリクエストは Vercel のリージョンへ転送され、そこで TLS を終端し、
00:03:14リクエストを処理します。
00:03:16ここで行われるのがキャッシュ処理です。
00:03:18ルーティングもここで行います。
00:03:19もしキャッシュにヒットしなかった場合は、
00:03:21リクエストを関数（Function）リージョンに転送します。
00:03:25そこで ISR（Incremental Static Regeneration）による再生成などが行われます。
00:03:29キャッシュの詳細については、後ほどこの図を使って詳しく説明します。
00:03:33この仕組みにより、単なる入り口（Ingress）だけでなく、
00:03:35ファイアウォール、ルーティング、
00:03:38そして Skew Protection（バージョン不整合保護）のようなトラフィック管理、
00:03:40ローリングリリース、マイクロフロントエンドなどの機能も利用できます。
00:03:44では、Vercel CDN の何が特別なのでしょうか？
00:03:49それは、CDN 自体がフレームワークのコードをネイティブに理解している点です。
00:03:52つまり、プロジェクトを Vercel にデプロイすると、
00:03:56あなたが書いたコードや
00:03:57設定が、自動的に Vercel CDN が
00:04:00直接処理できるアーティファクトへと変換されるのです。
00:04:04他の多くの CDN では、これらを自分で設定する必要がありますが、
00:04:07Vercel ならフレームワークを使っているだけで、標準機能として付いてきます。
00:04:10リクエストの高速化や、
00:04:13先ほど述べた高可用性も標準装備です。
00:04:16また、ISR（Incremental Static Regeneration）
00:04:19という機能も備わっています。
00:04:21これは Vercel において第一級オブジェクトとして扱われており、
00:04:23コードを再デプロイすることなく、
00:04:27API リクエストやウェブフックを
00:04:29特定のページに送るだけで、そのページを更新することができます。
00:04:34さらに、すべてのプロジェクトにおいて、
00:04:36常時稼働の DDoS 対策が制限なしで統合されています。
00:04:40これは無料で利用でき、アプリケーション全体の脅威を一貫して処理します。
00:04:46さらに、設定可能な WAF（Web Application Firewall）やボット管理機能も備えています。
00:04:51この数ヶ月間、
00:04:53私たちは Vercel ダッシュボード内で利用できる
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ブログ用のルートがいくつか入っています。
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オーバービューページが表示され、
00:06:35指定した期間内にプロジェクトのトラフィックを
00:06:39処理している Vercel リージョンが一覧表示されます。
00:06:45ここでは「過去 12 時間」を表示しています。
00:06:47サンフランシスコやワシントンからのトラフィックが
00:06:49サイトに届いているのがわかりますね。
00:06:52これらにカーソルを合わせると詳細を確認できます。
00:06:55また、オブザーバビリティ（観測性）機能を開いて、
00:06:58トラフィックデータをさらに深く掘り下げることも可能です。
00:07:04面白いのは、3D マップで表示したり、
00:07:082D マップに戻したりできる点です。
00:07:10他にも、こちらでより詳細なオブザーバビリティデータを確認でき、
00:07:17それぞれの詳細ページへのリンクも用意されています。
00:07:22これがオーバービューページです。
00:07:27プロジェクトのトラフィック状況を
00:07:30瞬時に把握できるように設計されています。
00:07:35また、関数の配置場所もここで確認できます。
00:07:38このプロジェクトの関数リージョンはワシントンになっていますね。
00:07:44次にデモをするのは、リダイレクトです。
00:07:48一括リダイレクト（Bulk Redirects）ですね。失礼。
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例えば、/demo へのアクセスを、
00:08:44/blog/2020/10/style のような、
00:08:51具体的なページへ飛ばしたいとします。
00:08:57「Create」をクリックするとバックグラウンドで作成され、
00:09:02変更内容の確認（Review Changes）モーダルが表示されます。
00:09:07現時点では、これらの変更はまだ本番環境には反映されていません。
00:09:11ステージング環境にある状態なので、
00:09:13新しいリダイレクトをここでテストできます。
00:09:18ここをクリックすると……あ、このページは存在しませんでしたね。
00:09:24まあ、仕組みとしてはこんな感じです。
00:09:27本番に反映させたい場合は「Publish」を、
00:09:30ステージングに留めておきたい場合は「Cancel」をクリックします。
00:09:34「Staging Changes」タブから、保留中の変更を確認できます。
00:09:39これをパブリッシュすれば、
00:09:42ステージングのリストからは消えて、
00:09:45本番環境（Production）に表示されるようになります。
00:09:58検索も可能です。
00:10:01履歴（History）も確認できます。
00:10:05現在の変更を以前のバージョンと比較したり、
00:10:14必要であればそのバージョンを復元（Restore）したりもできます。
00:10:17「Restore」を押すと、先ほどの demo 設定は消えるはずです。
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では、2 つ目のルートを作成します。今度はもう少し複雑なものです。
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」に書き換えています。
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これはリダイレクトではなく「書き換え（rewrite）」を使用したからです。では、これを公開しましょう。
00:14:22最後にお見せしたい書き換えルールは、キャッシュヘッダーに関するものです。
00:14:26これはサイトのパフォーマンスを向上させるために設定できるもので、
00:14:30特に静止画の最適化を行いたいと思います。
00:14:33静止画のキャッシュを最適化するように指定し、
00:14:41画像に対して「public, max-age=1 year, immutable」というCache-Controlヘッダーを設定します。
00:14:52これもAIでルールを生成しましょう。
00:14:55これで、すべての画像に1年間のキャッシュを設定するルールが作成されました。
00:14:59これにより、ブラウザは毎回サーバーに画像を取りに行く代わりに、
00:15:03ローカルから取得しようとするため、パフォーマンスが向上し、コストも削減できます。
00:15:08Cache-Controlヘッダーには他にも様々な値を設定できますが、
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次にお見せしたいのは「履歴（History）」ページです。
00:15:49これは、先ほどアンドリューが「一括リダイレクト」のページでデモしたものと同様です。
00:15:52過去の変更履歴を確認することができます。
00:15:55例えば、直近の変更である「キャッシュルールの追加」を取り消したいとします。
00:16:00この「復元（Restore）」ボタンを押すだけで、即座に元に戻せます。
00:16:04すると、ほぼ一瞬でルールが消えたことがわかります。
00:16:09検索やタイプ別のフィルタリングも可能なので、リダイレクトだけを表示することもできます。
00:16:14以上が「Project Rewriting」の機能です。
00:16:16デモしたすべての機能は、API、CLI、SDKからも利用可能です。
00:16:22ありがとうございました。では、マークに代わります。
00:16:26ヤシュ、ありがとう。素晴らしいデモでした。
00:16:29自然言語で設定できる機能はいいですね。
00:16:31さて、私からは新しいCDNタブの最後の機能である「キャッシュ（Caching）」タブについて説明します。
00:16:41ヤシュが話していたCache-Controlヘッダーの設定と同様に、
00:16:46VercelのCDNでは、ISR（Incremental Static Regeneration）などの機能を使えば、
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リクエストでCache-Controlヘッダーを使用している場合、
00:17:52ドキュメントにある通り、これもCDNキャッシュを利用します。
00:17:56ISRキャッシュはスキップしますが、関数やランタイムのキャッシュは依然として利用可能です。
00:18:00最後に、Vercel CDNで外部のオリジンへ書き換え（rewrite）を行っている場合、
00:18:07例えばVercelのバックエンドへプロキシしているなら、
00:18:14キャッシュやファイアウォールといったVercel CDNの利点を得つつ、リクエストは外部オリジンへ送られます。
00:18:18そして、これが「キャッシュのパージ（消去）」機能につながります。
00:18:22何らかの理由でコンテンツを再検証（revalidate）したい場合を考えましょう。
00:18:26このページには、特定のキャッシュタグ（cache tag）を使ってfetchを行う、ISRの例があります。
00:18:36ここでは「fetch-data」というタグを使っています。
00:18:38約1時間前に生成されたことがわかります。この「fetch-data」タグが付いています。
00:18:45これをパージして、ページを再生成させたい場合、いくつかの選択肢があります。
00:18:54ここでは「キャッシュタグでパージ」を選択し、「fetch-data」タグを入力します。
00:18:58そして、コンテンツを「無効化（Invalidate）」するか「削除（Delete）」するかを選べます。
00:19:04「無効化」を選択すると、バックグラウンドでページが再生成されている間、
00:19:09古いページ（stale page）をそのまま提供し続けることができます。ユーザーを待たせないため、
00:19:14こちらの方が推奨される方法です。
00:19:16実際にやってみましょう。「Purge」をクリックします。
00:19:21ページを更新しても、表示時間はまだ変わっていません。数値は増え続けています。
00:19:27しかし、もう一度更新すると、時間がリセットされ、
00:19:33新しく再生成されたことがわかります。
00:19:34コンテンツを「削除」する場合も同様のことができます。
00:19:39コンテンツを削除してパージを実行すると、次にページを更新したときには、
00:19:45時間は即座にリセットされます。
00:19:48これはブロッキング再検証のような動きになり、次のリクエストは
00:19:53ページが再生成されるまで待機してから提供されるためです。
00:19:55コンテンツを更新したい場合は、バックグラウンドでの生成中に古い内容を出せる
00:20:00「無効化」の使用をお勧めします。
00:20:05キャッシュタグだけでなく、ソース画像についても同様の方法でパージできます。
00:20:11また、キャッシュ内のすべてのコンテンツをパージすることも可能です。
00:20:16先ほど話した2つのレイヤー、CDNキャッシュかランタイム/データキャッシュのいずれかで実行できます。
00:20:21これは全コンテンツを削除するため、次のリクエストは
00:20:28更新が終わるまでブロックされます。
00:20:30本日紹介する新機能は以上です。ここからは質問を受け付けますので、
00:20:39知りたいことがあれば何でも聞いてください。
00:20:43ありがとうございました。
00:20:44皆さん、チャットにいくつか質問が来ています。
00:20:50最初の質問からいきましょう。
00:20:51「Vercelアプリをデプロイした後、どうすればCDNを利用できますか？ また、料金体系はどうなっていますか？」
00:21:10いい質問ですね。
00:21:11すべてのVercelアプリケーションは、無料でCDNを利用できます。
00:21:20アプリをデプロイすると、自動的にその内容が解析され、
00:21:27Vercel CDNでの配信に最適化されます。
00:21:28ISRをサポートするフレームワークを使っていれば、SSG（静的サイト生成）を実行し、
00:21:35その内容をISRキャッシュとCDNキャッシュにマッピングします。
00:21:40ですので、特に設定しなくても、すぐに使い始めることができます。
00:21:46もちろん、カスタマイズも可能です。例えばAPIリクエストを定義する場合、
00:21:53Cache-Controlヘッダーを自分で設定することもできますし、ヤシュが見せたように、
00:22:00標準とは異なるディレクトリから静的コンテンツを配信しているなら、
00:22:07それらすべてにキャッシングルールを適用することもできます。
00:22:11Hobbyプランの方は無料で提供されます。Proプランの方は、
00:22:21リクエスト数と帯域幅の割り当てがあり、それを超えると地域に応じたレートで課金されます。
00:22:26詳細はサイトでご確認いただけます。
00:22:272つ目の質問です。
00:22:31「すでに別のCDNをアプリの前段に使っている場合、
00:22:38どうすればVercelに切り替えられますか？」
00:22:40これも非常にいい質問ですね。
00:22:44もちろんサポートしています。
00:22:47移行には大きく分けて2つの段階があると思います。
00:22:54まずは、Vercelの前段で既存のCDNを使いつつ、内容をそのまま通過させ、
00:22:58Vercel側でキャッシュや配信、
00:23:04ルーティングルールを処理するようにします。Vercel側での設定が完了したら、
00:23:10あとはDNSを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:49「CDNのトラフィックをどのように分析できますか？」
00:23:52はい、いくつか方法があります。
00:23:551つは、先ほど私がデモした方法です。
00:24:00声、聞こえていますか？
00:24:00はい、大丈夫ですね。ありがとうございます。
00:24:04まず、先ほどお見せした「CDN Overview」タブで、
00:24:11指定した期間のプロジェクトのトラフィック状況をスナップショットで確認できます。
00:24:17もう1つは、オブザーバビリティの「Edge Request」ページです。
00:24:24ここでは、すべてのトラフィックを様々なカテゴリーで詳しく分析できます。
00:24:34そうですね、Vercelのオブザーバビリティ・ページには豊富な分析機能があるので、
00:24:44ぜひいろいろと触ってみてください。
00:24:48よく聞かれるもう1つの質問は、CDNでDDoS攻撃に対処できるのか、
00:24:57あるいはCDNによってどのようなセキュリティが追加されるのか、という点です。
00:25:04ええ、素晴らしい質問です。
00:25:06Vercelには、追加料金なしでDDoS緩和機能が標準で備わっています。
00:25:12つまり無料で利用でき、Vercelは多種多様な
00:25:19攻撃から自動的にサイトを保護します。
00:25:23WAF（ウェブアプリケーションファイアウォール）に加えて、L3、L4、L7レベルの保護機能を備えています。
00:25:32特定のパスへの急激なリクエスト増から、IPアドレスを次々と変えるような
00:25:39巧妙な攻撃まで、システムが検知して
00:25:47皆さんを守ります。
00:25:48はい、すべてのプロジェクトで最初から有効になっています。
00:25:52必要であれば、カスタムルールを定義することも可能です。
00:25:57これはダッシュボードの「Firewall」タブで設定できます。これについても、
00:26:02近いうちに改めてセッションを設けたいと思います。
00:26:04特定の何かをブロックしたい場合には、
00:26:09そこでアプリケーションに合わせた詳細なルールを設定できます。
00:26:13セキュリティは非常に重要なテーマなので、それだけで1回分使えますね。
00:26:22こうした様々なフローにおける摩擦を減らそうとする皆さんの取り組み、本当に素晴らしいと思います。
00:26:27ところで、少し話は逸れますが、
00:26:29TwitterでCDNページの2Dから3Dへのアニメーションが絶賛されていました。
00:26:34それを見せてもらえますか？ 何か裏話があればそれもぜひ。
00:26:38わかりました。もう一度画面を共有しますね。
00:26:42まだ見ていない方のために。
00:26:49「CDN Overview」ページには2Dマップが表示されていますが、地球儀のアイコンをクリックすると、
00:26:523Dマップに切り替わります。
00:27:00かなりインタラクティブで、好きな方向に回転させることができます。
00:27:01マウスを合わせれば元に戻すこともできます。
00:27:07こんな感じです。
00:27:12ありがとうございます。
00:27:18素晴らしいグラフィックですね。トラフィックの場所を視覚的に把握してから、
00:27:19さらに深く分析を掘り下げていけるのが、とても使いやすそうです。
00:27:24まさにその通りです。
00:27:29もう1つ、よくある問題に関連した質問です。これらの機能が追加される前に、
00:27:30多くの人が直面していたことかもしれませんし、私も最新の状況をすべて
00:27:32把握しているわけではないので気になっていました。
00:27:43すべてがあまりに新しいですからね。
00:27:47設定ミスを防いだり、あるいは内部的なサービスや機密データが
00:27:50意図せず公開されてしまうのを防ぐための安全策には、どのようなものがありますか？
00:27:51はい、もちろんです。
00:27:58内部ルートを隠すための保護機能には、いくつかの種類があります。
00:28:03デフォルトでプロジェクトには「Deployment Protection」が備わっており、Vercel認証や
00:28:04パスワードを使って、望まない訪問者からサイト全体を保護することができます。
00:28:07また、特定のルートに対して
00:28:15クッキーや認証ライブラリを使用して保護することも可能です。
00:28:23特定のルートを保護するために、カスタムのファイアウォールルールを使うこともできます。
00:28:31このように、多くの選択肢があります。
00:28:43ダッシュボード上では、どのルートが提供されているかを高い透明性で確認できます。
00:28:46また、すべてのデプロイごとに、
00:28:54各ルートや関数に関する情報を確認できるデプロイ概要が表示されます。
00:28:56ぜひ試してみてください。もっと詳しいことが知りたければ、いつでもお答えします。
00:29:04素晴らしいですね。
00:29:10さて、他にもよく見かける質問があります。先ほど少し触れられていたかもしれませんが、
00:29:15もう少し詳しく教えてください。
00:29:22「プロジェクトレベルのルートを使用して、外部APIやマイクロサービスにトラフィックを振り分けることはできますか？」
00:29:34はい、もちろん可能です。
00:29:41テンプレートもありますが、これについてはヤシュが取り組んでいたので、
00:29:43彼から話してもらいましょうか。
00:29:51ええ、ぜひ。すべてのAPIリクエストを外部オリジンへ書き換えることができます。
00:29:55詳細は数週間以内に共有しますが、書き換えルールを設定すれば可能です。
00:30:04画面を共有してお見せしますね。
00:30:06書き換えルールを設定する場合、例えば自分のAPIから、
00:30:11「[https://api-external.com](https://www.google.com/search?q=https://api-external.com)」のような外部オリジンへの書き換えを
00:30:15このように設定して、外部にプロキシすることができます。
00:30:18これは間違いなくサポートされていますし、CLIや
00:30:35他のどんな方法からでも設定可能です。
00:30:44いいですね。段階的に移行しているときなどは、とても助かります。
00:30:50私たちのコミュニティサイトでも、追加機能を構築するために活用しています。
00:31:00すべてをDiscourseで賄っているわけではありませんが、かといってDiscourseを
00:31:04完全に離れるわけにもいきませんから。コミュニティサイトの基盤として使いつつ、
00:31:10その上に機能を重ねられるのは、非常に便利だと感じています。
00:31:16ええ、それは間違いなく大きなブレイクスルーでしたね。
00:31:21キャッシュレイヤーやファイアウォール、そしてルーティングルールのメリットを享受しつつ、
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あ、木曜日に「Sandbox Ask Me Anything（何でも聞いて）」があります。
00:32:30ぜひ楽しみにしていてください。
00:32:30それから、今週末には「Zero to Agent」のVercelイベントなど、エキサイティングな催しがたくさんあります。
00:32:376月には「Ship」も控えています。まだ見ていない方は、
00:32:45[vercel.com/ship](https://vercel.com/ship) にアクセスして、自分だけのスーツケースを作ってみてください。
00:32:47デザインチームが総力を挙げて作ったページなので、ぜひチェックしてください。世界中で開催される
00:32:54イベントの日程も忘れずにチェックを。それからコミュニティ・セッションも続々予定されています。
00:33:03詳細は [community.vercel.com/events](https://www.google.com/search?q=https://community.vercel.com/events) で確認できます。
00:33:09皆さん、ありがとうございました。では！
00:33:15バイバイ！
00:33:21[community.vercel.com/events에서](https://www.google.com/search?q=https://community.vercel.com/events%EC%97%90%EC%84%9C) 이 모든 것들을 확인하실 수 있습니다.
00:33:26여러분 감사합니다, 즐거운 시간이었습니다.
00:33:28안녕히 계세요!