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

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

Cloudfront는 원래 맞춤형 CDN으로 설계되지 않았고 gzipping을 지원하지 않았기 때문에 지금까지 모든 이미지를 호스팅하는 데 사용하고 있습니다. -미래 헤더.

반면에 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에서 신중하게 이름을 지정하고 테스트하십시오. 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 설정에. 사용중인 웹 서버에 대해 동등한 구성을 설정할 수 있습니다.

이로 인해 연결 유지 연결이 HTTP 1.0 연결에서 작동하지 않는 부작용이 있지만 압축의 이점이 크므로 절충 할 가치가 있습니다.

http://www.cdnplanet.com/blog/gzip-nginx-cloudfront/ 에서 가져온

편집하다

Amazon 클라우드 프론트를 통해 즉시 압축되는 콘텐츠를 제공하는 것은 위험하므로 수행해서는 안됩니다. 기본적으로 웹 서버가 내용을 압축하는 경우 Content-Length를 설정하지 않고 대신 청크로 데이터를 보냅니다.

Cloudfront와 서버 간의 연결이 중단되고 조기에 중단 된 경우 Cloudfront는 여전히 부분 결과를 캐시하고 만료 될 때까지 캐시 된 버전으로 사용합니다.

Nginx가 Content-Length 헤더를 설정할 수 있으므로 Cloudfront에서 잘린 버전을 삭제하므로 디스크에서 먼저 압축 한 다음 압축 버전을 제공하는 것이 더 좋습니다.

최근 사이트에서 일부 정적 자산을 압축하기 위해 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

어제 아마존은 새로운 기능을 발표했으며, 이제 배포판에서 gzip을 활성화 할 수 있습니다.

.gz 파일을 추가하지 않고 s3과 함께 작동하며 오늘 새로운 기능을 시도해 보았습니다. (현재 객체는 무효화해야 함)

더 많은 정보

특정 유형의 파일을 자동으로 압축하고 압축 된 파일을 제공하도록 CloudFront를 구성 할 수 있습니다.

AWS 개발자 안내서를 참조하십시오.