วิธีใช้ Tencent Cloud CDN และ Object Storage (COS) เพื่อแก้ปัญหาการโหลดรูปภาพช้าและอัตราผลตอบแทนสูง

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

ปฏิกิริยาแรกของนักพัฒนาหลายคนคือ "เพิ่มแบนด์วิดท์เซิร์ฟเวอร์" แต่ค่าแบนด์วิดท์หลายพันต่อเดือนนั้นต่ำมากในยุคของการประมวลผลแบบคลาวด์คำตอบมาตรฐานสำหรับปัญหานี้เป็นเพียงการรวมกันของหมัด:

Tencent Cloud Object Storage (COS) + เครือข่ายการกระจายเนื้อหา (CDN)

。

บทความนี้จะใช้ภาษาพื้นถิ่นและตรรกะเชิงปฏิบัติที่บริสุทธิ์เพื่อพาคุณไปกำหนดค่าสถาปัตยกรรมนี้ตั้งแต่เริ่มต้นเพื่อแก้ปัญหาการโหลดรูปภาพที่ติดขัดและอัตราการคืนสินค้าที่สูงโดยวิธีนี้จะช่วยให้คุณลดต้นทุนเซิร์ฟเวอร์ได้ถึง80%

1.ทำไมรูปภาพของคุณโหลดช้าจัง? (การถอดจุดปวด)

ก่อนที่จะเพิ่มประสิทธิภาพเรามาดูกันว่าเหตุใดโมเดล "เซิร์ฟเวอร์ hard-hard" แบบเดิมจึงล้มเหลว

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

อัตราผลตอบแทนสูง (ไซต์หลักขาดอากาศหายใจพร้อมกัน): "แหล่งผลตอบแทน" หมายความว่าโหนด CDN ไม่มีแคชและไปที่เซิร์ฟเวอร์ไซต์ต้นทางของคุณเพื่อรับข้อมูลหากอัตราผลตอบแทนสูงถึง70%-80% CDN จะสูญเสียความหมายและเซิร์ฟเวอร์ของคุณจะยังคงถูกครอบงำด้วยการทำงานพร้อมกันที่สูงในทันที

คอขวดแบนด์วิดท์แบบสแตนด์อโลน: ภาพความละเอียดสูง2MB หากมีคน100คนเปิดหน้าเว็บเพื่อดาวน์โหลดในเวลาเดียวกันจะต้องใช้แบนด์วิดท์200MB ทันทีแบนด์วิดท์5Mbps และ10Mbps ของเซิร์ฟเวอร์ธรรมดาโดยทั่วไปจะเป็นอัมพาตในหนึ่งวินาที

แผนทำลายเกม: สถาปัตยกรรมการเชื่อมโยง COS CDN

COS (Object Storage): แทนที่เซิร์ฟเวอร์ภายในของคุณโดยเฉพาะเพื่อจัดเก็บรูปภาพขนาดใหญ่มีความสามารถในการอ่านและเขียนพร้อมกันสูงมากและต้นทุนการจัดเก็บต่ำมาก

CDN (Distribution Network): ซิงโครไนซ์รูปภาพใน COS ไปยังโหนดขอบหลายพันแห่งทั่วประเทศและทั่วโลกล่วงหน้าผู้ใช้ในกวางโจวรับภาพโดยตรงจากโหนดกวางโจวและผู้ใช้ในปักกิ่งรับภาพจากโหนดปักกิ่งและอัตราผลตอบแทนลดลงต่ำกว่า5%

2.ขั้นตอนแรก: การสร้างพื้นฐาน COS และความปลอดภัยของผู้มีอำนาจ

ก่อนอื่นเราต้องถ่ายโอนรูปภาพจากเซิร์ฟเวอร์ที่เปราะบางไปยัง COS ที่เสถียร

1.สร้างถังเก็บ (Bucket)

ลงชื่อเข้าใช้ Tencent Cloud Console ค้นหา "Object Storage COS" และคลิกเพื่อสร้างถังเก็บข้อมูล:

ชื่อ: แค่ตั้งชื่อที่จำง่าย (เช่น my-image-bucket)

ภูมิภาค: ขอแนะนำให้เลือกภูมิภาคเดียวกับเซิร์ฟเวอร์คลาวด์ของคุณ (CVM) หากเป็นการกระจายแบบคงที่ให้เลือกพื้นที่ที่ใกล้เคียงกับกลุ่มผู้ใช้หลักของคุณมากที่สุด

