S3 के माध्यम से Amazon CloudFront से gzipped CSS और JavaScript सर्व करना

Question

मैं अपनी साइट को तेज़ी से लोड करने के तरीकों की तलाश कर रहा हूं और एक रास्ता जिसे मैं तलाशना चाहता हूं वह है क्लाउडफ्रंट का अधिक उपयोग।

क्योंकि क्लाउडफ्रंट मूल रूप से एक कस्टम-उत्पत्ति CDN के रूप में डिज़ाइन नहीं किया गया था और क्योंकि यह gzipping का समर्थन नहीं करता था, इसलिए मैंने अब तक इसका उपयोग मेरी सभी छवियों को होस्ट करने के लिए किया है, जो कि मेरे साइट कोड में उनके Cloudfront cname द्वारा संदर्भित हैं, और अब तक अनुकूलित हैं। -उपभोग हेडर।

दूसरी ओर, CSS और जावास्क्रिप्ट फ़ाइलों को मेरे स्वयं के सर्वर पर होस्ट किया जाता है, क्योंकि अब तक मैं इस धारणा के तहत था कि उन्हें Cloudfront से gzipped नहीं परोसा जा सकता है, और इससे gzipping (लगभग 75 प्रतिशत) का लाभ प्राप्त होता है। सीडीएन (लगभग 50 प्रतिशत) का उपयोग करने से: अमेज़ॅन एस 3 (और इस तरह क्लाउडफ्रंट) ने HTTP एक्से-एन्कोडिंग हेडर का उपयोग करके मानक तरीके से gzipped सामग्री की सेवा का समर्थन नहीं किया, जो ब्राउज़र द्वारा gzip संपीड़न के लिए उनके समर्थन को इंगित करने के लिए भेजा जाता है, और इसलिए वे गज़िप और मक्खी पर घटकों की सेवा करने में सक्षम नहीं थे।

इस प्रकार मैं इस धारणा के अधीन था, अब तक, कि दो विकल्पों में से एक को चुनना था:

1. अमेज़ॅन CloudFront के लिए सभी परिसंपत्तियों को स्थानांतरित करें और GZipping के बारे में भूल जाएं;

2. घटकों को स्व-होस्टित रखें और आने वाले अनुरोधों का पता लगाने के लिए हमारे सर्वर को कॉन्फ़िगर करें और ऑन-द-फ्लाई जीज़िपिंग को उचित रूप से निष्पादित करें, जो कि मैंने अब तक करने के लिए चुना है।

वहाँ थे इस समस्या को हल करने के लिए समाधान है, लेकिन अनिवार्य रूप से इन काम नहीं किया । [ लिंक ]।

अब, ऐसा लगता है कि अमेज़ॅन क्लाउडफ्रंट कस्टम उत्पत्ति का समर्थन करता है, और यदि आप कस्टम उत्पत्ति [ लिंक ] का उपयोग कर रहे हैं तो gzipped सामग्री परोसने के लिए मानक HTTP स्वीकार-एन्कोडिंग विधि का उपयोग करना संभव है ।

मैं अब तक अपने सर्वर पर नई सुविधा लागू नहीं कर पाया हूं। ब्लॉग पोस्ट मैं ऊपर से जुड़ा हुआ हूं, जो कि केवल एक है जिसे मैंने विस्तार से पाया है, इसका अर्थ यह लगता है कि आप केवल gzipping (बार वर्कअराउंड, जिसे मैं उपयोग नहीं करना चाहते हैं) को सक्षम कर सकते हैं, यदि आप कस्टम मूल के लिए चुनते हैं, जो मैं ऐसा नहीं करूंगा: मुझे अपने क्लाउडफ्रंट सर्वर पर दर्ज किए गए कोरप्सिंग को होस्ट करना और वहां से उन्हें लिंक करना आसान लगता है। दस्तावेज को ध्यान से पढ़ने के बावजूद, मुझे नहीं पता:

• क्या नई सुविधा का अर्थ है कि फ़ाइलें कस्टम मूल के माध्यम से मेरे स्वयं के डोमेन सर्वर पर होस्ट की जानी चाहिए , और यदि हां, तो कोड सेटअप क्या हासिल करेगा;

• कैसे सीएसएस और जावास्क्रिप्ट हेडर कॉन्फ़िगर करने के लिए सुनिश्चित करें कि वे Cloudfront से gzipped परोसा जाता है।

