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

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

저는 제 사이트를 더 빨리 로드할 수 있는 방법을 찾고 있었습니다. 한 가지 방법은 Cloudfront를 더 잘 활용하는 것입니다.

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

반면에 CSS와 Javascript 파일은 내 서버에서 호스팅됩니다. 왜냐하면 지금까지 Cloudfront에서 gzip할 수 없고 gziping(약 75%)으로 CDN(약 50%)을 사용하는 것보다 더 큰 이득을 얻을 수 있기 때문입니다.Amazon S3(따라서 Cloudfront)는 gzip 압축 지원을 나타내기 위해 브라우저에서 보내는 HTTP Accept-Encoding 헤더를 사용하여 gzip 콘텐츠를 표준 방식으로 제공하는 것을 지원하지 않았기 때문에 Gzip 및 구성 요소를 즉시 제공할 수 없었습니다.

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

1. 모든 자산을 Amazon CloudFront로 이동하고 GZiping은 잊어버립니다.

2. 구성요소를 자체 호스팅 상태로 유지하고 수신 요청을 감지하고 필요에 따라 즉시 GZiping을 수행하도록 서버를 구성합니다. 이것이 제가 지금까지 선택한 작업입니다.

이 문제를 해결하기 위한 해결 방법이 있었지만 근본적으로 이것들은 작동하지 않았습니다.[link]를 선택합니다.

이제 Amazon Cloudfront는 사용자 지정 오리진을 지원하며, 사용자 지정 오리진 [link]를 사용하는 경우 표준 HTTP Accept-Encoding 방법을 사용하여 gzip 콘텐츠를 제공할 수 있습니다.

지금까지 서버에 새 기능을 구현할 수 없었습니다.변경 사항을 자세히 설명하는 유일한 블로그 게시물인 위의 블로그 게시물은 사용자 지정 오리진을 선택한 경우에만 gziping(바 해결 방법, 사용하고 싶지 않음)을 활성화할 수 있음을 의미하는 것 같습니다. 이는 사용하지 않는 것이 좋습니다. Cloudfront 서버에서 핵심 지원 필드를 호스팅하고 거기서 링크하는 것이 더 간단하다는 것을 알게 되었습니다.설명서를 주의 깊게 읽었음에도 불구하고 다음과 같은 내용을 알지 못합니다.

• 새로운 기능이 파일이 사용자 지정 오리진을 통해 내 도메인 서버에서 호스팅되어야 한다는 것을 의미하는지 여부, 그리고 만약 그렇다면 어떤 코드 설정이 이를 달성할 것인지.

• CSS 및 Javascript 헤더가 Cloudfront에서 gzip으로 제공되도록 구성하는 방법.

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

원답:

정답은 CSS와 자바스크립트 파일을 gzip하는 것입니다.네, 제대로 읽으셨네요.

gzip -9 production.min.css

이것은 생산할 것입니다.production.min.css.gz를 합니다..gz 사용 서버)에하고 S3(으)로 합니다.Content-Encoding를 일의헤로 합니다.gzip.

즉석에서 압축하는 것은 아니지만 빌드/배포 스크립트로 쉽게 압축할 수 있습니다.이점은 다음과 같습니다.

1. Apache가 파일을 요청할 때 컨텐츠를 gzip하는 데 CPU가 필요하지 않습니다.
2. 은 가장 됩니다(예:gzip -9).
3. CDN에서 파일을 제공하고 있습니다.

CSS/JavaScript 파일이 (a) 최소화되고 (b) 사용자 시스템에서 압축 해제에 필요한 CPU를 정당화할 수 있을 정도로 충분히 크다고 가정하면 여기서 상당한 성능 향상을 얻을 수 있습니다.

다음을 기억하십시오.CloudFront에서 캐시된 파일을 변경하는 경우 이러한 유형의 변경 후 캐시를 무효화해야 합니다.

제 대답은 이것에 대한 도약입니다: http://blog.kenweiner.com/2009/08/serving-gzipped-javascript-files-from.html

와 js 및 할 수 .Safari에서 명명 및 테스트에 주의하십시오.사파리가 처리할 수 없기 때문입니다..css.gz또는.js.gzfiles 파일

site.js그리고.site.js.jgz그리고.site.css그리고.site.gz.css)로 content-encoding헤더를 올바른 MIME 유형으로 변환하여 올바른 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;이 테스트는 브라우저가 zzip 코드를 처리할 수 있는지 확인하고 처리할 수 없는 경우 백업을 제공합니다.

그런 다음 모든 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는 gziping을 지원합니다.

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

gzip_http_version 1.0

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

이것은 HTTP 1.0 연결에 대해 킵얼라이브 연결이 작동하지 않도록 하는 부작용이 있지만 압축의 이점이 매우 크기 때문에 이를 상쇄할 가치가 있습니다.

http://www.cdnplanet.com/blog/gzip-nginx-cloudfront/ 에서 발췌

편집

아마존 클라우드 전선을 통해 즉석에서 압축된 콘텐츠를 제공하는 것은 위험하며 아마도 해서는 안 될 것입니다.기본적으로 웹 서버가 내용을 압축하는 경우, 내용 길이를 설정하지 않고 데이터를 청크로 전송합니다.

Cloudfront와 서버 간의 연결이 중단되거나 너무 일찍 끊어지는 경우에도 Cloudfront는 부분 결과를 캐시하고 만료될 때까지 캐시된 버전으로 제공합니다.

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

당사는 최근 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 개발자 가이드 참조

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