さくらVPS＆Nginxで画像だけをCDNから配信する方法を解説！#さくらのウェブアクセラレータ
doudonn 更新日：
画像だけをCDNから配信する！
回線の負荷軽減や同時アクセス対策はCDNが一番。
さくらのウェブアクセラレータなら安くて設定も簡単。
これは使えるようにしておこう。
さくらVPS＆Nginx＆バリュードメインでの使用方法を解説します。
１、実現したいこと
画像はサブドメインで配信します。
これが一番簡単で管理も楽。
なんでも良いのでCDN用のサブドメインを作成しよう。
今回はVPSでの解説なので、サブドメイン作成＝CNAME設定となります。
CNAME設定は一番最後なので、まずは準備を。
２、さくらのウェブアクセラレータの利用登録をする
オリジン接続設定はこんな感じです。
その他の項目は特に迷うことはないので省略。
自分はGSLBを使っているのでオリジンサーバにドメイン（doudonn.com）を指定していますが、
普通はIPアドレスが良いです。
「ホストヘッダ」はNginxでの振り分け処理に使うホスト名となる。
ここは素直にサブドメインにした方が良い。
（空白でも良いと思うのですが、心配なので記載）
３、Nginxの設定
フロント→バックエンドの構成の場合です。
フロントのみ1台であればバックエンド側の設定のみでOKです。
フロントサーバー
server {
listen 80;
server_name img.doudonn.com;
location / {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass http://backend;
}
}
80番ポートで入ってくるので、443にリダイレクトせずバックエンドに流す。
バックエンドサーバー
server {
listen 80;
server_name img.doudonn.com;
root /var/www/html/doudonn.com;
location ~ .*\.(jpg|jpeg|gif|png|ico|svg|webp) {
add_header Cache-Control "s-maxage=604800";
try_files $uri $uri/ =404;
}
location / {
return 404;
}
}
「root」にメインドメインと同じものを記載します。
こうすることでURLをサブドメインにするだけで使えて楽。
もちろん、ここは自由に設定ください。
この設定のダメなところは、どの画像でもCDN経由にできること。
悪意をもったユーザーが重たい画像に向けてDDoS攻撃することができてしまう。
心配な場合はCDN経由画像を限定する専用のルート（ディレクトリ）を作った方が良い。
「add_header Cache-Control "s-maxage=604800";」がキャッシュ時間の指定。
このヘッダが存在するもののみキャッシュして配信してくれます。
「604800（7日間）」が最高なので注意
※サブドメインにアクセスして表示されるかは必ず確認を
４、CNAME設定
この1文を追加するだけです。
cname img xxxxxxxx.user.webaccel.jp.
xxxからの部分は自分のさくらのウェブアクセラレータのドメインを指定してください。
「CNAME先」という項目で書かれています。
CNAMEはわりとすぐに反映するので、すぐアクセスして確かめてみよう。
バリュードメインでのCNAME設定方法の詳細はこちら
・バリュードメインでのCNAME設定方法を解説（CDN、ロードバランサを使う時などのDNS）
５、完了！
これで画像のCDN配信が完了しました。
本当にキャッシュして配信されているかどうか？は、
デベロッパーツールで見たらわかります。
詳しくはこちらの公式マニュアルを見てください。
自分は使いたい時だけサブドメインに指定しています。
いつでも使えるようにする準備は大事。
CDNは設定だけでもしておこう。
