ให้บริการ CSS และ JavaScript จาก Amazon CloudFront ผ่าน S3

194

ฉันกำลังมองหาวิธีทำให้ไซต์ของฉันโหลดเร็วขึ้นและวิธีหนึ่งที่ฉันต้องการสำรวจก็คือการใช้ประโยชน์จาก Cloudfront ให้มากขึ้น

เนื่องจากเดิม Cloudfront ไม่ได้ออกแบบมาเป็น CDN ดั้งเดิมและเนื่องจากมันไม่รองรับการ gzipping ฉันจึงได้ใช้มันเพื่อโฮสต์ภาพทั้งหมดของฉันซึ่งอ้างอิงโดย Cloudname cname ในรหัสไซต์ของฉันและปรับให้เหมาะสมที่สุด - ส่วนหัวในอนาคต

ในทางกลับกันไฟล์ CSS และ javascript นั้นโฮสต์บนเซิร์ฟเวอร์ของฉันเองเพราะจนถึงตอนนี้ฉันรู้สึกว่าพวกเขาไม่สามารถรับ gzipped จาก Cloudfront ได้และกำไรจาก gzipping (ประมาณ 75%) จากการใช้ CDN (ประมาณ 50 เปอร์เซ็นต์): Amazon S3 (และดังนั้น Cloudfront) ไม่สนับสนุนการให้บริการเนื้อหา gzipped ในลักษณะมาตรฐานโดยใช้ส่วนหัว HTTP ยอมรับการเข้ารหัสที่ส่งโดยเบราว์เซอร์เพื่อระบุการสนับสนุนการบีบอัด gzip และ ดังนั้นพวกเขาจึงไม่สามารถ Gzip และให้บริการส่วนประกอบได้ทันที

ดังนั้นฉันจึงอยู่ภายใต้การแสดงผลจนถึงขณะนี้เราต้องเลือกระหว่างสองทางเลือก

ย้ายทรัพย์สินทั้งหมดไปที่ Amazon CloudFront แล้วลืม GZipping;
เก็บส่วนประกอบไว้ในตัวเองและกำหนดค่าเซิร์ฟเวอร์ของเราเพื่อตรวจสอบคำขอขาเข้าและดำเนินการ GZipping แบบทันทีตามความเหมาะสมซึ่งเป็นสิ่งที่ฉันเลือกที่จะทำ

มีเป็นวิธีการแก้ปัญหาที่จะแก้ปัญหานี้ แต่เป็นหลักเหล่านี้ไม่ได้ทำงาน [ ลิงค์ ]

ตอนนี้ดูเหมือนว่า Amazon Cloudfront รองรับต้นกำเนิดที่กำหนดเองและตอนนี้คุณสามารถใช้วิธีการเข้ารหัสยอมรับ HTTP มาตรฐานสำหรับการให้บริการเนื้อหา gzipped ถ้าคุณใช้ Custom Origin [ ลิงค์ ]

ฉันยังไม่สามารถใช้คุณลักษณะใหม่บนเซิร์ฟเวอร์ของฉันได้ โพสต์บล็อกที่ฉันเชื่อมโยงกับด้านบนซึ่งเป็นสิ่งเดียวที่ฉันพบรายละเอียดการเปลี่ยนแปลงดูเหมือนว่าคุณสามารถเปิดใช้งาน gzipping เท่านั้น (การแก้ไขปัญหาบาร์ซึ่งฉันไม่ต้องการใช้) หากคุณเลือกที่มาแบบกำหนดเองซึ่ง ฉันไม่ต้องการ: ฉันคิดว่ามันง่ายกว่าที่จะโฮสต์ fileds ที่สอดคล้องกันบนเซิร์ฟเวอร์ Cloudfront ของฉันและเชื่อมโยงไปยังพวกเขาจากที่นั่น แม้จะอ่านเอกสารอย่างละเอียดแล้วฉันก็ไม่รู้:

ไม่ว่าจะเป็นคุณสมบัติใหม่หมายถึงไฟล์ที่ควรจะโฮสต์บนเซิร์ฟเวอร์โดเมนของฉันเองผ่านแหล่งกำเนิดที่กำหนดเองและถ้าเป็นเช่นนั้นการตั้งค่ารหัสใดที่จะบรรลุสิ่งนี้;
วิธีกำหนดค่าส่วนหัว css และ javascript เพื่อให้แน่ใจว่าได้รับ gzipped จาก Cloudfront

— โดนัลด์เจนกินส์
แหล่งที่มา

202

