CDNを通してあなたの流星CSS/JS束と公共資産を届けること

あなたのウェブアプリケーションとビジネスが成長し始めるとき、あなたの多くがすでに知っているように、主な問題の1つはパフォーマンスを管理することです.いくつかのユーザーが完全に数百人のユーザーと一緒に壊れて行くことができるときにうまく実行される可能性があります.また、Webアプリケーションの場合は、まれに、アプリケーションの統一的な使用方法があります.あなたは、使用のピークがたくさんあるでしょう、これらのピークの間でも、経験はすべてのユーザーのために大きいままでなければなりません.
アットrevolin.io 我々はこれらのピークを複数回直面しなければならず、最初の経験はあまり楽しくなかった.活動を開始しながら、すべての選手が一緒にJSとCSSのすべての流星の束を送信しなければならなかった私たちのサーバーに接続されています.キャッシングは、同じ仕事を100回行うと、その完全な能力をかなり迅速に到達.それはすべてのこれらの最初の接続を扱っていた他の何も起こらず、アプリは複数のユーザーのために凍結された.もちろん、我々は間違いから学びます、そして、いくつかの研究の後、我々は温泉(両方の流星JSと流星CSS束)のために大きい傾向がある我々の流星束を届けるために、AndからCCN(Cloudfront)を実行することに決めました.単にMeteorと完全にあなたのアプリケーションの大きな塊を提供するから、サーバーを軽減し、他のジョブと一緒にブロックしていないプラグインが接続されています.この作品は、この偉大なpost on the meteor forums そして、正確に同じ場所からPaulishcaからのヘルプの多く.
私たちはCloudFrontによって提供された配布名を使用して非常に基本的な設定を行いますが、あなたがそうしたいならば、あなたはあなたのCDNのためにカスタムドメイン名とSSL証明書を接続することもできます.
TLDR:一度にユーザーの負荷は、サーバーは、JS/CSSを提供するときに壊れた:必要なキャッシュ!
プロセスには2つの部分があります.

CDNの作成

CDNから資産を届けるためにあなたのアプリを準備すること

Cloudfront ( CDN )ディストリビューションの作成
このCDNを設定するための最も複雑な部分は、CloudFront設定で設定する設定を知ることでした.幸い、私はフォーラムからたくさんの援助を得ました.言葉よりも私は主に設定する方法のスクリーンショットを表示するつもりです

由来

あなたが最初の部分で見ることができるように我々はちょうど我々のアプリのアドレスを言及し、HTTPSのためにそれを修正します.

デフォルトのキャッシュ動作

次に、あなたのCDNのために必要とするプロトコルポリを定義して、それは許容HTTPメソッドです.オプションもキャッシュすることにします.

デフォルトのキャッシュ動作

この1つは少しトリッキーなものです、すべてのキャッシュ設定を定義する必要があります.ここでは、手動でヘッダを追加し、カスタムのものを作成します.いずれかのリストから9種類のヘッダを追加する必要がありますし、入力します.また、後で資産のキャッシュ時間を設定します.

設定

最後の設定では、あなたのCDNを提供するゾーンを定義します.
これらのすべての手順を実行すると、配布ドメイン名のリンクを取得します

uniqueid.cloudfront.net

そして、それはあなたの資産が提供されるところからです.

CDNから資産を提供するあなたの流星アプリを設定する
この部分は実際にはかなり簡単です.サーバー側では、Meteorに、新しく作成されたCDNからバンドルされているJSとCSSを提供するようにWebAppInternalsを使用する必要があります.

import { Meteor } from "meteor/meteor";
import { WebAppInternals } from "meteor/webapp";

if (Meteor.isProduction) {
   WebAppInternals.setBundledJsCssUrlRewriteHook(url => {
      return `https://uniqueId.cloudfront.net${url}`;
   });
}

そこから、あなたはChromeコンソールのネットワークタブをチェックすることができます、そして、あなたの流星バンドルされたJSとCSSがもうあなたのサーバーからでなく、Cloudfrontからあなたのサーバーから届けられないのを見る新しいバージョンを展開することができます.

ボーナス-サーブ資産から/パブリックフォルダも
あなたのMeteorアプリのあなたの「/パブリック」フォルダにあるどんなイメージまたは資産も、CDNを通して届いています.それで、あなたの公的な資産が同様にキャッシュされることを望むならば、「/image/myimg . png」のようなsrcをする代わりに、あなたのCDNを源に加えてください${MY_CDN_URL}/image/myimg.png そして、それらはCDNから届けられて、同様にキャッシュされます.