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

# はじめに

[Fastly](https://www.fastly.com/)とは、Fastly社が提供しているCDN(Contents Delivery Network) サービスです。
[以前の記事](<https://qiita.com/sugimount/items/fd7e7e27fbf2e9458961>)で Fastly と OCI (Oracle Cloud Infrastructure) 上で稼働するWebサーバとの連携方法をご紹介しました。
今回の記事では、Fastlyと、OCIのObject Storage間との連携方法をご紹介します。

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



# 構成

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

![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/b45fc814-3d4c-6cc4-4ba4-afc8c6582208.png)





# OCI Object Storage

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

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

![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/f7cad978-0dbe-ac53-1ee4-232bcc35e7b1.png)



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

![003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/805a2b1c-7ae1-0358-741b-4fd59ebfe15e.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個の動画データを格納します。

<img width="690" alt="004.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/94ffe8d6-4d26-97f7-1a53-02dc16dd0a2a.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/41de0c1c-d8c9-3cc0-4941-59480fa554ff.png)




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

<img width="651" alt="006.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/cbbc1548-afaf-f0de-84f9-63472e60d78d.png">



## Domains 設定

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

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

<img width="656" alt="007.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/901831aa-f692-390c-b0a4-ab68938275ad.png">



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

<img width="657" alt="008.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/bffbfb25-e62f-39b1-d448-c737b3cef8e2.png">





## Origins 設定

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

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

<img width="647" alt="009.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/f25f83e9-e47c-b040-28e1-ed72db662c9b.png">



## Overrode host 設定

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

<img width="654" alt="010.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/63767976-1f63-33dd-e26b-b65538dcb205.png">



## Content Headers 設定

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

<img width="656" alt="011.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/50f0cb7f-4da6-fa8d-d9c3-366f6ba51892.png">



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

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

<img width="648" alt="012.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/1d57b266-a9ba-5faa-79da-9f7d46b77027.png">



## ACTIVATE

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

<img width="654" alt="013.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/4bf82a61-462c-0587-30b9-342785ec0943.png">



## アクセス確認

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

<img width="651" alt="014.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/b71ec954-872a-d879-41d3-643e6ec0bdfc.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/1c597323-4c91-c1b4-ccf0-347bbffcd303.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>