สิทธิ์การเข้าถึง: นี่คือหลุมขนาดใหญ่! ให้แน่ใจว่าได้เลือก "การอ่านและการเขียนส่วนตัว" เคล็ดลับในการหลีกเลี่ยงหลุม: สามเณรจำนวนมากเลือก "การอ่านสาธารณะและการเขียนส่วนตัว" โดยตรงเพื่อความสะดวกนี่เท่ากับการเปิดเผยที่อยู่ดาวน์โหลดจริงของ COS ของคุณบนเครือข่ายสาธารณะหากมีคนสแกนลิงก์ COS ของคุณโดยมีเจตนาร้ายค่าบริการข้อมูลดาวน์ลิงค์ของ COS จะทำให้คุณล้มละลายในชั่วข้ามคืนเราต้อง

ผ่าน CDN ถัดไปเพื่อให้เกิดการป้องกันแปรงเครือข่ายสาธารณะ

2.อัปโหลดภาพทดสอบ

หลังจากสร้างเสร็จแล้วให้ป้อนถังเก็บข้อมูลและอัปโหลดภาพทดสอบสองสามภาพ (เช่น

Test.jpg

) บันทึกเส้นทางของมันณจุดนี้เนื่องจากเป็น "การอ่านและเขียนส่วนตัว" URL ของวัตถุที่คุณเข้าถึงโดยตรงจะได้รับแจ้ง

AccessDenied

(ปฏิเสธการเข้าถึง) ซึ่งแสดงให้เห็นว่ากลยุทธ์ด้านความปลอดภัยมีผลบังคับใช้

3.ขั้นตอนที่สอง: การกำหนดค่า CDN และแหล่งส่งคืนที่ไร้รอยต่อ (ขั้นตอนหลัก)

ต่อไปเราจะใส่ COS ด้วย "เกราะเร่งความเร็ว" ของ CDN

1.การเข้าถึงชื่อโดเมนที่เกี่ยวข้องกับ CDN

เข้าสู่คอนโซล Tencent Cloud CDN คลิก "การจัดการชื่อโดเมน"-> "เพิ่มชื่อโดเมน":

* ชื่อโดเมนแบบเร่งความเร็ว: กรอกชื่อโดเมนระดับที่สองที่คุณเตรียมไว้เช่น img.yourdomain.com

* ประเภทสถานีต้นทาง: เลือก "Tencent Cloud COS"

* ที่อยู่สถานีต้นทาง: ตรวจสอบถังเก็บข้อมูลที่คุณเพิ่งสร้างโดยตรงในเมนูแบบเลื่อนลง

2.เปิดใช้งาน "COS ส่วนตัว Barrel Appraisal" (ขั้นตอนสำคัญในการป้องกันการแปรงฟัน)

หลังจากเลือกไซต์ต้นทาง COS แล้วระบบจะแสดงตัวเลือกสีทอง: "การตรวจสอบแหล่งที่มา" หรือ "การตรวจสอบสิทธิ์ที่มีผลผูกพัน/การตรวจสอบถังส่วนตัว"

* ต้องติ๊กเพื่อเปิด!

* หลักการ: หลังจากเปิดแล้ว Tencent Cloud จะสร้างช่องเข้ารหัสโดยอัตโนมัติซึ่งมีเพียง CDN เท่านั้นที่รู้เพื่อไปที่ COS เพื่อรับภาพสำหรับผู้ใช้ทั่วไปพวกเขาสามารถเข้าถึงได้เฉพาะ

3.กำหนดค่า CNAME (ให้ชื่อโดเมนมีผล)

หลังจากเพิ่มชื่อโดเมนแล้ว Tencent Cloud จะให้ที่อยู่ CNAME ที่ลงท้ายด้วย .cdn.dnsv1.com

* ไปที่ผู้ให้บริการแก้ไขชื่อโดเมนของคุณ (เช่น Tencent Cloud DNSPod, Alibaba Cloud Resolution เป็นต้น) และเพิ่มระเบียน CNAME

* บันทึกโฮสต์กรอก img และกรอกที่อยู่ CNAME ที่คัดลอกไปยังค่าบันทึก

* รอ2-5นาทีการวิเคราะห์ทั่วโลกมีผล

4.ขั้นตอนที่สาม: จะบีบอัตราผลตอบแทนให้ถึงขีดจำกัดได้อย่างไร?

หลังจากจับคู่ CDN ของหลายๆคนแล้วพวกเขาพบว่าความกดดันของเซิร์ฟเวอร์ยังคงสูงอยู่สาเหตุก็คืออัตราการตีแคชต่ำเกินไปและกลับไปที่แหล่งที่มาทุกวันในการแก้ปัญหานี้คุณต้องปรับพารามิเตอร์ขั้นสูงสามตัวต่อไปนี้ในคอนโซล CDN:

