S3를 통해 Amazon CloudFront에서 gzipped CSS 및 JavaScript 제공

S3를 통해 Amazon CloudFront에서 gzipped CSS 및 JavaScript 제공

---

사이트로드 속도를 높이는 방법을 찾고 있었고 탐색하려는 한 가지 방법은 Cloudfront를 더 많이 사용하는 것입니다.

Cloudfront는 원래 사용자 지정 원본 CDN으로 설계되지 않았고 gzipping을 지원하지 않았기 때문에 지금까지 모든 이미지를 호스팅하는 데 사용하고 있습니다.이 이미지는 내 사이트 코드에서 Cloudfront cname으로 참조되며 지금까지 최적화되었습니다. -미래 헤더.

반면에 CSS와 자바 스크립트 파일은 내 서버에서 호스팅됩니다. 지금까지 Cloudfront에서 제공 할 수없고 gzipping (약 75 %)에서 얻는 이익이 CDN 사용 (약 50 %) : Amazon S3 (및 Cloudfront)는 gzip 압축에 대한 지원을 나타 내기 위해 브라우저에서 전송 한 HTTP Accept-Encoding 헤더를 사용하여 표준 방식으로 gzip 컨텐츠를 제공하는 것을 지원하지 않았습니다. 그래서 그들은 즉시 Gzip을 사용하여 컴포넌트를 제공 할 수 없었습니다.

따라서 지금까지 두 가지 대안 중에서 하나를 선택해야한다는 인상을 받았습니다.

1. 모든 자산을 Amazon CloudFront로 옮기고 GZipping을 잊어 버리십시오.

2. 구성 요소를 자체 호스팅 상태로 유지하고 들어오는 요청을 감지하고 적절하게 즉시 GZipping을 수행하도록 서버를 구성합니다.

가 있었다 이 문제를 해결하기위한 해결 방법이 있지만, 본질적으로 이것들은 작동하지 않았다 . [ 링크 ].

이제 Amazon Cloudfront는 사용자 지정 오리진을 지원하는 것으로 보이며 이제 사용자 지정 오리진 [ link ]을 사용하는 경우 gzip으로 압축 된 콘텐츠를 제공하기 위해 표준 HTTP Accept-Encoding 메서드를 사용할 수 있습니다 .

지금까지 내 서버에서 새로운 기능을 구현할 수 없었습니다. 위 링크에 링크 된 블로그 게시물 (변경 내용에 대해 자세히 알아 낸 유일한 게시물)은 사용자 지정 출처를 선택하는 경우 gzipping (바 해결 방법, 사용하고 싶지 않음) 만 활성화 할 수 있음을 의미합니다. 차라리 아니라 : Cloudfront 서버에서 코어 응답 파일을 호스팅하고 거기에서 링크하는 것이 더 간단하다는 것을 알았습니다. 설명서를주의 깊게 읽었음에도 불구하고

• 새로운 기능이 파일 을 사용자 정의 오리진을 통해 내 도메인 서버에서 호스팅해야하는지 여부 와, 그렇다면 어떤 코드 설정으로이를 달성 할 수 있는지;

• CSS 및 자바 스크립트 헤더를 구성하여 Cloudfront에서 gzip으로 제공되도록하는 방법

---

업데이트 : Amazon은 이제 gzip 압축을 지원하므로 더 이상 필요하지 않습니다. 아마존 발표

원래 답변 :

대답은 CSS 및 JavaScript 파일을 압축하는 것입니다. 예, 당신은 그 권리를 읽습니다.

gzip -9 production.min.css

이 생산 production.min.css.gz합니다. 를 제거하고 .gzS3 (또는 사용중인 원본 서버)에 업로드 Content-Encoding한 다음 파일 의 헤더를 명시 적으로로 설정하십시오 gzip.

즉석 gzipping은 아니지만 빌드 / 배포 스크립트로 쉽게 묶을 수 있습니다. 장점은 다음과 같습니다.

1. 파일을 요청할 때 Apache가 컨텐츠를 압축하는 데 CPU가 필요하지 않습니다.
2. 파일은 최고 압축 수준으로 가정됩니다 (가정 gzip -9).
3. CDN에서 파일을 제공하고 있습니다.

CSS / JavaScript 파일이 (a) 축소되고 (b) 사용자 컴퓨터의 압축을 푸는 데 필요한 CPU를 정당화 할만큼 충분히 크다고 가정하면 여기에서 상당한 성능 향상을 얻을 수 있습니다.

CloudFront에 캐시 된 파일을 변경하는 경우 이러한 유형의 변경을 수행 한 후 캐시를 무효화해야합니다.

---

내 대답은 다음과 같습니다. http://blog.kenweiner.com/2009/08/serving-gzipped-javascript-files-from.html

skyler의 답변을 작성하면 gzip 및 비 gzip 버전의 CSS 및 js를 업로드 할 수 있습니다. 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 is just sr_gzipEnabled = true;이 테스트는 브라우저가 gzipped 코드를 처리 할 수 ​​있고 백업 할 수없는 경우 백업을 제공 할 수 있는지 테스트합니다.

그런 다음 모든 js가 하나의 파일에 있고 바닥 글에 들어갈 수 있다고 가정하면 바닥 글에서 비슷한 것을 수행하십시오.

<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> 

업데이트 : Amazon은 이제 gzip 압축을 지원합니다. 공지 사항이므로 더 이상 필요하지 않습니다. 아마존 발표

---

Cloudfront는 gzipping을 지원합니다.

Cloudfront는 HTTP 1.0을 통해 서버에 연결합니다. 기본적으로 nginx를 포함한 일부 웹 서버는 gzip으로 압축 된 컨텐츠를 HTTP 1.0 연결에 제공하지 않지만 다음을 추가하여 지시 할 수 있습니다.

gzip_http_version 1.0

nginx 설정에. 사용중인 웹 서버에 대해 동등한 구성을 설정할 수 있습니다.

This does have a side effect of making keep-alive connections not work for HTTP 1.0 connections, but as the benefits of compression are huge, it's definitely worth the trade off.

Taken from http://www.cdnplanet.com/blog/gzip-nginx-cloudfront/

Edit

Serving content that is gzipped on the fly through Amazon cloud front is dangerous and probably shouldn't be done. Basically if your webserver is gzipping the content, it will not set a Content-Length and instead send the data as chunked.

If the connection between Cloudfront and your server is interrupted and prematurely severed, Cloudfront still caches the partial result and serves that as the cached version until it expires.

The accepted answer of gzipping it first on disk and then serving the gzipped version is a better idea as Nginx will be able to set the Content-Length header, and so Cloudfront will discard truncated versions.

---

We've made a few optimisations for uSwitch.com recently to compress some of the static assets on our site. Although we setup a whole nginx proxy to do this, I've also put together a little Heroku app that proxies between CloudFront and S3 to compress content: http://dfl8.co

Given publicly accessible S3 objects can be accessed using a simple URL structure, http://dfl8.co just uses the same structure. I.e. the following URLs are equivalent:

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

---

Yesterday amazon announced new feature, you can now enable gzip on your distribution.

It works with s3 without added .gz files yourself, I tried the new feature today and it works great. (need to invalidate you're current objects though)

More info

---

You can configure CloudFront to automatically compress files of certain types and serve the compressed files.

See AWS Developer Guide

참고URL : https://stackoverflow.com/questions/5442011/serving-gzipped-css-and-javascript-from-amazon-cloudfront-via-s3