どのように腾讯雲CDNと対象ストレージ (COS) を利用して、画像のロードが遅く、ソース率が高い問題を解決するか
画像のロードが遅く、サーバーの帯域幅が爆発し、毎月の流量料金が高くて怖い…… あなたのサイト、App、アプレットに大量の画像がある限りこの3つの問題は遅かれ早かれあなたの「悪夢」になる。
多くの開発者の第一反応は「サーバーの帯域幅を追加する」というものですが、何千ヶ月もの帯域幅の費用がかかり、価格性能比が非常に低いということです。クラウドコンピューティング時代には、この問題を解決するための標準的な答えは、拳だけである
テンセントクラウド対象ストレージ (COS) + コンテンツ配信ネットワーク (CDN)
。
本文は大白話と純粋な実戦論理を使って、この枠組みをゼロから配置して、写真のロードと高回源率の問題を徹底的に解決して、ついでにサーバーの費用を80% 下げます。
一、なぜあなたの写真のロードがこんなに遅いのですか (痛点分解)
最適化する前に、従来の「サーバーのハード担ぎ」モデルがなぜ崩壊したのかを見てみましょう。
地理的距離制限 (伝送硬傷): あなたのサーバーは北京に置いて、深センのユーザーが訪問して、データは数千キロを越えなければならない。ネットが少し揺れていると、写真は「ロード中」の砂時計になる。
回源率が高い (マスタが窒息している): 「回源」とはCDNノードがキャッシュされておらず、ソースサーバに行ってデータを取ることです。回源率が70 ~ 80% に達するとCDNは意味を失い、あなたのサーバは瞬時に高合併して崩壊する。
単体帯域幅ボトルネック: 2mbのhd図で、100人が同時にwebページをダウンロードすると、瞬時に200mbの帯域幅が必要になる。普通のサーバの5Mbps、10Mbpsの帯域幅は、ほぼ1秒で麻痺する。
破局案:COS + CDN連動アーキテクチャ
COS (オブジェクトストレージ): ローカルサーバの代わりに、大量の画像を保存するために使用されます。同時読み書き能力が高く、ストレージコストが極めて低い。
CDN (配信ネットワーク): COSの写真を、全国または世界の数千のエッジノードに事前に同期する。広州のユーザーは広州ノードから直接図を取り、北京のユーザーは北京ノードから図を取り、回源率は5% 以下に下がった。
二、第一段階: COS基礎構築と権限安全
まず、脆弱なサーバーから安定したCOSに写真を移します。
1.バケットの作成
腾讯クラウドコンソールにログインし、「オブジェクトストレージCOS」を検索し、「バケットの作成」をクリックします
名前: 覚えやすい名前 (my-image-bucketなど) をつけてください。
地域: あなたのクラウドサーバ (CVM) と同じ地域を選択することをお勧めします。純粋な静的配布であれば、あなたのコアユーザーグループに最も近い地域を選びます。
アクセス権: ここに大きな穴があります! 「プライベート読み書き」を必ず選択してください。避難所のヒント: 多くの初心者は図の便利さのために、直接「パブリック読み取りプライベート書き込み」を選んでいる。これはあなたのCOSの本当のダウンロード先を公開することに等しい。もし誰かがあなたのCOSリンクを悪意で磨くと、COSの下り流量費はあなたを一夜にして破産させます。私たちは
次のCDNを通じて、パブリックネットワークのブラシ防止を実現します。
2.テスト画像をアップロードする
作成が完了したら、バケットに入って、何枚かのテスト画像を自由にアップロードします (例:
Test jpg
) 、そのパスを記録します。この時点では「プライベート読み書き」なので、オブジェクトURLに直接アクセスするとヒントが表示されます
AccessDenied
(アクセス拒否) は、セキュリティポリシーが有効になったことを示しています。
三、第二段階: CDN配置とシームレスなソースバック (コアステップ)
次に、COSにCDNの「加速鎧」を羽織る。
1.ドメイン名アクセスとCDN関連
腾讯クラウドCDNコンソールにアクセスし、「ドメイン名管理」-> 「ドメイン名を追加」をクリックします
* 加速ドメイン名: 自分で用意した二次ドメイン名、例えばimg.yourdomain.comを入力します。
* ソースステーションタイプ: 「腾讯雲COS」を選択します。
* ソースサイトの住所: ドロップダウンメニューで、作成したばかりのバケットを直接チェックします。
2.「COSプライベートバレル認証」を有効にする (重要なブラシ防止手順)
COSソースステーションを選択すると、ゴールドオプション「ソース認証に戻る」または「権限/プライベートバレル認証をバインドする」が表示されます。
* オンにする必要があります!
* 原理: オンにすると、腾讯雲はCDNだけが知っている暗号化チャネルを自動的に生成してCOSに図を取る。通常のユーザーでは、ユーザーはワークステーションにしかアクセスできません
3.CNAMEの設定 (ドメイン名を有効にする)
ドメイン名を追加した後、腾讯雲はあなたに .cdn.Dnsv1.comで終わるCNAMEアドレスを与えます。
* あなたのドメイン名解析サービス業者 (例えば、腾讯雲DNSPod、阿里雲解析など) に行って、CNAMEレコードを追加します。
* ホストレコードはimgを入力し、レコード値は先ほどコピーしたCNAMEアドレスを入力します。
* 2 ~ 5分待って、グローバル解析が有効になります。
四、第三段階: どのように回源率を限界まで圧搾しますか?
多くの人のCDNが到着した後、サーバのストレスが大きいことを発見したのは、キャッシュヒット率が低すぎて、毎日発信しているからだ。この問題を解決するには、CDNコンソールで次の3つの高度なパラメータを調整する必要があります:
1.ノードキャッシュ期限切れルール (長いほど良い)
画像は「静的リソース」で、公開されると、ほとんど修正されない。
CDNの「キャッシュ構成」にルールを追加します。
* コンテンツタイプ: ファイルサフィックス。
* 具体的なサフィックス:;;.Jくわ;.Png;.webp;.svg
* 更新時間: 30日から365日に設定することをお勧めします。
* 論理: CDNノードに、写真が入ってきたら、私がいない限り
手動で更新すると、1年以内にCOSに行くことは許されず、画像を直接エッジノードに固定する。
2.「フィルタパラメータキャッシュ」をオンにする (無視パラメータとも呼ばれる)
ユーザーが画像にアクセスすると、URLの後ろに尻尾がついてしまうことがあります。例えば、img.Yourdomain _ a.jpg?V = 123または?from = weixin。
* フィルタリングをオンにしなければCDNはa.jpgと考えますか?v = 123とa.jpg?v = 456は全く異なるファイルで、2回のソースからCOSダウンロードをトリガーします。
* 正しい方法: 「フィルタリングパラメータキャッシュ」をオンにします。後にどんなパラメータがついていても、CDNはすべてa.jpgと見なされ、ノードキャッシュに直接ヒットし、ソース率が瞬時に急落した。
3.「高度なソースバック構成」 (高度な高度) をオンにします
あなたの写真が非常に多く、たまに冷え込んだ写真がアクセスされる場合は、「レンジバックソース」をオンにすることができます。
* ユーザーが10MBの大きな図を要求したが、最初の2MBだけを見ると閉じた。
* Rangeが開かなければCDNノードは一気に10mbをCOSからダウンロードし、トラフィックが無駄になる。
* レンジバックソースをオンにすると、ユーザーはどれだけを見て、CDNはソースに戻ってどれだけを取って、正確にお金を節約します。
五、第四段階: 究極の体験最適化 -- 写真高級ダイエット
画像のロードがまだ十分ではないと思うなら、画像の「体積」が大きすぎることを示しています。腾讯雲はカンニングに近いツールを提供した: データ万象(CI)。COSとCDNに直接統合され、フロントエンドのコードを修正することなく、画像の体積を60% 以上削減できます。
1.万象webp適応をオンにする
* 痛点: PNG/JPG形式が古く、体積が大きい。WebP形式の体積は30 ~ 50% 小さいが、一部の古いブラウザ (例えば十数年前のIE) はサポートしていない。
* 神々の配置: CDNやCOSのデータ万象コンソールで「WebP適応配布」をオンにする。
* 効果: ユーザーのブラウザがWebPをサポートしている場合、CDNは自動的にバックグラウンドでa.jpgをWebP形式に変換してユーザーに配布する古いブラウザであれば、依然としてa.jpgを発行する。完全に自動化され、フロントエンドは感知されず、ロード速度はその場で離陸する。
2.リアルタイムトリミングと圧縮 (パラメータ付きアクセス)
フロントエンドに直接元の図をロードさせないでください! もしあなたのリストページが200x200のサムネイルだけで、あなたが4kの原図を渡したとしたら、ユーザーは絶対に詰まってしまう。
* 腾讯雲は画像リンクの後ろに直接パラメータを追加して、リアルタイムでクラウドに処理させることをサポートしています
* 原図: img.Yourdomain _ photojpg
* 200幅のサムネイル
Pg?imageMogr2/サムネイル/200x/
* クラウドにトリミングを手伝ってもらって、ユーザーの携帯電話は数KBの写真をダウンロードするだけで、どうして不快なのか?
六、まとめと自己検査リスト
以上の「神々の組み合わせ」の配置を通じて、我々は最終的にこのような効率的で、コストを節約し、絶対的に安全な画像配信の枠組みを完成した。
[ユーザーブラウザ]
│
_ --> 1.CDNノード (img.yourdomain.com) にアクセスします。
│
└ ─ ─ ─ 2.キャッシュがヒットしない (ソースバック率 <5%)
│
└ -- --> [暗号化セキュリティチャネル] -- --> テンセント雲COS (プライベートストレージバレル) --> [データ万象自動変換WebP/トリミング]
ユーザーブラウザが要求を開始すると、まずCDNノードにアクセスする。キャッシュがヒットすると、画像は0ミリ秒以内に点滅してロードされます。キャッシュがヒットしていない場合 (この場合、通常は5% 未満) 、CDNは暗号化されたセキュリティチャネルを介して腾讯クラウドCOSプライベートストレージバレルに戻り、データ万象を介して自動的にWebPに転送したり、トリミングしたりします最後にユーザーに安全に戻ります。
最後に、オンラインになる前のロールオーバー防止のチェックリストを整理します
検査項目
正しいステータス
なぜ重要なのか
COSバケット権限
プライベート読み書きでなければなりません
悪意のある盗難を厳重に防ぎ、資産の安全を守る
CDN回源認証
有効にして許可する必要があります
そうでなければCDNはプライベートCOSバレルから画像を入手できない
画像キャッシュ時間
30日以上推奨
回源率を大幅に下げ、COS流量計の費用を減らす
パラメータキャッシュのフィルタリング
オンにする必要があります
パラメータ付きランダムURLがCDNキャッシュを破棄しないようにします
HTTPS証明書
推奨設定と強制ジャンプ
現代のブラウザやアプレットが混合コンテンツで画像を傍受しないようにする
このチュートリアルに厳格に従うと、あなたの写真のロード速度は正式に「歯磨き粉」時代に別れを告げ、突発的な百万級の流量に直面しても、あなたのサーバーは優雅に対応できる。