1.กฎการหมดอายุของโหนดแคช (ยิ่งนานยิ่งดี)

รูปภาพเป็นของ "ทรัพยากรแบบคงที่" เมื่อเผยแพร่แล้วจะไม่ค่อยมีการแก้ไข

* ใน "การกำหนดค่าแคช" ของ CDN ให้เพิ่มกฎ

* ประเภทเนื้อหา: คำต่อท้ายไฟล์

* คำต่อท้ายเฉพาะ:. Jpg; .jpeg; .png; .gif;.webp;.svg

* เวลารีเฟรช: แนะนำให้ตั้งค่า30วันหรือแม้กระทั่ง365วัน

* ตรรกะ: บอก CDN โหนดเมื่อใดก็ตามที่ภาพเข้ามาเว้นแต่ฉัน

รีเฟรชด้วยตนเองมิฉะนั้นจะไม่ได้รับอนุญาตให้ไปที่ COS ภายในหนึ่งปีและภาพจะถูกตอกเข้ากับโหนดขอบโดยตรง

2.เปิด "กรองพารามิเตอร์แคช" (หรือที่เรียกว่าไม่สนใจพารามิเตอร์)

เมื่อผู้ใช้เข้าถึงรูปภาพบางครั้ง URL จะมีหางอยู่หลังเช่น img.yourdomain.com/a.jpg? V = 123หรือ? From = weixin

* ถ้าไม่เปิดการกรอง: CDN จะคิดว่า a.jpg? V = 123และ a.jpg? V = 456เป็นไฟล์สองไฟล์ที่แตกต่างกันโดยสิ้นเชิงซึ่งจะเรียกการดาวน์โหลดย้อนกลับไปยังแหล่งที่มาสองครั้ง

* วิธีที่ถูกต้อง: เปิด "กรองพารามิเตอร์แคช" โดยไม่คำนึงถึงพารามิเตอร์ที่อยู่เบื้องหลัง CDN จะถือว่าเป็น a.jpg และกดแคชโหนดโดยตรงและอัตราผลตอบแทนจะลดลงทันที

3.เปิด "Advanced Back Source Configuration" (Advanced Advanced)

หากคุณมีรูปภาพจำนวนมากและมีการเข้าถึงรูปภาพที่ไม่เป็นที่นิยมเป็นครั้งคราวคุณสามารถเปิด "Range Back to Source" ได้

* เมื่อผู้ใช้ขอภาพขนาดใหญ่10MB แต่ดูเพียง2MB แรกมันจะปิด

* หากไม่ได้เปิด Range โหนด CDN จะดาวน์โหลดทั้งหมด10MB จาก COS ในครั้งเดียวทำให้สิ้นเปลืองทราฟฟิก

* หลังจากเปิด Range กลับไปยังแหล่งที่มา CDN จะดึงกลับไปยังแหล่งที่มาให้มากที่สุดเท่าที่ผู้ใช้จะเห็นซึ่งจะช่วยประหยัดเงินได้อย่างแม่นยำ

5.ขั้นตอนที่สี่: การเพิ่มประสิทธิภาพประสบการณ์ขั้นสูงสุด-การลดความอ้วนขั้นสูง

หากคุณคิดว่ารูปภาพยังโหลดไม่เร็วพอแสดงว่า "ปริมาตร" ของรูปภาพใหญ่เกินไป Tencent Cloud มีเครื่องมือที่เกือบจะโกง: Data Vientiane (CI) รวมอยู่ใน COS และ CDN โดยตรงและสามารถลดขนาดรูปภาพได้มากกว่า60% โดยไม่ต้องแก้ไขโค้ดส่วนหน้าใดๆของคุณ

1.เปิดเวียงจันทน์ webp Adaptive

* จุดปวด: รูปแบบ PNG/JPG เก่าเกินไปและมีขนาดใหญ่รูปแบบ WebP มีขนาดเล็ก30%-50% แต่ไม่รองรับเบราว์เซอร์รุ่นเก่าบางรุ่น (เช่น IE เมื่อสิบกว่าปีก่อน)

* การกำหนดค่านางฟ้า: เปิด "WebP Adaptive Distribution" บนคอนโซลข้อมูลเวียงจันทน์ของ CDN หรือ COS

