doudonn WEB制作やサーバーの話とかいろいろ

さくらVPS&Nginxで画像だけをCDNから配信する方法を解説!#さくらのウェブアクセラレータ

doudonn 更新日:
さくらVPS&Nginxで画像だけをCDNから配信する方法を解説!#さくらのウェブアクセラレータ

画像だけをCDNから配信する!

回線の負荷軽減や同時アクセス対策はCDNが一番。
さくらのウェブアクセラレータなら安くて設定も簡単。
これは使えるようにしておこう。

さくらVPS&Nginx&バリュードメインでの使用方法を解説します。

1、実現したいこと

さくらのウェブアクセラレータを使った負荷軽減図(サブドメインを使用)

画像はサブドメインで配信します。

これが一番簡単で管理も楽。
なんでも良いのでCDN用のサブドメインを作成しよう。
今回はVPSでの解説なので、サブドメイン作成=CNAME設定となります。

CNAME設定は一番最後なので、まずは準備を。

2、さくらのウェブアクセラレータの利用登録をする

さくらのウェブアクセラレータの設定画面

オリジン接続設定はこんな感じです。

その他の項目は特に迷うことはないので省略。
自分はGSLBを使っているのでオリジンサーバにドメイン(doudonn.com)を指定していますが、
普通はIPアドレスが良いです。

「ホストヘッダ」はNginxでの振り分け処理に使うホスト名となる。
ここは素直にサブドメインにした方が良い。
(空白でも良いと思うのですが、心配なので記載)

3、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日間)」が最高なので注意

※サブドメインにアクセスして表示されるかは必ず確認を

4、CNAME設定

さくらのウェブアクセラレータ バリュードメインでのCNAME設定

この1文を追加するだけです。

cname img xxxxxxxx.user.webaccel.jp.

xxxからの部分は自分のさくらのウェブアクセラレータのドメインを指定してください。
「CNAME先」という項目で書かれています。

CNAMEはわりとすぐに反映するので、すぐアクセスして確かめてみよう。

バリュードメインでのCNAME設定方法の詳細はこちら

バリュードメインでのCNAME設定方法を解説(CDN、ロードバランサを使う時などのDNS)

5、完了!

これで画像のCDN配信が完了しました。

本当にキャッシュして配信されているかどうか?は、
デベロッパーツールで見たらわかります。
詳しくはこちらの公式マニュアルを見てください。

自分は使いたい時だけサブドメインに指定しています。
いつでも使えるようにする準備は大事。
CDNは設定だけでもしておこう。

--

Nginx,さくらVPSの関連記事
サーバーの関連記事

記事一覧はこちら:サーバー

管理人について
doudonn
名前:doudonn(どうどん)
ひたすらWEB制作な人。
一応社長です。音ゲー好き

<Twitterはこちら>
ゲーム垢
WEB制作垢
お知らせ

2022年11月30日に全記事削除しました。
まだ再開に向け作りかけ。


無駄にページ表示速度にこだわってます。

役立ちサイト
wiki
© 2022-2023 doudonn All Rights Reserved.