Top Trends in Cybersecurity for 2024 | 
エッジで動的コンテンツを戦略的にキャッシュする方法についての入門:どのように機能し、従来のCDNより優れているのか。
パフォーマンスに関して言えば、ほとんどのCDNはいくつかのことをうまく行う。静的ファイルを迅速に配信し、ピークトラフィック時間にネットワークオーバーヘッドを提供し、ネットワークレベルのDDoS攻撃から保護する。 歴史的には、画像、ビデオ、その他の静的コンテンツなどの資産のパフォーマンスとセキュリティが目に見えるほど向上していることを意味していた。 ウェブ技術が進化するにつれて、前述の利点は本質的にCDNが主流のウェブ配信ソリューションの一部になったときに確立されたテーブルステークスにすぎない。
問題は、CDNアーキテクチャが数年前に開発されたことである。 ウェブサイトのアーキテクチャは飛躍的に変化したが、ほとんどのCDNは変化する風景に適応していない。
これを読んでいるなら、サーバー側でレンダリングされた動的コンテンツのある程度でおそらく設計されたサイトを持っている。 レガシーCDNを使用している場合、ブラウザの開発者ツールを起動するときにレスポンスヘッダーにこのようなものが表示されることに慣れているだろう。
cdn-cache:パス
プロバイダに応じてこのペアの値を代入する: pass、miss、dynamic-content。 意味はすべて同じだ
「この反応は、あまりにも複雑だったので、あなたの出身地から来ている。」
そして、それはあなたのサイトのパフォーマンスに何を意味するか? ダイナミックコンテンツはほとんどの場合、オリジンからプレーンでシンプルなものであるため、スピードを犠牲にすることになる。 カテゴリや商品ページ、記事、APIリクエストはほぼ100%オリジンに直接送信される。 ほとんどのCDNは同じような被害を受けている。 運が良ければ、サーバーの動的応答の約10~11%をエッジキャッシュに圧縮することができる。 キャッシュルールを微調整して、即座にロードされ、ネイティブアプリのように感じるウェブサイトを作成するための十分なきめ細かな制御がないことがすぐにわかる。
Edgioへようこそ
Edgio社は、世界に300以上のPOPと250 TBの容量を持つ、地球上で2番目に大きいCDNを誇っている。 世界中のどこにいても安全で高性能。 しかし、前に言ったように、それらは単なるテーブルステークスである。 Edgioでは、CDN問題に異なる視点からアプローチしている。 20年前のルールに縛られるのではなく、今後20年以上にわたり、レスポンシブで柔軟なCDNを構築してきた。 世界初のコード設定可能なCDNを開発し、開発者とDevOpsチームメンバーがWebサイトを配信するために必要な柔軟性ときめ細かな制御を1秒未満で実現。
魔法ではなく、CDNの未来であり、現在利用可能
この時点では、おそらくこれは魔法のように聞こえると考えているだろう、まあそれはそのように感じるかもしれないが、それはWebアプリケーション配信の未来である。 DevOpsチームとエンジニアリングチームを分けるのではなく、CDNロジックをローカル環境、ステージング環境、本番環境に組み込むことで、チームをまとめる。
必要なものを簡単にキャッシュして、必要な期間
すべてのEdgio構成は、ユーザーが所有し、制御するコードリポジトリから始まる。 すべての展開は一意でアトミックであるため、1分以内に任意のバージョンにロールバックできる。 プロジェクトと一緒に構成を自由にデプロイしたり、別のワークフローで保守したりできる。 私たちの顧客のほとんどは、CI/CDパイプラインと通常の開発フローにCDNルールを組み込むことになっている。 その結果、性能と制御を犠牲にすることなく現像速度が向上する。 コードベースと同様にCDNを管理する。
ポータルで構成の変更を公開したり、APIリクエストを作成したりすることに慣れている。 エドジオはどう違うの?
APIエンドポイントと従来のユーザーインターフェイスは必要に応じて利用可能だが、キャッシュヒット率、サイトパフォーマンス、開発者の速度を最大限に引き出すためには、EdgeJSを使い始めることをお勧めする。 飛び込んでみよう。
プロジェクトが初期化されると、推奨されるルールセットを含む単純な設定ファイルから始めることになる。 設定は、世界で最も人気のある開発言語であるJavaScriptで記述され、CLIを使用して数秒でデプロイされる。 1つのファイルでオリジンサーバーを定義する。
module.exports = {
backends: {
origin: {
domainOrIp: "example.com",
hostHeader: "example.com",
},
},
APIエンドポイント、メディアバケット、または必要なその他のオリジンを追加する。 数行のコードで簡単に。
キャッシングの柔軟性についてはどうだろうか。
素晴らしい質問、これは楽しみが始まるところである。 ルートを設定してキャッシュルールを書くことができるように、別のファイルを追加する。 コンテンツのルールを作成し、必要に応じてエッジ、ブラウザ、サービスワーカーのキャッシュルールを設定する。
CDNがうまく処理する静的な資産から始めよう。
.match(
'/:path*/:file.:ext(js|css|png|svg|jpg|woff)',
({ cache, proxy }) => {
cache({
edge: {
maxAgeSeconds: 60 * 60 * 24,
staleWhileRevalidateSeconds: 60 * 60
},
browser: {
maxAgeSeconds: 60 * 60 * 24,
},
})
proxy('origin')
}
)
1つのルールでは、あらゆるリクエストに対して次のようなものを設定した。
「一致するファイル拡張子を持つリクエストが見つかった場合は、Edgioとクライアントのブラウザに24時間キャッシュする」
家でこれを試みればローカルであなたの場所のまわりでかちりと鳴らし、私達がイメージ、あなたのイメージ、フォント、CSSおよびJSをキャッシュし、渡すので見ることができる。 シークレットウィンドウを起動して、ブラウザのキャッシュが空であることを確認し、キャッシュヒットをローカルに表示する。 ローカルではい。 これを展開して、ITが機能することを確認する必要はない。 あなたのコードが私たちのCDNとどのように相互作用するかを正確に知っている。
あなたが言及した動的コンテンツについてはどうだろうか。
ああ、忘れていない心配しないで。 まだ10分しか経っておらず、それらのレガシーCDNを照合している。 次にアフターバーナーをつけてほこりの中に置いていく。 動的コンテンツのルートを追加したいとしよう。
router.match('/products/:productId', ({ cache, proxy }) => {
cache({
edge: {
maxAgeSeconds: 60 * 60 * 24
staleWhileRevalidateSeconds: 60 * 60
}
})
proxy('origin')
})
翻訳すると、以下のようになる。
“すべての製品ページを1日キャッシュする。
キャッシュの有効期限が切れたら、新しいバージョンを探す間、古いキャッシュを1時間提供する」
これで、柔軟性を確認し、基本を理解した。 うまくいけば、EdgioにCDNをデプロイすると、サイトの速度とパフォーマンスにどのような影響があるかを想像している。 独自のルートを簡単に定義し、それらにキャッシングルールを割り当てることができる。 しかし、EdgioのアプリケーションプラットフォームとEdgeJSで他に何ができるか?
- オリジン上の別のパスにリクエストを転送する
- 要求を変更する
- 応答を変更する
- Cookieを操作する
- 静的ファイルを提供する
- サーバーレス関数へのルーティング
- サーバーサイドレンダリングにフォールバック
- リダイレクト
- トラフィックブロック
- カスタムキャッシュキーを使用した選択的消去
- またはオリジンの反応を完全に変える。
Edgioの次世代技術をどのように活用するかはあなた次第であり、上記の例は氷山の一角にすぎない。 実際、Edgioでは常にパフォーマンスを追求しているため、独自のHTMLとアセットプリフェッチソリューションを使用して、エッジを超えて訪問者のブラウザに一歩先を行くことにした。
ネットワーク応答時間を事実上排除し、ネイティブアプリケーションの感触を与えることによってあなたのウェブサイトを完全に変える方法を見つけるために、私達のフォローアップの記事を点検して確実がありなさい: Edgioによる予測的プリフェッチで直帰率を減らし、サイトの経験を改善する。