* เอฟเฟกต์: เมื่อเบราว์เซอร์ของผู้ใช้รองรับ WebP CDN จะแปลง a.jpg เป็นรูปแบบ WebP ในพื้นหลังโดยอัตโนมัติและส่งให้ผู้ใช้หากเป็นเบราว์เซอร์เก่าจะยังคงส่ง a.jpg เป็นแบบอัตโนมัติอย่างสมบูรณ์ไม่มีการรับรู้ส่วนหน้าและความเร็วในการโหลดจะปิดลงในแหล่งกำเนิด

2.Real-time ตัดและการบีบอัด (ด้วยการเข้าถึงพารามิเตอร์)

อย่าปล่อยให้ส่วนหน้าโหลดภาพต้นฉบับโดยตรง! หากหน้ารายการของคุณต้องการเพียงภาพขนาดย่อ200x200และคุณอัปโหลดภาพต้นฉบับ4K ผู้ใช้จะติดอยู่อย่างแน่นอน

* Tencent Cloud รองรับการเพิ่มพารามิเตอร์โดยตรงหลังลิงก์รูปภาพเพื่อให้การประมวลผลแบบคลาวด์แบบเรียลไทม์:

* ภาพต้นฉบับ: img.yourdomain.com/photo.jpg

* 200ภาพขนาดย่อกว้าง: img.yourdomain.com/photo.j

Pg? ImageMogr2 /thumbnail/200x/

* ให้ระบบคลาวด์ตัดให้คุณโทรศัพท์มือถือของผู้ใช้ต้องดาวน์โหลดรูปภาพ KB เพียงไม่กี่ภาพจะไม่เร็วได้อย่างไร?

6.รายการสรุปและตรวจสอบตนเอง

ด้วยการกำหนดค่า "การรวมนางฟ้า" ข้างต้นในที่สุดเราก็ทำชุดสถาปัตยกรรมการกระจายภาพที่มีประสิทธิภาพประหยัดเงินและปลอดภัยอย่างแน่นอน

[ผู้ใช้เบราว์เซอร์]

│

├────> 1.การเข้าถึงโหนด CDN (img.yourdomain.com) ───> [แคชฮิต: 0มิลลิวินาทีแฟลชโหลด]

│

└ ────> 2.แคชพลาด (อัตราผลตอบแทน <5%)

│

└ ────> [ช่องความปลอดภัยที่เข้ารหัส] ───> Tencent Cloud COS (Private Storage Barrel) ───> [Data Vientiane จะถูกโอนไปยัง WebP/Crop โดยอัตโนมัติ]

เมื่อเบราว์เซอร์ของผู้ใช้เริ่มต้นการร้องขอให้เข้าถึงโหนด CDN ก่อนหากแคชตีภาพจะกะพริบโหลดภายใน0มิลลิวินาทีหากแคชล้มเหลว (โดยปกติจะน้อยกว่า5% ในกรณีนี้) CDN จะกลับไปที่ถังเก็บข้อมูลส่วนตัวของ Tencent Cloud COS ผ่านช่องทางที่ปลอดภัยที่เข้ารหัสและโอนไปยัง WebP โดยอัตโนมัติหรือครอบตัดผ่านข้อมูลเวียงจันทน์และในที่สุดก็ส่งคืนให้กับผู้ใช้อย่างปลอดภัย

สุดท้ายให้คุณจัดเรียงรายการตรวจสอบการป้องกันการพลิกคว่ำด้วยตนเองก่อนที่จะออนไลน์:

รายการตรวจสอบ

สถานะที่ถูกต้อง

ทำไมจึงสำคัญ

สิทธิ์ถัง COS

ต้องเป็นการอ่านและเขียนส่วนตัว

ป้องกันการโจรกรรมที่เป็นอันตรายอย่างเคร่งครัดและปกป้องความปลอดภัยของทรัพย์สิน

การประเมินแหล่งที่มาของ CDN

ต้องเปิดและอนุญาต

มิฉะนั้น CDN จะไม่สามารถรับภาพจากถัง COS ส่วนตัวได้

เวลาแคชรูปภาพ

แนะนำ30วันขึ้นไป

ลดอัตราผลตอบแทนได้อย่างมากและลดอัตราการไหลของ COS

กรองแคชพารามิเตอร์

ต้องเปิด

ป้องกันไม่ให้ URL แบบสุ่มที่มีพารามิเตอร์จากการยกเลิกแคช CDN ของคุณ

ใบรับรอง HTTPS

ขอแนะนำให้กำหนดค่าและบังคับให้กระโดด

หลีกเลี่ยงเบราว์เซอร์ที่ทันสมัยหรือโปรแกรมขนาดเล็กเพื่อบล็อกภาพเนื่องจากเนื้อหาผสม

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