Answer 1

अद्यतन: अमेज़ॅन अब gzip संपीड़न का समर्थन करता है, इसलिए अब इसकी आवश्यकता नहीं है। अमेज़ॅन घोषणा

मूल उत्तर:

इसका जवाब सीएसएस और जावास्क्रिप्ट फ़ाइलों को जिप करना है। हां, आपने उसे सही पढ़ा है।

gzip -9 production.min.css

इससे उत्पादन होगा production.min.css.gz। निकालें .gzको S3 पर अपलोड करें (या जो भी मूल सर्वर आप उपयोग कर रहे हैं) और स्पष्ट रूप Content-Encodingसे फ़ाइल के लिए हेडर सेट करें gzip।

यह ऑन-द-फ्लाई गज़िंग नहीं है, लेकिन आप इसे आसानी से अपनी बिल्ड / परिनियोजन स्क्रिप्ट में लपेट सकते हैं। लाभ हैं:

1. जब फ़ाइल का अनुरोध किया जाता है तो उसे सामग्री को प्राप्त करने के लिए अपाचे के लिए सीपीयू की आवश्यकता नहीं होती है।
2. फ़ाइलें उच्चतम संपीड़न स्तर (मानकर gzip -9) पर gzipped हैं ।
3. आप CDN से फ़ाइल परोस रहे हैं।

यह मानते हुए कि आपकी सीएसएस / जावास्क्रिप्ट फाइलें (ए) की गई हैं और (बी) उपयोगकर्ता की मशीन पर डिकम्प्रेस करने के लिए आवश्यक सीपीयू को सही ठहराने के लिए पर्याप्त हैं, आप यहां महत्वपूर्ण प्रदर्शन लाभ प्राप्त कर सकते हैं।

बस याद रखें: यदि आप CloudFront में कैश की गई फ़ाइल में परिवर्तन करते हैं, तो सुनिश्चित करें कि आप इस प्रकार का परिवर्तन करने के बाद कैश को अमान्य कर दें।

Comments

आपके लिंक को पढ़ने के बाद, मुझे कहना होगा कि ब्लॉग लेखक बिना सूचना के है। "हालांकि, यदि उपयोगकर्ता के पास एक ब्राउज़र है जो gzip एन्कोडिंग का समर्थन नहीं करता है, तो आपकी साइट की ज़िप्ड स्टाइलशीट और javascripts बस उस उपयोगकर्ता के लिए काम नहीं करेगी।" यह ब्राउज़र संभवतः आपकी स्टाइलशीट और स्क्रिप्ट फ़ाइलों को चलाने के लिए बहुत पुराना होगा। ये उपयोगकर्ता प्रतिशत का एक अंश बनाते हैं।

— स्काइलर जॉनसन

अद्यतन: मैंने इसे काम किया। यह प्रदर्शित नहीं करने का कारण यह था कि मैं सामग्री-प्रकार को पाठ / सीएसएस पर सेट करना भूल गया था। यदि आप ऐसा करते हैं, तो आप ठीक हैं, हालांकि किसी कारण से ऐसा लगता है कि आप यहां दिए गए कारणों से S3 में "स्वीकार-एन्कोडिंग: वैरी" शीर्षक नहीं जोड़ सकते हैं (जो Google स्पीड रेटिंग के साथ मदद करेगा): [लिंक ]। इसके अलावा, मैं परिसंपत्ति को कैश करने के लिए कैश-कंट्रोल सेट करता हूं, लेकिन यह इसे कैशिंग नहीं लगता है ...

— डोनाल्ड जेनकिंस

बस यह Google के माध्यम से मिला, और मुझे यह कहते हुए खेद है कि यह अच्छी सलाह नहीं है। जबकि डेस्कटॉप ब्राउज़र का 1% gzipped सामग्री को संभाल नहीं सकता है, काफी मोबाइल ब्राउज़र नहीं कर सकते हैं। कितने पर निर्भर करता है कि आप किस लक्षित दर्शकों को देख रहे हैं; लेकिन सबसे पुराने नोकिया S40 के उदाहरण के लिए छोटी गाड़ी gzip संपीड़न है। उचित तरीका एक "कस्टम उत्पत्ति" है, जो एक अपाचे / IIS वेबसर्वर को इंगित करता है जो सामग्री संपीड़न करता है और उचित HTTP हेडर का कार्य करता है। यहाँ एक ब्लॉग पोस्ट है जो इसके बारे में बताती है: nomitor.com/blog/2010/11/10/…

