CDNって何だっけ？ - Software Engineering Blog

CDN(Content Delivery Network)について。カタカナ表記だとコンテンツデリバリーネットワークとなりますが、いろんな場所のサーバーからコンテンツを配信できるソリューションのことです。

フロントエンドエンジニアの身近な事例だと、Bootstrap /jQuery/Font AwesomeなどがCDNを使って提供されています。

例えば、「はじめに - Bootstrap 4.2 - 日本語リファレンス」にあるスターターテンプレートを見てみましょう。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

CSSとJavascriptがCDNのURLになっているため、インターネットに接続されている環境であれば、自分のPCやサーバーにアップロードせずにそのまま使えます。

なぜCDNを使う必要があるのでしょうか？

f:id:tworks55:20200222224809p:plain — Fig-1

CDNを使わない場合は、Fig-1のように自分のサーバーからのみコンテンツ（HTML/CSS以外に画像や動画も含む全て）を配信するため、世界中からアクセスが来るとサーバーの負荷が増大し、最悪のケースではサーバーがダウンしてしまいます。

f:id:tworks55:20200222223221p:plain — Fig-2

CDNを使えばFig-2のようにコンテンツを世界中のサーバーに分散して配置し、アクセスする人の近くにあるサーバーからコンテンツを配信するため、各サーバーの負荷が分散されます。

ただし、無料で提供されているCDNについては、未来永劫使える保証はありません。そのため、自分でWEBサイトを構築する際は、CDNにあるCSSやJavascriptを使わず、自分のサイトに配置するようにした方が良いでしょう。

万が一CDNを使わなければならないほどトラフィックが来るようであれば、自前でCDNを構築するかCDNのサービスを契約する必要があります。