web-dev-qa-db-ja.com

S3を介してAmazon CloudFrontからgzip圧縮されたCSSとJavaScriptを提供する

サイトの読み込みを高速化する方法を探していましたが、Cloudfrontをさらに活用することを検討したいと考えています。

CloudfrontはもともとカスタムオリジナルCDNとして設計されておらず、gzipをサポートしていないため、これまでこれを使用して、サイトコードでCloudfront cnameによって参照され、はるかに最適化されたすべての画像をホストしていました-未来のヘッダー。

一方、CSSファイルとjavascriptファイルは自分のサーバーでホストされています。これは、これまでCloudfrontからgzipで配信できず、gzip（約75％）による利益がそれを上回るという印象を受けていたためですCDN（約50％）の使用から：Amazon S3（およびCloudfront）は、gzip圧縮のサポートを示すためにブラウザーによって送信されるHTTP Accept-Encodingヘッダーを使用して、gzip圧縮されたコンテンツを標準的な方法で提供することをサポートしませんでした。そのため、Gzipでコンポーネントをその場で提供することはできませんでした。

そのため、私は今まで、次の2つの選択肢のいずれかを選択する必要があるという印象を受けていました。

  1. すべてのアセットをAmazon CloudFrontに移動し、GZippingを忘れます。

  2. コンポーネントを自己ホストし、着信要求を検出し、必要に応じてオンザフライGZippingを実行するようにサーバーを構成します。

この問題を解決するための回避策はありましたが、本質的にはこれらの動作しなかったです。 [ リンク ]。

現在、Amazon CloudfrontはカスタムOriginをサポートしているようです。カスタムOriginを使用している場合、gzip圧縮されたコンテンツを提供するために標準のHTTP Accept-Encodingメソッドを使用できるようになりました [ link ]。

これまでのところ、サーバーに新しい機能を実装することはできませんでした。上記にリンクしたブログ投稿は、変更の詳細を見つけた唯一のものであり、カスタムOriginを選択した場合、gzip圧縮（使用したくないバーの回避策）のみを有効にできることを暗示しているようです。私はむしろそうではありません。Cloudfrontサーバーで対応するフィールドをホストし、そこからリンクする方が簡単だと思います。ドキュメントを注意深く読んでいるにもかかわらず、私は知りません：

  • 新しい機能が、ファイルを自分のドメインサーバーでホストする必要があることを意味するかどうかカスタムOriginを介して、もしそうであれば、どのコードセットアップがこれを達成するか。

  • cssおよびjavascriptヘッダーを設定して、Cloudfrontからgzipで配信されるようにする方法。

javascriptcssamazon-s3gzipamazon-cloudfront
191
Donald Jenkins

UPDATE：Amazonはgzip圧縮をサポートするようになったため、これはもう必要ありません。 Amazonのお知らせ

元の回答：

答えは、CSSファイルとJavaScriptファイルをgzipすることです。はい、あなたはその権利を読みます。

gzip -9 production.min.css

これにより、production.min.css.gzが生成されます。 .gzを削除し、S3（または使用しているOriginサーバー）にアップロードし、ファイルのContent-Encodingヘッダーをgzipに明示的に設定します。

オンザフライでのgzip圧縮ではありませんが、ビルド/デプロイメントスクリプトに簡単にラップできます。利点は次のとおりです。

  1. Apacheは、ファイルが要求されたときにコンテンツをgzipするためにCPUを必要としません。
  2. ファイルは最高の圧縮レベルでgzip圧縮されます（gzip -9と仮定）。
  3. CDNからファイルを提供しています。

CSS/JavaScriptファイルが（a）縮小され、（b）ユーザーのマシンで解凍するのに必要なCPUを正当化するのに十分な大きさであると仮定すると、ここで大幅なパフォーマンスの向上を得ることができます。

覚えておいてください：CloudFrontにキャッシュされているファイルに変更を加えた場合、このタイプの変更を行った後は必ずキャッシュを無効にしてください。

198
Skyler Johnson

私の答えはこれについての離陸です： http://blog.kenweiner.com/2009/08/serving-gzipped-javascript-files-from.html

Skylerの回答を基に、cssとjsのgzipバージョンと非gzipバージョンをアップロードできます。注意して命名し、Safariでテストしてください。サファリは.css.gzまたは.js.gzファイルを処理しないためです。

site.jsおよびsite.js.jgzおよびsite.cssおよびsite.gz.css（これらを正しく機能させるには、content-encodingヘッダーを正しいMIMEタイプに設定する必要があります）

次に、あなたのページに入れてください。

<script type="text/javascript">var sr_gzipEnabled = false;</script> 
<script type="text/javascript" src="http://d2ft4b0ve1aur1.cloudfront.net/js-050/sr.gzipcheck.js.jgz"></script> 