— एम।

2015 की शुरुआत में अब कैसी स्थिति है? क्या @JesperMortensen और साइमन पेक द्वारा पोस्ट किए गए लिंक अभी भी प्रासंगिक हैं?

— इटलीपेलएले

अमेज़ॅन ने 2015 के दिसंबर में gzip संपीड़न के लिए समर्थन की घोषणा की, इसलिए यह अब अप्रासंगिक है बस मूल फ़ाइल अपलोड करें और यह काम करेगा। aws.amazon.com/blogs/aws/…

— सीन

Answer 2

मेरा जवाब इस पर एक बंद है: http://blog.kenweiner.com/2009/08/serves-gzipped-javascript-files-from.html

Skyler के उत्तर को बंद करके आप css और js के gzip और गैर-gipip संस्करण को अपलोड कर सकते हैं। सफारी में नामकरण और परीक्षण से सावधान रहें। क्योंकि सफारी संभाल .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; यह सुनिश्चित करने के लिए परीक्षण है कि ब्राउज़र 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> 

अद्यतन: अमेज़न अब gzip संपीड़न का समर्थन करता है। घोषणा, इसलिए अब इसकी जरूरत नहीं है। अमेज़ॅन घोषणा

Comments

उस सुझाव के लिए बहुत बहुत धन्यवाद। यदि मैं आपको सही तरीके से समझता हूं, तो आप उस मामले को संबोधित कर रहे हैं जहां उपयोगकर्ता का ब्राउज़र gzipped फ़ाइल को पढ़ने में सक्षम नहीं है, जो अभी भी हो सकता है, हालांकि यह आजकल ब्राउज़रों के काफी छोटे प्रतिशत की चिंता करता है। इस समाधान का एक संभावित दोष, यदि आप मेरे प्रश्न [लिंक ] में पोस्ट किए गए लिंक का संदर्भ देते हैं, तो इसका मतलब है कि आप अपने पेज को कैश नहीं कर सकते, क्योंकि यह केवल तभी काम करेगा जब आपका कोड उपयोगकर्ता द्वारा लोड किए जाने पर हर बार गतिशील रूप से चलेगा। पृष्ठ (जो मेरा है)।

— डोनाल्ड जेनकिंस

@ डोनल्डजेनकिंस मुझे लगता है कि जेएस अभी भी कैश किया जाएगा। जब आप js स्निप में स्क्रिप्ट टैग का निर्माण करते हैं, तब भी js को कॉल करना होता है और मेरा मानना ​​है कि यदि यह कैश में है तो ब्राउज़र इसे वहां से उपयोग करेगा।

— शॉन

परीक्षण पृष्ठ blog.kosny.com/testpages/safari-gz इंगित करता है कि चेतावनी "सफारी में सावधानीपूर्वक नामकरण और परीक्षण करें। क्योंकि सफारी css.gz या js.gz को संभाल नहीं पाएगी" तारीख से बाहर है। सफारी में Mavericks पर 7, और iOS 7 पर सफारी में, css.gz और js.gz दोनों काम करते हैं। मुझे नहीं पता कि यह परिवर्तन कब हुआ, मैं केवल उन उपकरणों के साथ परीक्षण कर रहा हूं जो मेरे पास हैं।

— गैरीब्रो

Answer 3

Cloudfront gzipping का समर्थन करता है।

क्लाउडफ्रंट HTTP 1.0 के माध्यम से आपके सर्वर से जुड़ता है। डिफ़ॉल्ट रूप से कुछ webservers, जिनमें nginx भी शामिल है, HTTP 1.0 कनेक्शन के लिए gzipped सामग्री की सेवा नहीं करते हैं, लेकिन आप इसे जोड़कर बता सकते हैं:

gzip_http_version 1.0

अपने nginx विन्यास के लिए। आपके द्वारा उपयोग किए जा रहे वेब सर्वर के लिए समतुल्य विन्यास सेट किया जा सकता है।

यह HTTP-1.0 कनेक्शन के लिए काम नहीं करने वाले कनेक्शन को जीवंत बनाए रखने का एक दुष्प्रभाव है, लेकिन चूंकि संपीड़न के लाभ बहुत बड़े हैं, यह निश्चित रूप से व्यापार के लायक है।

