高速CDN の Fastly と Oracle Cloud を連携してみた

# はじめに

コンテンツキャッシュ削除が超高速と話題の Fastly と Oracle Cloud Infrastructure を連携させてみました。
Fastly とOCI間の連携手順と、コンテンツのInstant Purge(即時削除)の手順をご紹介していきます。
Fastlyアカウントを作成すると、$50 までの Free 枠が用意されているので、気軽に利用することができます！

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



# Fastlyとは

[Fastly](<https://www.fastly.com/>)とは、Fastly社が提供しているCDN(Contents Delivery Network) サービスです。世界中にエッジサーバーを配置し、高速にコンテンツを提供するサービスです。他社のCDNサービスを挙げると、Akamai, Amazon CloudFront, CloudFlare などがあります。聞き覚えががある方もいらっしゃると思います。

一般的なCDNサービスは、世界中のエッジサーバーにキャッシュさせると、それを無効化するために数分~数十分単位で時間が掛かってしまいます。なので、同じURLで頻繁にコンテンツが切り替わるサイトはCDNが難しいと考えています。これに対応するために、FastlyのInstant Purge機能を使うことで、即時にコンテンツキャッシュの削除ができ、頻繁に更新されるコンテンツをCDNで提供することができます。



# Fastly アカウント作成

[Fastly](<https://www.fastly.com/>) のページに飛んで、Sign up ボタンから、適当にアカウントを取得します。

![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/aecf051e-192d-d4cb-23e8-8a9a6b5c9fe1.png)



アカウントを登録作業後、約10分ほどでメールアドレスに通知が来ます。確認ボタンを押すことで、登録完了となります。(通知が来ない場合はサポートに問い合わせすると、再送することが出来ます)



# OCI にキャッシュ元のWebサーバを構成

## Nginxの構成

Fastlyのキャッシュ元サーバをOCI上に準備します。
適当に仮想ネットワークやインターネットゲートウェイ、コンピュートインスタンスを構成し、インスタンス上にNginxをたてます。

今回の記事では、具体的な手順は省略します。具体的な手順は以下の記事が参考になります。

OCI チュートリアル
https://community.oracle.com/docs/DOC-1019313



Nginxを構成し、グローバルIPを使用してアクセスすると、以下のような Welcome ページが表示されます。

![012.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/a3c98dfe-decb-72fd-6523-4983194611f9.png)







# Fastly OCI連携

## Service 設定

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

一番最初にFastlyにログインすると、[GET STARTED]ボタンが表示されるのでこれを押します。ボタンを押すことで、1個のServiceが作成されます。

![005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/35acc5c0-e73a-d4df-36c2-306bc68dd736.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/32e52fd4-c459-88fb-536a-adefe7205726.png">



## Domains 設定

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

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

<img width="651" alt="007.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/ba57b04b-cbdf-c263-405a-dddc9c0a040f.png">



Domain Name に、提供したいサービスのドメイン名を指定します。今回の場合は、事前に `sugi.tokyo` というドメインを購入しており、ここのドメインをFastlyでCDNを提供する時のドメイン名として扱います。Fastlyに登録する際には、`fastly.sugi.tokyo` のドメインを対象にします。

<img width="718" alt="008.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/23f73a0f-09fd-40d9-530b-f7df98522c7b.png">



## Origins 設定

次に Origins の設定を行います。Origins は、CDNで提供するためのコンテンツ提供元を表しています。OCI 上で作成した Nginx のグローバルIPアドレスを指定します。

<img width="734" alt="013.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/1c10a43b-a8ec-b445-571f-760ecfe74105.png">



## ACTIVATE

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

<img width="724" alt="014.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/390cc579-45ae-199d-4fab-0590217139bc.png">



以下の画面へ自動遷移します

<img width="645" alt="011.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/555e2c9e-4c1b-bc66-94bd-a35a9eeff340.png">



## アクセス確認

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

<img width="739" alt="015.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/30c785e1-2247-0656-d8f2-da24ec7dbf56.png">



URLにアクセスした結果、正しくNginx のウェルカムページが表示されれば成功です

![012.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/af3f0246-c9af-28dd-c090-43e23b921b21.png)



## ドメインの設定

正しくCDNが構成されたことを確認したのちに、ドメインの構成を変更します。

例を挙げると、 `fastly.sugi.tokyo` というCNAMEレコードを作成し、FastlyのURL `http://fastly.sugi.tokyo.global.prod.fastly.net/` を指定します

このCNAMEレコードにより、独自のドメインを使用してFastlyでCDNを行うことが出来ます。

以下の設定は、OCI上のDNSサービスで設定を行ったときの例です

![018.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/740151f1-4653-556a-29b2-901a2fac10a3.png)



# Instant Purge (キャッシュの削除) の確認

FastlyにNginxのコンテンツをキャッシュすることができたので、キャッシュの削除速度を確認します。まずは、NginxのWelcomeページを変更します。

Nginxのインスタンス上に存在しているHTMLファイルの「Welcome to Nginx!」の文字列を「Hello, Fastly! I am the FLASH!」と変更します

```
cat <<'EOF' > /var/www/html/index.nginx-debian.html
<!DOCTYPE html>
<html>
<head>
<title>Hello, Fastly! I am the FLASH!</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
</head>
<body>
<h1>Hello, Fastly! I am the FLASH!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>

<p><em>Thank you for using nginx.</em></p>
</body>
</html>
EOF
```



NginxのグローバルIPアドレス宛てに直接開くと、コンテンツが変わっています

![016.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/f765aed9-2a3b-8940-7251-a2fbf7d76bd0.png)



対して、Fastly上のキャッシュデータは古いままです。

![012.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/c88092e2-67ab-31d2-a05d-b81aa16c9ecc.png)


Fastly上でキャッシュの削除を行います。CONFIGURE メニュー配下にある、PURGEからPurge all を選択します。これでキャッシュが削除されます。

<img width="740" alt="017.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/22f656f4-9009-3016-ed82-8b4cc145c12a.png">



自分の環境では、約数秒経過後にFastlyのキャッシュデータが更新されました

![016.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/367a9950-dad0-1342-6b3e-43fb09efa433.png)





# 参考URL

Fastly
<https://www.fastly.com/>

Fastly Documents
<https://docs.fastly.com/ja/guides/basic-setup/getting-started-with-fastly>

Fastly Basic Setup
<https://docs.fastly.com/guides/basic-setup/>

Fastly使ってみた
<https://hawksnowlog.blogspot.com/2017/02/my-first-fastly.html>