エンジニアの柿添です。

ようやく涼しい日が増えて来ました。
半袖で夜に外を歩くのは厳しくなってきました。

食欲の秋、太らないようにしていきたいです。

そもそもCDNとは

Cloudflareを知る前にまずCDNとは何か知っておく必要があります。

CDN、コンテンツ配信ネットワーク (Content Delivery Network) は
サーバへのリクエストを 最適化, 高速配信, 高速処理 するために連携する
「地理的に分散されたサーバーのグループ」を指します。

引用元 Cloudflare

CDNを利用することで Origin Server へ 到達する前に CDN Server へとリクエストが到達するようになります。
また、CDNでは各種キャッシュを持ち、キャッシュが存在する場合は高速にレスポンスを返すことができます。

画像・動画・JSONデータ・CSVデータなどがキャッシュされていた場合、
Origin Server へ到達することなく CDN Server からレスポンスが返されるようになります。

(Amazon S3 の 転送量などが下がりますね)

通常のリクエストからレスポンス

ブラウザからWebサイトへアクセスし、構成にCDNがなかった場合、

ブラウザ → インターネット → Origin Server (HTTPサーバ → APPサーバ,システムetc… → DB)
のように到達し、
(DB → APPサーバ,システムetc… → HTTPサーバ)Origin Server → インターネット → ブラウザ
のように返ってきます。

CDN利用時のリクエストからレスポンス

ブラウザからWebサイトへアクセスし、構成にCDNがあった場合、

ブラウザ → インターネット → CDN Server
のように到達し、CDN Serverでキャッシュが確認された場合
CDN → インターネット → ブラウザ
のように返ってきます。

Cloudflareとは

Cloudflare(クラウドフレア)、 無料プランが付帯する数少ないCDN, CDNプラットフォームの1つです。 (競合サービスではAmazon CloudFront, Fastly, Akamai 等があげられます)

ウェブセキュリティ・パフォーマンス改善において圧倒的な知名度を誇るサービスであり、
高度なファイアウォール、CDNキャッシュ、キャッシュ管理、アクセス解析、画像最適化、トラフィックルーティング等、
ユーザ体験を向上させるさまざまな機能を有しています。

引用元 Cloudflare

世界に275拠点のデータセンターがあり、
これらCloudflareネットワークは世界のインターネット人口の95%から約50ミリ秒圏内にあります。

無料プランで大きく以下のものが利用可能です。

• CDNサービス & CDNキャッシュ
• Universal SSL証明書
• 標準的なDDoS攻撃対策
• シンプルなボット対策

弊社の公式サイトでも利用し恩恵をフルに受けています。

Cloudflareキャッシュ

Cloudflareのデフォルト設定では、以下の拡張子を持つファイルのリクエストがキャッシュされます。
デフォルトの状態で何も設定しない場合、レスポンスがHtmlの場合はキャッシュされません。

bmp
ejs
jpeg
pdf
ps
ttf
class
eot
jpg
pict
svg
webp
css
eps
js
pls
svgz
woff
csv
gif
mid
png
swf
woff2
doc
ico
midi
ppt
tif
xls
docx
jar
otf
pptx
tiff
xlsx

Cloudflareをフルに利用

弊社の公式サイトは システムの変更 & Cloudflareの設定によりシステムが返すHtmlをCDNキャッシュとして利用できるようにしてあります。
実際にシステムが扱うコンテンツは動的であるためシステムによりサイトの情報が更新される際はCloudflare CDNサーバにあるキャッシュを削除する必要が出てきます。
ですが、キャッシュ削除後すぐに更新がCDNへ反映され高速にレスポンスを返すことができるようになります。

ブラウザをスーパーリロードしていただき、Networkでレスポンスを眺めていただければわかるかと思いますが、
おおよそ20ms〜50ms以内にレスポンスが返ってきているのがわかるかと思います。

最後に

とにかくサイトを高速化したい、とにかくOriginServerを守りたい
そんな場合にCloudflareの無料プランからやってみることをおすすめします。

個人的にも利用していますが無料プランでも本当に様々な機能が利用できます。
有料プランですと管理画面からの解析情報がさらに事細かく確認できるようになり素敵です！

https://blog.cloudflare.com/next-on-pages/ 先日のブログで Next.js について新たに触れられていました、

Right now, most accounts are limited to a maximum script size of 1MB
(although this can be raised in some circumstances—get in touch!)

非常に興味深く嬉しい記述 笑

Cloudflareのこれからの動きもとても楽しみです。

＼フリーランス制作パートナー募集／

弊社パートナーとして、クリエイティブ制作・システム開発等、各分野で協力しあえるフリーランスのパートナー様を募集しております。詳細等、下記のフォームよりお気軽にお問い合わせくださいませ。スタッフ一同、パートナーシップを構築出来る方との出会いを楽しみにしております。