さくらのウェブアクセラレータをオブジェクトストレージで利用する際の注意点

こんにちは、UOZUです！

今日はさくらのウェブアクセラレータとオブジェクトストレージを連携して利用する際の注意点を記事にしてみます。

https://cdn.sakura.ad.jp

https://cloud.sakura.ad.jp/products/object-storage

ウェブアクセラレータの利用イメージ

さくらのウェブアクセラレータ、先にSSL証明書の自動更新の記事でも触れられていますが、コンテンツ配信元サーバに代わり、コンテンツキャッシュを配信してくれるマネージドサービスです。

通常はさくらのクラウドの仮想サーバなどをコンテンツ配信元サーバ＝「オリジン」として設定しますが、ウェブサーバー以外でも、さくらのオブジェクトストレージのバケット名、S3エンドポイント、S3リージョンを指定することで、ウェブサーバーを構築しなくても、ウェブサイトを公開できるようになります。

ブラウザからアップロードした際の注意点

オブジェクトストレージへのアップロードはブラウザからも可能です。試しに中身に「uozu」と書かれたindex.htmlファイルを作成し、アップロードしてみます。

ウェブアクセラレータのドメイン名にアクセスしてみますが・・・なぜかページは表示されず、何かがダウンロードされました。

ちょっと予想と違いますね・・・なぜでしょうか。UOZUの大好きなcURLで確認してみます。

$ curl http://4e6k84cb.user.webaccel.jp/
uozu

cURLからはしっかりと「uozu」の表示が確認できています。では、なぜダウンロードされたのでしょうか。

Content-Typeヘッダの仕組みと挙動

もう少し詳しく挙動を見るため、cURLに-vオプションをつけ、詳細出力させて再確認してみます。

$ curl -v http://xxxxxx.user.webaccel.jp/
*   Trying 203.0.113.20...
* TCP_NODELAY set
* Connected to 4e6k84cb.user.webaccel.jp (203.0.113.20) port 80 (#0)
> GET / HTTP/1.1
> Host: xxxxxx.user.webaccel.jp
> User-Agent: curl/7.61.1
> Accept: */*
>
< HTTP/1.1 200 OK
< Server: nginx
< Date: Sun, 21 Jun 2026 07:33:02 GMT
< Content-Type: application/octet-stream
< Content-Length: 4
< Connection: keep-alive
< Accept-Ranges: bytes
< ETag: "e4a5d92f5bc2eda9b5b7a05ce1d3d065"
< Last-Modified: Sun, 21 Jun 2026 07:20:07 GMT
< x-amz-id-2: 3fc20d6d1a41b4fa6e12
< x-amz-request-id: 3fc20d6d1a41b4fa6e12
< Cache-Control: s-maxage=3600
< Age: 100
< Via: http/1.1 sv06-osk03-jp (ApacheTrafficServer-second [uScHs f p eN:t cCHp s ]), http/1.1 sv19-osk03-jp (ApacheTrafficServer-first [uScMsSfWpSeN:t cCMpSs ])
< X-Cache: HIT
<
* Connection #0 to host 4e6k84cb.user.webaccel.jp left intact
uozu

詳細出力のうち、 > はcURLから送られたヘッダ（リクエストヘッダ）、 < はサーバ（ウェブアクセラレータ）から送られたヘッダ（レスポンスヘッダ）を出力しています。

ここで注目してしいのは、レスポンスヘッダ < に含まれているContent-Type: application/octet-streamの部分です。ブラウザ（クライアント）では通常、URLのパスやドメインに関係なく、このContent-Typeで指定された内容で、「ブラウザで表示させる」「表示させずダウンロードする」といった判定を行っています。

つまり今回、Content-Type: text/htmlで出力されるべきContent-Typeが、なぜかapplication/octet-streamで出力された、ブラウザで表示されず、ダウンロードされたということになります。

また、ウェブアクセラレータはあくまでも「コンテンツ配信元サーバ」のキャッシュになるので、オブジェクトストレージ側のContent-Typeに何らかの設定が不足していたと思われます。

https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Headers/Content-Type

オブジェクトストレージ上ファイルのContent-Typeの変更方法

ブラウザ上でオブジェクトストレージのMIMEタイプは2026年6月時点では確認や変更が出来ないようなので、先の記事を参考に、aws s3コマンドで確認と変更をしていきましょう。

https://www.netassist.ne.jp/sakuracloud-labo/archives/2497

aws s3 コマンドでContentTypeの確認と変更

aws s3 コマンドでindex.htmlのContentTypeを確認します。やはりapplication/octet-streamが指定されていました。

$ aws s3api head-object \
 --endpoint-url https://s3.tky01.sakurastorage.jp \
 --region jp-east-1 \
 --bucket xxxxxx \
 --key index.html \
 --query '{ContentType:ContentType}' \
 --output json

{
"ContentType": "application/octet-stream"
}

というわけで、text/htmlに修正を行います。文字コードはUTF-8を指定しておきます。

$ aws s3api copy-object \
 --endpoint-url https://s3.tky01.sakurastorage.jp \
 --region jp-east-1 \
 --bucket xxxxxx \
 --key index.html \
 --copy-source xxxxxx/index.html \
 --content-type 'text/html; charset=utf-8' \
 --metadata-directive REPLACE

COPYOBJECTRESULT "e4a5d92f5bc2eda9b5b7a05ce1d3d065" 2026-06-21T08:20:04.610000+00:00

 aws s3api head-object \
 --endpoint-url https://s3.tky01.sakurastorage.jp \
 --region jp-east-1 \
 --bucket xxxxxx \
 --key index.html \
 --query '{ContentType:ContentType}' \
 --output json

{
"ContentType": "text/html; charset=utf-8"
}

ブラウザ上での挙動確認

では早速ブラウザ上で確認してみましょう！・・・またダウンロードされましたね。

当然ですが、これはウェブアクセラレータが前回のコンテンツ情報をキャッシュしてしまい、ブラウザ上での挙動が変わっていないためです。ウェブアクセラレータの設定画面から、全件またはURLを指定してキャッシュを削除します。

無事、ブラウザ上からも正常な表示が確認できました！

また、もしキャッシュ削除後も挙動が変わらない際は、ブラウザ上でキャッシュが残っている可能性もあります。プライベートウィンドウやシークレットウィンドウで表示を確認してみましょう。

さいごに

今回、ウェブアクセラレータをオブジェクトストレージで利用する際の注意点を書いてみました！

もしキャンペーンサイトや画像配信で利用する際に、記事がお役に立てれば幸いです。

さいごまでお読みいただき、ありがとうございました。