Http://www.cdnplanet.com/blog/gzip-nginx-cloudfront/ से लिया गया

संपादित करें

अमेज़ॅन क्लाउड फ्रंट के माध्यम से मक्खी पर gzipped सामग्री की सेवा खतरनाक है और शायद ऐसा नहीं किया जाना चाहिए। मूल रूप से यदि आपका वेबसर्वर कंटेंट को जिप्पी कर रहा है, तो वह कंटेंट-लेंथ सेट नहीं करेगा और इसके बजाय डेटा को चंक्स के रूप में भेजेगा।

यदि क्लाउडफ्रंट और आपके सर्वर के बीच का संबंध बाधित है और समय से पहले विच्छेद हो जाता है, तो क्लाउडफ्रंट अभी भी आंशिक परिणाम को कैश करता है और जब तक यह समाप्त नहीं हो जाता है तब तक कैश्ड संस्करण के रूप में कार्य करता है।

डिस्क पर पहले इसे जिप करने और फिर gzipped संस्करण परोसने का स्वीकृत उत्तर एक बेहतर विचार है क्योंकि Nginx कंटेंट-लेंथ हेडर को सेट करने में सक्षम होगा, और इसलिए क्लाउडफ्रंट छोटे संस्करणों को छोड़ देगा।

Comments

-1, इस जवाब का सवाल से कोई लेना-देना नहीं है। नगनेक्स! = एस 3 और क्लाउडफ्रंट

— जोनाथन

@Danack, क्या आपने क्लाउडफ्रंट कैशिंग के साथ बहुत सारी समस्याओं का अनुभव किया है क्योंकि इस समस्या के कारण आधी-पुनर्प्राप्त फ़ाइलें हैं? मैं यह समझने की कोशिश कर रहा हूं कि व्यवहार में यह आपके लिए कितनी बड़ी समस्या थी।

— पॉशेस्ट

@poshest यह हुआ। मक्खी पर gzipped की सेवा करने के लिए बहुत कम लाभ था (जैसा कि gzip वैसे भी सर्वर पर बहुत तेज़ है), इसलिए जैसे ही मैंने इसे देखा मैंने इसे बंद कर दिया। दूषित डेटा "बाइट टू फर्स्ट बाइट" होने की तुलना में बहुत बड़ी समस्या है, दुर्लभ मामलों में 200 मी धीमी हो जहां सामग्री पहले से ही मौजूद नहीं है।

— डैनैक

यदि कोई संपत्ति हेडर में एक सामग्री-लंबाई की संपत्ति को याद कर रही है, लेकिन इसमें ट्रांसफर-एन्कोडिंग शामिल है: chunked (जैसा कि अक्सर gzipped आस्तियों के मामले में होता है), CloudFront एक आंशिक संपत्ति को कैश नहीं करेगी यदि यह एक समाप्ति chunk प्राप्त नहीं करता है। यदि यह इन दोनों गुणों को याद कर रहा है, तो अपूर्ण संपत्ति को कैश किया जाना संभव है। देखें: docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/…

— Cody Duval

Answer 4

हमने हाल ही में अपनी साइट पर कुछ स्थिर संपत्तियों को संपीड़ित करने के लिए 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

Answer 5

कल अमेज़न ने नई सुविधा की घोषणा की, अब आप अपने वितरण पर gzip को सक्षम कर सकते हैं।

यह बिना जोड़ा गया s3 के साथ काम करता है। अपने आप को .zz फ़ाइलों के साथ, मैंने आज नई सुविधा की कोशिश की और यह बहुत अच्छा काम करता है। (हालांकि आप वर्तमान वस्तुओं को अमान्य करने की आवश्यकता है)

और जानकारी

Answer 6

आप कुछ प्रकार की फ़ाइलों को स्वचालित रूप से संपीड़ित करने और संपीड़ित फ़ाइलों की सेवा करने के लिए CloudFront को कॉन्फ़िगर कर सकते हैं।

AWS डेवलपर गाइड देखें

Comments

क्या आप इसे बेहतर उत्तर देने के लिए अपने समाधान (शायद एक उदाहरण) के बारे में अधिक जानकारी जोड़ सकते हैं।

— यागामी लाइट