S3
cdn
さくらのクラウド
オブジェクトストレージ
ウェブアクセラレータ

さくらのクラウド ウェブアクセラレータ(CDN)とAWS S3を組み合わせて使う

More than 1 year has passed since last update.

S3 + CloudFront で画像などを配信することが多いと思いますが、配信先が国内限定であれば

S3 + ウェブアクセラレータのほうが安いんじゃないかと思ったため設定してみます。

実際に課金額が安くなるかは検証していません。

CloudFrontの配信料金が1GiBあたり、日本で0.140 USD(15.8円 2017年12月28日時点)のようですので、1GiBあたり

5円(税込み)のウェブアクセラレータのほうが安いように思えます。

また、ウェブアクセラレータはリクエスト数に応じた課金もないので、CloudFrontよりわかりやすいかも?

ただし、S3->ウェブアクセラレータでS3へのリクエストと転送量の課金が発生するため、

ミスキャッシュの場合はS3側で料金が発生するので注意が必要だと思います。

実際に使ってみたわけではないので比較はないですが、詳しい人ぜひ教えて下さい。


S3の設定


AWS S3でバケットを作ろう


バケットの作成

AWSコンソールのS3設定画面でバケットの作成を押します。

image.png


バケット名

バケット名を適当に設定します。(リージョンはとりあえず東京)

image.png

この辺は特に設定は不要と思いますので、スルーします。

image.png

とりあえずここもそのままで。

image.png

ここも確認してバケットを作成

image.png


S3でStaticサイト公開の設定をしよう

さきほど設定したバケット名を選択して設定に移ります

image.png

プロパティからStatic website hostingを有効にします

この際に表示されているエンドポイントは後程ウェブアクセラレータの設定で使用するためメモしておいてください。

image.png


ファイルをアップロードしよう

今回はテストなのでs3cmdなどは使わずにウェブ画面上からファイルをアップロードします。

概要のタブにあるアップロードからアップロードします。

image.png

適当なindex.htmlを作成してアップロードします。

image.png

確認して次へ

image.png

次へ

image.png

ウェブアクセラレータでキャッシュされるようにCache-Control: s-maxage=3600(1時間)を設定

image.png

確認してアップロード

image.png

アップロードされたのでファイルを公開します。

image.png

公開を押してアップロードしたファイルを公開します。

image.png

先ほど設定した Static website hosting のエンドポイントにアクセスすると無事にアップロードしたファイルが表示されるはずです。

image.png

無事、アップロードしたファイルが表示され、Cache-Contorl: s-maxageのヘッダも付いていることが確認できます。


ウェブアクセラレータの設定


配信用サイトの作成

ウェブアクセラレータの新規サイト作成画面からS3配信用のサイトを作成します。

image.png

今回はサブドメインで設定してみます。

サイト名:適当につけてください

オリジンサーバ:さきほどStatic website hostingで表示されていたエンドポイントを設定します。

保存を押しサイトを保存します。無事完了画面が出るはずです。

image.png

設定からサイトを有効化します。

image.png

image.png

有効化されたら発行されたサブドメインでアクセスしてみます。

image.png

無事、アクセスできるようになっており、何度かリロードするとX-Cache: HITとなっておりウェブアクセラレータでキャッシュして配信出来ていることが確認できました。


最後に

さすがにアップロードをウェブからやるのはつらいので、APIキーとs3cmdなどを使えばファイルをどんどん

アップロードしてウェブアクセラレータ経由で配信できそうです。

s3cmd put --add-header "Cache-Control: s-maxage=3600" --acl-public (省略)

などを付ければウェブでやったアップロードと同じことができそうです。