<noscript> 
  <link type="text/css" rel="stylesheet" href="http://d2ft4b0ve1aur1.cloudfront.net/css-050/sr-br-min.css">
</noscript> 
<script type="text/javascript"> 
(function () {
    var sr_css_file = 'http://d2ft4b0ve1aur1.cloudfront.net/css-050/sr-br-min.css';
    if (sr_gzipEnabled) {
      sr_css_file = 'http://d2ft4b0ve1aur1.cloudfront.net/css-050/sr-br-min.css.gz';
    }

    var head = document.getElementsByTagName("head")[0];
    if (head) {
        var scriptStyles = document.createElement("link");
        scriptStyles.rel = "stylesheet";
        scriptStyles.type = "text/css";
        scriptStyles.href = sr_css_file;
        head.appendChild(scriptStyles);
        //alert('adding css to header:'+sr_css_file);
     }
}());
</script>

gzipcheck.js.jgzはただsr_gzipEnabled = true;です。これは、ブラウザがgzip圧縮されたコードを処理できることを確認し、できない場合にバックアップを提供します。

次に、すべてのjsが1つのファイルにあり、フッターに移動できると仮定して、フッターで同様の操作を行います。

<div id="sr_js"></div> 
<script type="text/javascript"> 
(function () {
    var sr_js_file = 'http://d2ft4b0ve1aur1.cloudfront.net/js-050/sr-br-min.js';
    if (sr_gzipEnabled) {
       sr_js_file = 'http://d2ft4b0ve1aur1.cloudfront.net/js-050/sr-br-min.js.jgz';
    }
    var sr_script_tag = document.getElementById("sr_js");         
    if (sr_script_tag) {
    var scriptStyles = document.createElement("script");
    scriptStyles.type = "text/javascript";
    scriptStyles.src = sr_js_file;
    sr_script_tag.appendChild(scriptStyles);
    //alert('adding js to footer:'+sr_js_file);
    }
}());
</script>

UPDATE：Amazonはgzip圧縮をサポートするようになりました。お知らせ。これはもう必要ありません。 Amazonのお知らせ

15
Sean

Cloudfrontはgzipをサポートしています。

Cloudfrontは、HTTP 1.0を介してサーバーに接続します。デフォルトでは、nginxを含む一部のWebサーバーは、gzip圧縮されたコンテンツをHTTP 1.0接続に提供しませんが、以下を追加することで実行するように指示できます。

gzip_http_version 1.0

あなたのnginx設定に。同等の構成は、使用しているWebサーバーに設定できます。

これには、キープアライブ接続がHTTP 1.0接続に対して機能しないという副作用がありますが、圧縮の利点が大きいため、間違いなくトレードオフの価値があります。

http://www.cdnplanet.com/blog/gzip-nginx-cloudfront/ から取得

編集

Amazonクラウドフロントを通じてオンザフライで圧縮されたコンテンツを提供することは危険であり、おそらく実行すべきではありません。基本的に、Webサーバーがコンテンツをgzip圧縮している場合、Content-Lengthを設定せず、代わりにデータをチャンクとして送信します。

Cloudfrontとサーバー間の接続が中断され、途中で切断された場合、Cloudfrontは部分的な結果をキャッシュし、期限切れになるまでキャッシュされたバージョンとして提供します。

NginxはContent-Lengthヘッダーを設定できるため、Cloudfrontは切り捨てられたバージョンを破棄するため、最初にディスク上でgzipし、次にgzipしたバージョンを提供するという受け入れられた答えは良いアイデアです。

14
Danack

最近、uSwitch.comでいくつかの最適化を行って、サイトの静的アセットの一部を圧縮しました。これを行うためにnginxプロキシ全体をセットアップしましたが、CloudFrontとS3の間でプロキシを使用してコンテンツを圧縮する小さなHerokuアプリも作成しました： http://dfl8.co

パブリックにアクセス可能なS3オブジェクトは、単純なURL構造を使用してアクセスできるため、 http://dfl8.co は同じ構造を使用します。つまり次のURLは同等です。

http://pingles-example.s3.amazonaws.com/sample.css
http://pingles-example.dfl8.co/sample.css
http://d1a4f3qx63eykc.cloudfront.net/sample.css
5
pingles

昨日Amazonは新機能を発表しました。これでディストリビューションでgzipを有効にできます。

.gzファイルを自分で追加しなくてもs3で動作します。今日新しい機能を試しましたが、うまく機能します。 （ただし、現在のオブジェクトを無効にする必要があります）

詳細

5
Chris

特定のタイプのファイルを自動的に圧縮し、圧縮されたファイルを提供するようにCloudFrontを構成できます。

AWSを参照してください 開発者ガイド

0
Rafi