UPDATE: ขณะนี้ Amazon รองรับการบีบอัด gzip ดังนั้นจึงไม่จำเป็นต้องใช้อีกต่อไป ประกาศของ Amazon

คำตอบเดิม:

คำตอบคือการ gzip ไฟล์ CSS และ JavaScript ใช่คุณอ่านถูกต้องแล้ว

gzip -9 production.min.css

production.min.css.gzนี้จะผลิต ลบ.gz, อัปโหลดไปยัง S3 (หรือสิ่งที่เซิร์ฟเวอร์ที่คุณกำลังใช้แหล่งกำเนิด) และชัดเจนกำหนดส่วนหัวสำหรับไฟล์ไปยังContent-Encodinggzip

ไม่ใช่การบีบอัดแบบทันที แต่คุณสามารถรวมไว้ในสคริปต์การสร้าง / การปรับใช้ของคุณได้อย่างง่ายดาย ข้อดีคือ:

มันไม่จำเป็นต้องใช้ CPU สำหรับ Apache เพื่อ gzip เนื้อหาเมื่อมีการร้องขอไฟล์
ไฟล์จะถูก gzipped ที่ระดับการบีบอัดสูงสุด (สมมติว่าgzip -9)
คุณกำลังให้บริการไฟล์จาก CDN

สมมติว่าไฟล์ CSS / JavaScript ของคุณเป็น (a) minified และ (b) ใหญ่พอที่จะปรับซีพียูที่จำเป็นในการคลายการบีบอัดในเครื่องของผู้ใช้คุณสามารถรับประสิทธิภาพที่สำคัญได้ที่นี่

เพียงจำไว้ว่า: หากคุณทำการเปลี่ยนแปลงกับไฟล์ที่ถูกแคชใน CloudFront ตรวจสอบให้แน่ใจว่าคุณทำให้แคชใช้ไม่ได้หลังจากทำการเปลี่ยนแปลงประเภทนี้

— Skyler Johnson
แหล่งที่มา

37

หลังจากอ่านลิงก์ของคุณฉันต้องบอกว่าผู้เขียนบล็อกไม่มีข้อมูล "อย่างไรก็ตามหากผู้ใช้มีเบราว์เซอร์ที่ไม่รองรับการเข้ารหัส gzip สไตล์ชีตและจาวาสคริปต์ของเว็บไซต์ของคุณก็จะไม่ทำงานสำหรับผู้ใช้รายนั้น" เบราว์เซอร์นี้อาจเก่าเกินไปที่จะเรียกใช้สไตล์ชีทและไฟล์สคริปต์ของคุณ ผู้ใช้เหล่านี้คิดเป็นร้อยละ

— Skyler Johnson

3

ปรับปรุง: ฉันทำงานออกมา เหตุผลที่ไม่แสดงคือฉันลืมตั้งค่าประเภทเนื้อหาเป็นข้อความ / css หากคุณทำเช่นนั้นคุณก็สบายดีแม้ว่าจะมีเหตุผลบางประการที่ดูเหมือนว่าคุณไม่สามารถเพิ่มส่วนหัว "ยอมรับการเข้ารหัส: แตกต่าง" ใน S3 (ซึ่งจะช่วยในการจัดอันดับ Google Speed) ด้วยเหตุผลที่อธิบายไว้ที่นี่: [ลิงค์ ] นอกจากนี้ผมตั้งแคชควบคุมการแคชสินทรัพย์ แต่มันก็ไม่ได้ดูเหมือนจะแคชมัน ...

— โดนัลด์เจนกินส์

32

เพิ่งพบสิ่งนี้ผ่านทาง Google และฉันขอโทษที่ต้องบอกว่านี่ไม่ใช่คำแนะนำที่ดี แม้ว่าเบราว์เซอร์เดสก์ท็อป <1% ไม่สามารถจัดการเนื้อหา gzipped ได้ แต่เบราว์เซอร์มือถือส่วนใหญ่ไม่สามารถทำได้ จำนวนขึ้นอยู่กับกลุ่มเป้าหมายที่คุณกำลังดู แต่ Nokia S40 ที่เก่ากว่าส่วนใหญ่มีการบีบอัด buggy gzip เช่น วิธีที่เหมาะสมคือ "Custom Origin" ซึ่งชี้ไปยังเว็บเซิร์ฟเวอร์ Apache / IIS ซึ่งทำการบีบอัดเนื้อหาและให้บริการส่วนหัว HTTP ที่เหมาะสม นี่คือหนึ่งโพสต์บล็อกที่อธิบายส่วนสำคัญของมัน: nomitor.com/blog/2010/11/10/…

