ViteビルドにCDNキャッシュを追加します

コンテンツ配信ネットワーク（CDN）を活用すると、ユーザーに近い静的資産をキャッシュすることにより、Webサイトのパフォーマンスが大幅に向上します。 CDNは、グローバルに分散したエッジサーバー全体にコンテンツを配布することにより、これを達成します。ユーザーがサイトにアクセスすると、CDNはリクエストを最寄りのサーバーに向けます。資産がすでにキャッシュされている場合（以前の訪問または他のユーザーから）、すぐに提供されます。それ以外の場合、CDNはOrigin Serverから取得し、キャッシュしてから配信します。

このチュートリアルでは、AWS CloudFrontを例として使用して、JavaScript、CSS、Fontファイル、およびその他の静的資産を提供し、Viteビルドプロセスと統合するように配布を構成する方法を示します。より堅牢なアプローチについては、サーバーレスフレームワークやAWS CDKなどのコードとしてのインフラストラクチャツールの使用を検討してください。ただし、簡単にするために、AWSコンソールを使用します。

AWSクラウドフロント配信の構成

1. AWSコンソールのクラウドフロントホームページに移動します。
2. [配布の作成]ボタンをクリックします。
3. 作成画面で、Originドメイン（資産が存在する場所）を指定します。ほとんどのデフォルト設定が適しています。
4. 重要なことに、「応答ヘッダーポリシー」ドロップダウンから「cors-with-preflight」を選択します。
5. 「分布の作成」をクリックします。その後、新しい分布が表示されます。

CloudFrontをViteと統合します

CDNのセットアップは不可欠ですが、Webサイトは資産を取得するように構成する必要があります。この統合は、さまざまなビルドシステム（Webpack、ロールアップなど）で類似しています。

1. vite.config.tsファイルで、ビルドが生産用かどうかを判断します。

 const isproduction = process.env.node_env === "production";

2. 生産でCDNを使用するようにViteを構成します。

デフォルトのデフォルトdefineconfigをエクスポートする（{
  ベース：ISProduction？ process.env.React_cdn： ""、
}）;

REACT_CDN環境変数をCloudFront DistributionのURL（ https://distributiondomainname.cloudfront.netなど）に設定することを忘れないでください。

Vitepwaの互換性

Vitepwaプラグインを使用する場合は、 baseプロパティが正しく設定されていることを確認してください。

 Vitepwa（{
  ベース： "/"、
}）;

設定が正しくないと、 web.manifestファイルのエラーが発生する可能性があります。

CDN機能の検証

セットアップ後、サイトの資産のネットワークリクエストを検査します。 h2プロトコルを観察する必要があります。応答ヘッダーを調べます。 CDNの関与を確認するクラウドフロント関連のデータが見つかります。

Viteでバストするキャッシュ

Viteは、フィンガープリントを介してキャッシュを自動的に処理します。 Asset Filenames（ home-abc123.jsなど）にハッシュコードを追加します。資産が変更されると、ハッシュが変更され、CDNが更新されたバージョンの取得を強制します。

CDNキャッシングの拡張

CDNキャッシングの利点は、JavaScript、CSS、およびフォントを超えています。画像ストレージにS3を使用する場合は、クラウドフロント分布の構成を検討してください。これにより、エッジキャッシュを提供するだけでなく、S3に欠けているHTTP/2サポートも可能にします。

高度なCDN戦略

このチュートリアルは、基本的なCDN統合について説明します。最適なパフォーマンスについては、CDNからサイト全体を提供して、動的コンテンツのみでOrigin Serverと対話できるようにします。

結論

CDNSは、エッジキャッシュとHTTP/2サポートを提供することにより、ウェブサイトのパフォーマンスを向上させるための強力なツールです。このガイドは、CDNをセットアップしてViteと統合するプロセスを簡素化し、貴重なパフォーマンス最適化手法を装備します。

以上がViteビルドにCDNキャッシュを追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。