Cara menggunakan Tencent Cloud CDN dan Storan Objek (COS) untuk menyelesaikan masalah pemuatan gambar yang perlahan dan kadar pulangan yang tinggi
Pemuatan gambar perlahan, lebar jalur pelayan sesak, dan caj lalu lintas bulanan sangat tinggi... Selagi laman web, app atau applet anda mempunyai banyak gambar, cepat atau lambat ketiga-tiga soalan ini akan menjadi "mimpi buruk" anda.
Reaksi pertama banyak pembangun adalah "menambah lebar jalur pelayan", tetapi kos lebar jalur ribuan bulan sangat rendah. Pada era pengkomputeran awan, satu-satunya jawapan standard untuk menyelesaikan masalah ini adalah gabungan pukulan:
Penyimpanan Objek Tencent Cloud (COS) + Rangkaian Pengedaran Kandungan (CDN)
。
Artikel ini akan menggunakan bahasa vernakular dan logik pertempuran sebenar yang murni untuk membawa anda mengkonfigurasi seni bina ini dari sifar, menyelesaikan sepenuhnya masalah pemuatan gambar dan kadar pulangan yang tinggi, dan membantu anda mengurangkan kos pelayan sebanyak 80%.
1. Mengapa gambar anda dimuat dengan perlahan? (Membongkar titik sakit)
Sebelum mengoptimumkan, mari kita lihat mengapa model "pelayan keras" tradisional runtuh.
Sekatan jarak geografi (kerosakan penghantaran): Pelayan anda diakses oleh pengguna di Beijing dan Shenzhen, dan data harus menjangkau ribuan kilometer. Apabila rangkaian bergetar sedikit, gambar akan menjadi jam pasir "dimuat".
Kadar pulangan yang tinggi (sesak nafas di laman web utama): "Kembali ke sumber" bermaksud bahawa nod CDN tidak mempunyai cache dan pergi ke pelayan laman web sumber anda untuk mendapatkan data. Sekiranya kadar pengembalian setinggi 70%-80%,CDN akan kehilangan maknanya, dan pelayan anda masih akan dihanyutkan oleh serentak tinggi serta-merta.
Hambatan lebar jalur yang berdiri sendiri: gambar definisi tinggi 2MB, jika 100 orang membuka laman web untuk memuat turun pada masa yang sama, lebar jalur 200MB diperlukan dalam sekelip mata. Lebar jalur 5Mbps dan 10Mbps pelayan biasa pada dasarnya lumpuh dalam satu saat.
Penyelesaian rehat: Senibina hubungan COS CDN
COS (Penyimpanan Objek): Ganti pelayan tempatan anda, yang digunakan khas untuk menyimpan gambar besar-besaran. Ia mempunyai kemampuan membaca dan menulis serentak yang sangat tinggi dan kos penyimpanan yang sangat rendah.
CDN (rangkaian pengedaran): Segerakkan gambar dalam COS ke ribuan nod tepi di seluruh negara dan bahkan di seluruh dunia terlebih dahulu. Pengguna di Guangzhou mengambil gambar secara langsung dari simpul Guangzhou, dan pengguna di Beijing mengambil gambar dari simpul Beijing, dan kadar pengembalian turun di bawah 5%.
2. Tahap pertama: infrastruktur COS dan keselamatan kebenaran
Pertama, kita perlu memindahkan gambar dari pelayan rapuh ke COS yang stabil.
1. Buat baldi (Bucket)
Log masuk ke Tencent Cloud Console, cari "Objek Penyimpanan COS", dan klik Buat baldi:
Nama: Cukup beri nama yang tidak dapat diingat (seperti kad saya).
Geografi: Sebaiknya pilih kawasan yang sama dengan pelayan awan anda (CVM). Sekiranya ia adalah pengedaran statik semata-mata, pilih kawasan yang paling dekat dengan kumpulan pengguna teras anda.
Akses: Terdapat lubang besar di sini! Pastikan anda memilih "Membaca dan Menulis Swasta". Petua untuk mengelakkan lubang: Ramai pemula secara langsung memilih "Bacaan Awam dan Penulisan Swasta" untuk kemudahan gambar. Ini sama dengan mendedahkan alamat muat turun COS sebenar anda ke rangkaian awam. Sekiranya seseorang meleret pautan COS anda dengan jahat, caj data downlink COS akan membuat anda muflis dalam sekelip mata. Kita mesti
Melalui CDN seterusnya untuk mencapai anti-berus rangkaian awam.
2. Muat naik gambar ujian
Setelah penciptaan selesai, masukkan baldi dan muat naik beberapa gambar ujian (mis.
Test.jpg
), Rakam jalannya. Pada masa ini, kerana ia adalah "membaca dan menulis peribadi", anda akan diminta untuk mengakses URL objek secara langsung
AccessDenied
(Akses ditolak), yang menunjukkan bahawa dasar keselamatan telah berlaku.
3. Tahap kedua: konfigurasi CDN dan pulangan lancar (langkah teras)
Seterusnya, kami akan meletakkan "perisai pecutan" CDN pada COS.
1. Akses nama domain dikaitkan dengan CDN
Masukkan konsol Tencent Cloud CDN dan klik "Pengurusan Nama Domain"-> "Tambah Nama Domain":
* Mempercepat nama domain: isikan nama domain tahap kedua anda sendiri, seperti img.yourdomain.com.
* Jenis stesen sumber: pilih "Tencent Cloud COS".
* Alamat stesen sumber: Tandakan baldi yang baru anda buat secara langsung di menu drop-down.
2. Aktifkan "Pengesahan Tong Peribadi COS" (langkah anti-berus utama)
Setelah memilih stesen sumber COS, sistem akan muncul pilihan emas: "Kembali ke pengesahan sumber" atau "Mengikat kebenaran/pengesahan tong peribadi".
* Mesti diperiksa untuk dibuka!
* Prinsip: Setelah dibuka, Tencent Cloud secara automatik akan menghasilkan saluran yang disulitkan yang hanya diketahui oleh CDN untuk pergi ke COS untuk mengambil gambar. Bagi pengguna biasa, mereka hanya boleh mengakses
3. Konfigurasikan CNAME (untuk menjadikan nama domain berkesan)
Setelah menambahkan nama domain, Tencent Cloud akan memberi anda alamat CNAME yang berakhir dengan. cdn.dnsv1.com.
* Pergi ke penyedia perkhidmatan penyelesaian nama domain anda (seperti Tencent Cloud DNSPod, penyelesaian Alibaba Cloud, dll.), Dan tambahkan rekod CNAME.
* Isi img untuk rekod tuan rumah, dan isikan alamat CNAME yang baru disalin untuk nilai rekod.
* Tunggu 2-5 minit untuk analisis global berkuat kuasa.
4. Tahap ketiga: Bagaimana menekan kadar sumber kembali ke had?
Setelah CDN banyak orang dilengkapi, mereka mendapati bahawa tekanan pelayan masih tinggi. Sebabnya ialah kadar hit cache terlalu rendah dan kembali ke sumbernya setiap hari. Untuk menyelesaikan masalah ini, tiga parameter lanjutan berikut mesti diselaraskan pada konsol CDN:
1. Peraturan tamat tempoh cache nod (semakin lama semakin baik)
Gambar itu adalah "sumber statik" dan jarang diubah suai setelah diterbitkan.
* Dalam "konfigurasi cache" CDN, tambahkan peraturan.
* Jenis kandungan: akhiran fail.
* Akhiran khusus:. Jpg;.jpeg;.png;.gif;.webp;.svg
* Masa penyegaran: Adalah disyorkan untuk menetapkan 30 hari atau bahkan 365 hari.
* Logik: Beritahu nod CDN selagi gambar masuk kecuali saya
Segarkan secara manual, jika tidak, anda tidak akan dibenarkan pergi ke COS dalam masa satu tahun, dan anda boleh memaku gambar secara langsung pada simpul tepi.
2. Hidupkan "Filter Parameter Cache" (juga dikenali sebagai Abaikan Parameter)
Apabila pengguna mengakses gambar, kadang-kadang ada ekor di belakang URL, seperti img.yourdomain.com/a.jpg? V = 123 atau? Dari = weixin.
* Jika penapisan tidak dihidupkan: CDN akan berfikir a.jpg? V = 123 dan a.jpg? V = 456 adalah dua fail yang sama sekali berbeza, yang mencetuskan dua kembali ke sumber untuk pergi ke muat turun COS.
* Pendekatan yang betul: hidupkan "Penapis Parameter Cache". Tidak kira apa parameter yang disertakan, CDN akan selalu dianggap sebagai a.jpg, dan akan langsung memukul cache nod, dan kadar pengembalian akan merosot seketika.
3. Hidupkan "Konfigurasi Kembali Lanjutan" (Lanjutan Lanjutan)
Sekiranya anda mempunyai banyak gambar, dan kadang-kadang gambar yang tidak popular dikunjungi, anda boleh membuka "Range Back Source".
* Apabila pengguna meminta gambar besar 10MB, tetapi hanya melihat 2MB pertama, ia ditutup.
* Sekiranya anda tidak membuka Range, simpul CDN akan memuat turun semua 10MB dari COS sekaligus, menyebabkan lalu lintas terbuang.
* Setelah membuka Range kembali ke sumber, CDN akan kembali ke sumber untuk menarik sebanyak yang dilihat oleh pengguna, menjimatkan wang dengan tepat.
Tahap kelima dan keempat: pengoptimuman pengalaman utama-gambar pelangsingan maju
Sekiranya anda merasakan bahawa gambar dimuat tidak cukup pantas, ini bermakna "kelantangan" gambar terlalu besar. Tencent Cloud menyediakan alat yang hampir menipu: Data Vientiane (CI). Ia disatukan secara langsung dalam COS dan CDN, tanpa mengubah kod front-end anda, ia dapat mengurangkan jumlah gambar lebih dari 60%.
1. Hidupkan penyesuaian webp Vientiane
* Titik sakit: Format PNG/JPG terlalu lama dan besar. Format WebP adalah 30%-50% lebih kecil, tetapi beberapa penyemak imbas lama (seperti IE lebih dari satu dekad yang lalu) tidak menyokongnya.
* Konfigurasi peri: Hidupkan "sebaran adaptif WebP" pada konsol Vientiane data CDN atau COS.
* Kesan: Apabila penyemak imbas pengguna menyokong WebP, CDN secara automatik menukar a.jpg ke format WebP di latar belakang dan mengirimkannya kepada pengguna; jika ia adalah penyemak imbas lama, ia masih akan menghantar a.jpg. Sepenuhnya automatik, tidak ada persepsi di bahagian depan, dan kelajuan pemuatan lepas landas.
2. Pemotongan dan pemampatan masa nyata (dengan akses parameter)
Jangan biarkan bahagian depan memuatkan gambar asal secara langsung! Sekiranya halaman senarai anda hanya memerlukan gambar kecil 200x200, dan anda memuat naik gambar asal 4K, pengguna pasti tersekat.
* Tencent Cloud menyokong penambahan parameter secara langsung selepas pautan gambar untuk membolehkan pemprosesan awan dalam masa nyata:
* Gambar asal: img.yourdomain.com/photo.jpg
* Imej kecil lebar 200: img.yourdomain.com/photo.j
Pg? ImageMogr2/thumbnail/200x/
* Biarkan awan membantu anda memotong, telefon bimbit pengguna hanya perlu memuat turun beberapa gambar KB, bagaimana mungkin tidak menyenangkan?
6. Senarai ringkasan dan pemeriksaan diri
Melalui konfigurasi "gabungan peri" di atas, kami akhirnya melengkapkan satu set struktur pengedaran gambar yang cekap, menjimatkan dan benar-benar selamat.
[Penyemak Imbas Pengguna]
│
├───> 1. Akses ke nod CDN (img.yourdomain.com) ───> [Hit cache: 0 milisaat berkelip dan memuatkan]
│
└ ───> 2. Cache gagal (kadar pulangan <5%)
│
└ ───> [Saluran Selamat yang Disulitkan] ────> Tencent Cloud COS (baldi simpanan peribadi) ──> [Data Vientiane secara automatik ke WebP/pemotongan]
Apabila penyemak imbas pengguna memulakan permintaan, akses pertama ke nod CDN. Sekiranya cache memukul, gambar akan berkelip dan dimuat dalam masa 0 milisaat. Sekiranya cache gagal (dalam kes ini, biasanya kurang dari 5%),CDN akan kembali ke baldi peribadi Tencent Cloud COS melalui saluran selamat yang disulitkan, dan secara automatik beralih ke WebP atau memotong melalui Vientiane Data, dan akhirnya kembali dengan selamat kepada pengguna.
Akhirnya, kami akan menyusun senarai pemeriksaan diri anti-rollover untuk anda sebelum masuk ke dalam talian:
Kaedah pemeriksaan
Keadaan yang betul
Mengapa ia penting
Kebenaran tong COS
Mesti membaca dan menulis peribadi
Mencegah pencurian berbahaya dan melindungi keselamatan aset
Pengesahan sumber kembali CDN
Mesti dihidupkan dan diberi kuasa
Jika tidak, CDN tidak dapat mendapatkan gambar dari baldi COS peribadi
Gambar masa cache
Cadangkan lebih daripada 30 hari
Sangat mengurangkan kadar pulangan dan mengurangkan caj aliran COS
Parameter penapis cache
Mesti dihidupkan
Cegah URL rawak dengan parameter daripada membuang cache CDN anda
Sijil HTTPS
Dianjurkan untuk mengkonfigurasi dan memaksa lompatan
Elakkan penyemak imbas moden atau program kecil menyekat gambar kerana kandungan campuran
Ikuti set tutorial ini dengan tegas, dan kelajuan pemuatan gambar anda secara rasmi akan mengucapkan selamat tinggal kepada era "memerah ubat gigi". Walaupun dalam menghadapi berjuta-juta lalu lintas secara tiba-tiba, pelayan anda dapat bertindak balas dengan elegan.
