LoginSignup
4
3

More than 3 years have passed since last update.

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

Posted at

はじめに

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

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

Fastlyとは

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

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

Fastly アカウント作成

Fastly のページに飛んで、Sign up ボタンから、適当にアカウントを取得します。

001.png

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

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

Nginxの構成

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

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

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

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

012.png

Fastly OCI連携

Service 設定

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

一番最初にFastlyにログインすると、[GET STARTED]ボタンが表示されるのでこれを押します。ボタンを押すことで、1個の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 というドメインを購入しており、ここのドメインをFastlyでCDNを提供する時のドメイン名として扱います。Fastlyに登録する際には、fastly.sugi.tokyo のドメインを対象にします。

008.png

Origins 設定

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

013.png

ACTIVATE

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

014.png

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

011.png

アクセス確認

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

015.png

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

012.png

ドメインの設定

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

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

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

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

018.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

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

012.png

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

017.png

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

016.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

4
3
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
3