さくらのクラウドのウェブアクセラレータは、画像ファイルや動画などのコンテンツをキャッシュして、高速配信することができる国内向けの CDN サービスです。一般的な CDN ではキャッシュの削除に時間がかかることが多いのですが、さくらのウェブアクセラレータではほぼリアルタイムで削除することが可能なのが魅力です。そこで今回は、さくらのクラウドのウェブアクセラレータの特徴と使い方をまとめてみました。
ウェブアクセラレータの特徴
以下は 2018年3月21日時点の情報です。
低価格
配信サーバーを国内（東京・大阪の2拠点）に限定して設置してるため、転送料金が1GBあたり5円とリーズナブルで 500GB分の無償利用枠も用意されています。AWS の CDNサービス CloudFront（転送料金：1GB あたり 0.140ドル = 約15円）と比べると 1/3のコストで運用できます。
ほぼリアルタイムでキャッシュを削除できる
冒頭にも書きましたが、2017年12月1日に追加された「キャッシュ全削除機能」により、ほぼリアルタイムでキャッシュを削除することが可能になっています。
HTTP/2 に対応
HTTPS はもちろん HTTP/2 にも対応しています。
SSL証明書のAPIによる更新機能
独自ドメインでウェブアクセラレータを運用する場合、定期的にSSL証明書の更新が必要ですが APIによる更新も可能です。
参考資料：
ウェブアクセラレータの仕様・料金 | さくらのクラウド
ウェブアクセラレータ機能追加のお知らせ（2017.12.01）
オリジンサーバー側の準備
オリジンサーバー側では Cache-Control ヘッダを使って、ウェブアクセラレータにコンテンツをキャッシュさせる時間を指定しておきます。
Apache httpd の場合は、以下のような設定を httpd.conf もしくは .htaccess に追加します。
例）画像ファイル（拡張子 .gif .jpg .jpeg .png .ico）を86400秒（1日）キャッシュする場合の設定
<Files ~ "\.(gif|jpe?g|png|ico)$"> Header set Cache-Control "s-maxage=86400, public" </Files>
ウェブアクセラレータの設定
本題のウェブアクセラレータを設定です。
さくらのクラウドのコントロールパネルにログインして「ウェブアクセラレータ」をクリックします。
今回は独自ドメインでは設定しないので、ウェブアクセラレータ専用のドメインを発行する「サブドメイン」を選択します。
適当なサイト名を入力し、ウェブアクセラレータからオリジンサーバーへ接続するプロトコルと、オリジンサーバーのアドレスを入力して「保存」をクリックします。例えばオリジンサーバーのアドレスが「https://blog.apar.jp/」の場合は、下のような設定になります。
サイトの追加が完了したら「追加サイトの詳細」をクリックします。
初期状態ではウェブアクセラレータは無効になっていますので、これを有効にします。
「設定」をクリックします。
サイトのステータス「有効にする」をクリックして、ウェブアクセラレータを有効にすれば設定完了です。
コンテンツのURLの変更
公開ドメイン名に表示されているアドレスがウェブアクセラレータのアドレスです。
下のように画像ファイルなどコンテンツのリンク先をウェブアクセラレータのURLに変更すれば、ウェブアクセラレータからコンテンツが配信されます。
<img src='https://blog.apar.jp/sample.png'>
↓
<img src='https://o3vdxh6s.user.webaccel.jp/sample.png'>
キャッシュのリアルタイム削除
せっかくなので、キャッシュのリアルタイム削除を試してみました。
ウェブアクセラレータにキャッシュされた画像ファイルを取得します。「x-cache: HIT」よりキャッシュされていることが分かります。
HTTP/2 200
server: nginx
date: Tue, 20 Mar 2018 21:04:00 GMT
content-type: image/png
content-length: 5109
strict-transport-security: max-age=31536000
last-modified: Tue, 20 Mar 2018 20:34:59 GMT
etag: "13f5-567de021a55c5"
accept-ranges: bytes
cache-control: s-maxage=86400, public
expires: Thu, 19 Apr 2018 20:36:54 GMT
age: 1626
via: https/1.1 sv10-osk01-jp (ApacheTrafficServer-second [uScHs f p eN:t cCHi p s ]), http/1.1 sv09-osk01-jp (ApacheTrafficServer-first [uScMsSf pSeN:t cCMi pSs ])
x-cache: HIT
ウェブアクセラレータの設定画面でキャッシュの「全件削除」をクリックします。
再度同じ画像ファイルを取得してみると「x-cache: MISS」になり、ウェブアクセラレータのキャッシュが削除されたことが確認できました。（実際には物理的な削除ではなくキャッシュを配信しないように処理をしているそうです）
HTTP/2 200
server: nginx
date: Tue, 20 Mar 2018 21:17:55 GMT
content-type: image/png
content-length: 5109
strict-transport-security: max-age=31536000
last-modified: Tue, 20 Mar 2018 20:34:59 GMT
etag: "13f5-567de021a55c5"
accept-ranges: bytes
cache-control: s-maxage=86400, public
expires: Thu, 19 Apr 2018 21:17:55 GMT
age: 0
via: https/1.1 sv13-tky01-jp (ApacheTrafficServer-second [uScMsSf pSeN:t cCMi p sS]), http/1.1 sv23-tky01-jp (ApacheTrafficServer-first [uScMsSf pSeN:t cCMi pSs ])
x-webaccel-origin-status: 200
x-cache: MISS
おわりに
「今回は CDN を使ってください！」と言うと、WEBディレクターの方や、フロントエンドエンジニア方にはあまりいい顔はされません(^^;) おそらく CDN のキャッシュが原因で痛い目にあわれているのが原因だと思います。ウェブアクセラレータのリアルタイム削除機能をうまく使えば、CDN キャッシュ関連のトラブルを回避できそうですね。
コメント