— Jesper M

14

สถานการณ์ตอนนี้เป็นอย่างไรในต้นปี 2558 ลิงก์ที่โพสต์โดย @JesperMortensen และ Simon Peck ยังคงเกี่ยวข้องอยู่หรือไม่

— ItalyPaleAle

5

Amazon ประกาศการสนับสนุนการบีบอัด gzip ในเดือนธันวาคมปี 2558 ดังนั้นตอนนี้ไม่เกี่ยวข้องเพียงแค่อัปโหลดไฟล์พื้นฐานและจะใช้งานได้ aws.amazon.com/blogs/aws/…

— Sean

15

คำตอบของฉันคือการออกไปนี้: http://blog.kenweiner.com/2009/08/serving-gzipped-javascript-files-from.html

สร้างคำตอบของนักเล่นสกีคุณสามารถอัปโหลด css และ js เวอร์ชัน gzip และ non-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; การทดสอบนี้เพื่อให้แน่ใจว่าเบราว์เซอร์สามารถจัดการรหัส 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>

UPDATE: ขณะนี้ Amazon รองรับการบีบอัด gzip ประกาศดังนั้นจึงไม่จำเป็นต้องใช้อีกต่อไป ประกาศของ Amazon

— ฌอน
แหล่งที่มา

ขอบคุณมากสำหรับคำแนะนำนั้น ถ้าฉันเข้าใจคุณอย่างถูกต้องคุณกำลังพูดถึงกรณีที่เบราว์เซอร์ของผู้ใช้ไม่สามารถอ่านไฟล์ gzipped ซึ่งอาจเกิดขึ้นได้แม้ว่ามันจะเกี่ยวข้องกับเบราว์เซอร์ที่ค่อนข้างเล็กในปัจจุบัน ข้อเสียเปรียบประการหนึ่งที่เป็นไปได้ของการแก้ปัญหานี้หากคุณอ้างถึงลิงก์ที่ฉันโพสต์ไว้ในคำถามของฉัน[ลิงค์ ] ก็หมายความว่าคุณไม่สามารถแคชหน้าเว็บของคุณได้เนื่องจากมันจะทำงานเฉพาะเมื่อรหัสของคุณ หน้า (ซึ่งเป็นของฉันแน่นอน)

— Donald Jenkins

@DonaldJenkins ฉันคิดว่า js จะยังคงถูกแคชอยู่ เมื่อคุณสร้างแท็กสคริปต์ใน js snip js ยังคงต้องถูกเรียกใช้และฉันเชื่อว่าถ้าอยู่ในแคชเบราว์เซอร์จะใช้จากที่นั่น

— Sean

2

หน้าทดสอบblog.kosny.com/testpages/safari-gzระบุว่าคำเตือน "ระวังการตั้งชื่อและทดสอบใน Safari เนื่องจากซาฟารีจะไม่จัดการ css.gz หรือ js.gz" ล้าสมัย ใน Safari 7 บน Mavericks และใน Safari บน iOS 7 ทั้ง css.gz และ js.gz ทำงาน ฉันไม่รู้ว่าการเปลี่ยนแปลงนี้เกิดขึ้นฉันกำลังทำการทดสอบกับอุปกรณ์ที่ฉันมีเท่านั้น

— garyrob

14

Cloudfront รองรับ gzipping

Cloudfront เชื่อมต่อกับเซิร์ฟเวอร์ของคุณผ่าน HTTP 1.0 โดยค่าเริ่มต้น webservers บางตัวรวมถึง nginx dos ไม่ได้แสดงเนื้อหา gzipped ในการเชื่อมต่อ HTTP 1.0 แต่คุณสามารถบอกได้ว่าต้องทำอย่างไรโดยการเพิ่ม:

gzip_http_version 1.0

เพื่อกำหนดค่า nginx ของคุณ สามารถกำหนดค่าที่เทียบเท่าได้สำหรับเว็บเซิร์ฟเวอร์ที่คุณใช้งาน

สิ่งนี้มีผลข้างเคียงในการสร้างการเชื่อมต่อแบบไม่ใช้งานสำหรับการเชื่อมต่อ HTTP 1.0 แต่เนื่องจากข้อดีของการบีบอัดข้อมูลมีขนาดใหญ่มากจึงคุ้มค่ากับการแลกเปลี่ยน

นำมาจากhttp://www.cdnplanet.com/blog/gzip-nginx-cloudfront/

แก้ไข

