LoginSignup
4
1

More than 3 years have passed since last update.

高速CDN の Fastly と OCI Object Storage を連携してみた

Posted at

はじめに

Fastlyとは、Fastly社が提供しているCDN(Contents Delivery Network) サービスです。
以前の記事で Fastly と OCI (Oracle Cloud Infrastructure) 上で稼働するWebサーバとの連携方法をご紹介しました。
今回の記事では、Fastlyと、OCIのObject Storage間との連携方法をご紹介します。

所属している会社・組織とは何の関係もない、一個人の技術記事です。Oracleが提供するサービスや、今後のロードマップなどと何も関係がありません、ご留意ください。

構成

  • DNS に 独自のドメインを使用して、Fastly にアクセスするための CNAME レコードを作成して名前解決
  • Fastlyで Object Storage をキャッシュするように構成
  • Object Storage の Bucket を Public に構成。Public にすることで、バケットのオブジェクトを認証せずにダウンロードを出来るようになる

001.png

OCI Object Storage

OCI のコンソール上で、Fastly 連携用のバケットを作成します。
OCIコンソールを開き、左側のメニューから、 Object Storage へ移動し、[Create Bucket] を選びます。

名前を適当に入力し、Bucket を作成します。

002.png

Bucket のアクセス公開先を Public に変更します。Publicにすると、URLを知っている全世界のユーザが、Bucket上のデータを取得可能になります。
FastlyからObject Storage へアクセスするためにPublicへ変更します。

003.png

CDNの効果を確認したいために、比較的容量の大きいデータを準備します。無償利用可能な動画データを以下から取得します

418MBの動画データ
https://www.videezy.com/abstract/32238-glass-bottle-smashed-in-ultra-slow-motion-1-500-fps-bottle-smash-phantom-006

220MBの動画データ
https://www.videezy.com/abstract/31863-water-pouring-and-splashing-in-ultra-slow-motion-1-500-fps-on-a-reflective-surface-water-pours-007

上記からダウンロードをした後に、OCIのBucketにダウンロードした2個の動画データを格納します。

004.png

これで、以下のURLにアクセスすることにより、2種類の動画データをダウンロードできる構成が出来ました

  • https://objectstorage.ap-tokyo-1.oraclecloud.com/n/<tenancyname>/b/fastly_trial/o/220mb_movie.mp4
  • https://objectstorage.ap-tokyo-1.oraclecloud.com/n/<tenancyname>/b/fastly_trial/o/418mb_movie.mp4

Fastly OCI連携

Service 設定

FastlyでCDNサービスを行うときに、一番最初にServiceという単位を作成する必要があります。1個のServiceが、1個のCDN構成を表しています。Service上で細かな設定を行うことで、CDNの細かな挙動を制御することができます。

一番最初にFastlyにログインすると、[GET STARTED]ボタンが表示されるのでこれを押します。ボタンを押すことで、1個のServiceが作成されます。なお、既に1個以上のServiceを構成している場合は、[Create Service]を押します。

005.png

Serviceが自動的に作成されると、Serviceの管理画面に移動します。Serviceの名前が[Unnamed Service]となっているため、適当にわかりやすい名前に変更します。

006.png

Domains 設定

次に、Fastly上でDomainを作成していきます。Domainは、独自のコンテンツを Fastly の CDN として紐づけるために必要になる設定です。

[CREATE YOUR FIRST DOMAIN] を選択します

007.png

Domain Name に、提供したいサービスのドメイン名を指定します。今回の場合は、お名前ドットコムで sugi.tokyo というドメインを購入しており、object.sugi.tokyo サブドメインでFastlyでCDNを提供する時のドメイン名として入力します。
[CREATE]を押します。

008.png

Origins 設定

次に Origins の設定を行います。Origins は、CDNで提供するためのコンテンツ提供元を表しています。OCI の Object Storage の URL をここに指定します

例) objectstorage.ap-tokyo-1.oraclecloud.com

009.png

Overrode host 設定

Fastly から Object Storage にアクセスするときに、Request の host header を OCI のものに上書きする必要があります。
具体的には、Settings > Override host のメニューで、 Object Storage の ホスト名 objectstorage.ap-tokyo-1.oraclecloud.com を入力する必要があります。(Object Storageのリージョンに合わせて変更してください。)

010.png

Content Headers 設定

Fastly 側で CORS を有効にしておく必要があります。
Content > Headers にある、[CREATE HEADER] を選択します。

011.png

以下のパラメータを入力します。

  • Name : 適当に名前を入れます
  • Type / Action : CacheSet を選択します
  • Destination : http.Access-Control-Allow-Origin を入力します
  • Source : "*" を入力します

012.png

ACTIVATE

画面右上にある、ACTIVATE を押して、CDNを開始します

013.png

アクセス確認

FastlyのDomains メニューにある、Test domain を選択すると、Fastly側から提供されているURL にアクセスすることができます。本番に適用するまえに確認できるのが便利ですね。今回例では、http://object.sugi.tokyo.global.prod.fastly.net/ という名前でURLが生成されています。

014.png

[Test Domain]をクリックして、Fastlyで提供されるURLを取得したのちに、Object Storage 側の URL のパスに書き換えます。
具体的には、以下のように書き換えます。

  • Object Storage の URL Path

https://objectstorage.ap-tokyo-1.oraclecloud.com/n/<tenancyname>/b/fastly_trial/o/220mb_movie.mp4

  • Fastlyを経由した URL Path

http://object.sugi.tokyo.global.prod.fastly.net/n/<tenancyname>/b/fastly_trial/o/220mb_movie.mp4

Fastlyを経由した URL Path で正常に動画データを確認できればOKです。

ドメインの設定

DNSのドメイン構成を変更し、独自のサブドメインで Fastly を経由した Object Storage へのアクセス方法を提供します。
OCI の DNS サービス上で、以下の CNAME レコードを設定します。

015.png

上記の設定により、独自のドメインを使用して Fastly を経由した OCI Obejct Storage へのアクセスを提供することが出来ます。

  • http://object.sugi.tokyo/n/<tenancyname>/b/fastly_trial/o/220mb_movie.mp4

参考URL

Fastly
https://www.fastly.com/

Fastly Docs
https://docs.fastly.com/guides/integrations/amazon-s3
https://docs.fastly.com/guides/performance-tuning/enabling-cross-origin-resource-sharing

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1