การแสดงเนื้อหาที่ gzipped ได้อย่างรวดเร็วผ่านทางหน้าเมฆของ Amazon นั้นอันตรายและไม่ควรทำ โดยทั่วไปหากเว็บเซิร์ฟเวอร์ของคุณกำลัง gzipping เนื้อหามันจะไม่ตั้งค่าความยาวเนื้อหาและแทนที่จะส่งข้อมูลเป็นก้อน

หากการเชื่อมต่อระหว่าง Cloudfront และเซิร์ฟเวอร์ของคุณถูกขัดจังหวะและถูกตัดขาดก่อนกำหนด Cloudfront จะยังคงแคชผลลัพธ์บางส่วนและทำหน้าที่เป็นรุ่นแคชจนกว่าจะหมดอายุ

คำตอบที่ยอมรับของ gzipping ก่อนบนดิสก์จากนั้นการให้บริการเวอร์ชัน gzipped เป็นแนวคิดที่ดีกว่าเนื่องจาก Nginx จะสามารถตั้งค่าส่วนหัวความยาวเนื้อหาและดังนั้น Cloudfront จะยกเลิกรุ่นที่ถูกตัดทอน

— Danack
แหล่งที่มา

5

-1, คำตอบนี้ไม่เกี่ยวกับคำถาม Nginx! = S3 และ Cloudfront

— Jonathan

@Danack คุณพบปัญหามากมายเกี่ยวกับการแคชไฟล์ที่เรียกคืนครึ่งหนึ่งของ Cloudfront เนื่องจากปัญหานี้หรือไม่ ฉันพยายามเข้าใจว่าปัญหานี้เป็นปัญหาสำหรับคุณในทางปฏิบัติ

— poshest

1

@poshest มันเกิดขึ้น มีประโยชน์น้อยมากในการแสดง gzipped แบบทันที (เนื่องจาก gzip เร็วมากบนเซิร์ฟเวอร์อยู่แล้ว) ดังนั้นฉันจึงปิดมันทันทีที่ฉันเห็นมันเกิดขึ้น ข้อมูลที่เสียหายเป็นปัญหาที่ใหญ่กว่าการมี "เวลาถึงไบต์แรก" ช้ากว่า 200ms ในบางกรณีซึ่งเนื้อหานั้นไม่มีอยู่ในรูปแบบ gzipped

— Danack

หากเนื้อหาหายไปจากคุณสมบัติความยาวเนื้อหาในส่วนหัว แต่รวมถึงการเข้ารหัสการถ่ายโอน: chunked (ซึ่งมักจะเป็นกรณีที่มีเนื้อหา gzipped), CloudFront จะไม่แคชเนื้อหาบางส่วนหากไม่ได้รับก้อนที่ยุติ หากไม่มีคุณสมบัติเหล่านี้ทั้งสองอาจเป็นไปได้ว่าสินทรัพย์ที่ไม่สมบูรณ์จะถูกแคช ดู: docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/…

— Cody Duval

5

เราได้ทำการปรับปรุงบางอย่างสำหรับ uSwitch.com เมื่อเร็ว ๆ นี้เพื่อบีบอัดสินทรัพย์คงที่บางส่วนบนเว็บไซต์ของเรา แม้ว่าเราจะตั้งค่าพร็อกซี nginx ให้ทำเช่นนี้ แต่ฉันได้รวบรวมแอพ Heroku เล็ก ๆ น้อย ๆ ที่พร็อกซีระหว่าง CloudFront และ S3 เพื่ออัดเนื้อหา: 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

— pingles
แหล่งที่มา

5

เมื่อวานนี้ amazon ประกาศคุณสมบัติใหม่ตอนนี้คุณสามารถเปิดใช้งาน gzip ในการกระจายของคุณ

มันใช้งานได้กับ s3 โดยไม่เพิ่มไฟล์. gz ด้วยตัวคุณเองฉันลองใช้คุณสมบัติใหม่วันนี้และใช้งานได้ดี (ต้องทำให้เป็นโมฆะถ้าคุณเป็นวัตถุปัจจุบัน)

ข้อมูลเพิ่มเติม

— คริส
แหล่งที่มา

0

คุณสามารถกำหนดค่า CloudFront ให้บีบอัดไฟล์บางประเภทโดยอัตโนมัติและแสดงไฟล์บีบอัดได้

ดูคู่มือผู้พัฒนา AWS

— ฟี
แหล่งที่มา

คุณสามารถเพิ่มข้อมูลเพิ่มเติมเกี่ยวกับโซลูชันของคุณ (อาจเป็นตัวอย่าง) เพื่อให้เป็นคำตอบที่ดีขึ้น

— Yagami Light