ゼロからはじめるJavaScript 第15回 CDNを利用して爆速Webアプリ - 無料CDNを使ってみよう その1
昨今のWeb開発ではさまざまなライブラリを利用してアプリが開発されます。その際、汎用的なライブラリであれば、敢えて自分のサーバーに配置せず、CDNを活用することも多いものです。今回は無料のCDNを利用して自作のJavaScriptライブラリを配布する方法を紹介します。また、無料CDNを使う場合に大切な改ざんチェックの方法なども紹介します。
○CDNとは何か
多くの便利なJavaScriptライブラリがCDNを利用して配信されています。自前のサーバーにそのライブラリをコピーして配信するよりも、CDNを使った方が高速にライブラリを配信できます。なぜでしょうか。最初にCDNについて紹介します。
CDNとはコンテンツ配信ネットワークのことです。英語のContent Delivery Networkの頭文字です。CDNを使うと、複数の地域に配置されたサーバーを利用して、各ユーザーに最も近いサーバーからそのデータを取得します。
その仕組みは、全国チェーンのピザ屋の配達時間を考えると分かりやすいかもしれません。ピザ屋の支店が家の近くにあれば、それだけ配達が早くなります。ピザ屋のレシピは全国共通であり、どの支店からも同じ味を楽しむことができます。
CDNもこれと同じ仕組みです。多くのCDNは世界中にサーバーを配置しています。それで、ユーザーからAというファイルをが欲しいと要求があったとき、最も近くにあるサーバーを介してファイルを届ける仕組みになっています。そのため、CDNを使うと高速にコンテンツの配信が可能になります。
そうであれば、あらゆるWebサイトが全部CDNに対応してくれたら、世界中のWebサイトがもっと高速になって便利だと思うかもしれません。しかし、CDNはあくまでも静的ファイルの配信にしか対応できません。多くのWebサイトは状況に応じて動的にコンテンツが生成される仕組みとなっています。
そのため、CDNを通じて配信することはできるのは、画像やデータなど、Webアプリを構築するパーツの一部です。この点で、JavaScriptのファイルというのは、プログラムが記述されているだけのファイルです。動的に生成する要素がなく、CDNを用いて配信するのにぴったりなのです。
○CDNの落とし穴
ただし、CDNも万能ではありません。CDNで発生した障害が原因で、自分のアプリが動かなくなることがあります。大手のCDNであっても時々トラブルが発生しています。例えば、2021年6月には、CDN大手のFastlyで障害が発生し、メルカリや日本経済新聞、noteなど多くの企業が影響を受けました。つまり、アプリにトラブルが起きたとき、自分が利用しているサーバーに加えて、利用中のCDNと二カ所のチェックが必要となります。
また、JavaScriptのライブラリを無償で配信しているCDNがいくつかありますが、そのサービスが突然終了してしまうこともあります。実際、2019年に広く利用されていたCDNのRawGitがサービスを終了してしまいました。多くのWebサイトをリリースしている場合、その全てを書き換える必要が生じるます。以上の点から、できる限り信頼できるCDNを選ぶことが大切であることが分かります。
○JavaScriptの改ざんチェックの仕組み
また、CDNを使う点で留意したいのがセキュリティです。いくら配信が高速になったとしても、CDNが悪意の第三者により書き換えられてしまうことがないとは言えません。思わぬところで、Webアプリが脆弱性を抱えることになってしまいます。
そのために、JavaScriptのライブラリを取り込む
上記のコードを「test.html」という名前で保存して、ブラウザで表示すると、jQueryを利用して「hello」とダイアログが表示されます。
それで、「jquery-3.6.0.min.js」のintegrity属性の値を適当に1文字だけ変更してみましょう。すると次のようなエラーが表示されます。エラーを見ると「Failed to find a valid digest ... The resource has been blocked.」(正しいダイジェストを見つけることができないため、そのリソースはブロックされました。)と表示されます。
このように、CDNからライブラリを取り込む際、integrity属性を指定しておくことで、攻撃者によるライブラリ改ざんをチェックできます。CDNをするしないに限らず、ライブラリの改ざんチェックができますので普段から指定することをオススメします。
なお、integrityに何を指定したら良いか分からない場合には、SRI Hash Generatorというツールがあり、Web上に配置したJavaScriptのintegrity値を計算して表示してくれます。
○jsDelivrやunpkgでJSライブラリを配信しよう
なお、無料でCDNを利用する方法があります。有名な無料のCDNにはjsDelivrや、unpkgなどがあります。
例えば、jsDelivrを使うには、Node.jsのパッケージマネージャーであるnpmや、GitHubを利用してライブラリをアップロードします。npmやGitHubにライブラリを登録すると、自動的にjsDelivrのCDNが利用可能な状態になります。
例えば、npmにライブラリをアップロードします。すると以下のような規則のURLでライブラリを利用できます。
●jsDelivrを使う方法
https://cdn.jsdelivr.net/npm/パッケージ名@バージョン/ファイル名
例えば、npmに「nadesiko3」という名前のライブラリをアップロードしたとします。その場合、ライブラリをアップロードした時に指定したバージョン(例えば、3.3.17)を指定して、ファイルを取得できます。README.mdというファイルを取得したければ、以下のようなURLでファイルにアクセスできます。
●nadesiko3のv3.3.17に含まれるREADME.mdにアクセス
https://cdn.jsdelivr.net/npm/nadesiko3@3.3.17/README.md
同様に、unpkgを使うとnpmにアップロードしたライブラリに以下のURLでアクセスできます。
●unpkgを使う方法
https://unpkg.com/パッケージ名@バージョン/ファイル名
先ほどの、nadesiko3のバージョン3.3.17にあるREADME.mdであれば、以下のURLでアクセスできます。
●nadesiko3のv3.3.17に含まれるREADME.mdにアクセス
https://unpkg.com/nadesiko3@3.3.17/README.md
このように、npmにアップされたライブラリであれば、手軽にunpkgやjsDelivrのCDNを利用できるので便利です。
○まとめ
今回は、CDNについて紹介しました。CDNを使うとコンテンツの配信が高速になります。なお、CDNのライブラリを使う場合には、にintegrity属性を指定することで改ざんチェックができて安心です。
また、jsDelivrやunpkgというサービスを利用すれば、自作のライブラリをCDNを通じて配信できます。それでは、npmにライブラリをアップロードするにはどうしたら良いのでしょうか。それほど難しくないのですが、次回、具体的な方法を紹介します。お楽しみに。
自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユース スーパークリエータ認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。直近では、「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」「すぐに使える!業務で実践できる! PythonによるAI・機械学習・深層学習アプリのつくり方 TensorFlow2対応(ソシム)」「マンガでざっくり学ぶPython(マイナビ出版)」など。
○CDNとは何か
多くの便利なJavaScriptライブラリがCDNを利用して配信されています。自前のサーバーにそのライブラリをコピーして配信するよりも、CDNを使った方が高速にライブラリを配信できます。なぜでしょうか。最初にCDNについて紹介します。
その仕組みは、全国チェーンのピザ屋の配達時間を考えると分かりやすいかもしれません。ピザ屋の支店が家の近くにあれば、それだけ配達が早くなります。ピザ屋のレシピは全国共通であり、どの支店からも同じ味を楽しむことができます。
CDNもこれと同じ仕組みです。多くのCDNは世界中にサーバーを配置しています。それで、ユーザーからAというファイルをが欲しいと要求があったとき、最も近くにあるサーバーを介してファイルを届ける仕組みになっています。そのため、CDNを使うと高速にコンテンツの配信が可能になります。
そうであれば、あらゆるWebサイトが全部CDNに対応してくれたら、世界中のWebサイトがもっと高速になって便利だと思うかもしれません。しかし、CDNはあくまでも静的ファイルの配信にしか対応できません。多くのWebサイトは状況に応じて動的にコンテンツが生成される仕組みとなっています。
そのため、CDNを通じて配信することはできるのは、画像やデータなど、Webアプリを構築するパーツの一部です。この点で、JavaScriptのファイルというのは、プログラムが記述されているだけのファイルです。動的に生成する要素がなく、CDNを用いて配信するのにぴったりなのです。
○CDNの落とし穴
ただし、CDNも万能ではありません。CDNで発生した障害が原因で、自分のアプリが動かなくなることがあります。大手のCDNであっても時々トラブルが発生しています。例えば、2021年6月には、CDN大手のFastlyで障害が発生し、メルカリや日本経済新聞、noteなど多くの企業が影響を受けました。つまり、アプリにトラブルが起きたとき、自分が利用しているサーバーに加えて、利用中のCDNと二カ所のチェックが必要となります。
また、JavaScriptのライブラリを無償で配信しているCDNがいくつかありますが、そのサービスが突然終了してしまうこともあります。実際、2019年に広く利用されていたCDNのRawGitがサービスを終了してしまいました。多くのWebサイトをリリースしている場合、その全てを書き換える必要が生じるます。以上の点から、できる限り信頼できるCDNを選ぶことが大切であることが分かります。
○JavaScriptの改ざんチェックの仕組み
また、CDNを使う点で留意したいのがセキュリティです。いくら配信が高速になったとしても、CDNが悪意の第三者により書き換えられてしまうことがないとは言えません。思わぬところで、Webアプリが脆弱性を抱えることになってしまいます。
そのために、JavaScriptのライブラリを取り込む
上記のコードを「test.html」という名前で保存して、ブラウザで表示すると、jQueryを利用して「hello」とダイアログが表示されます。
それで、「jquery-3.6.0.min.js」のintegrity属性の値を適当に1文字だけ変更してみましょう。すると次のようなエラーが表示されます。エラーを見ると「Failed to find a valid digest ... The resource has been blocked.」(正しいダイジェストを見つけることができないため、そのリソースはブロックされました。)と表示されます。
このように、CDNからライブラリを取り込む際、integrity属性を指定しておくことで、攻撃者によるライブラリ改ざんをチェックできます。CDNをするしないに限らず、ライブラリの改ざんチェックができますので普段から指定することをオススメします。
なお、integrityに何を指定したら良いか分からない場合には、SRI Hash Generatorというツールがあり、Web上に配置したJavaScriptのintegrity値を計算して表示してくれます。
○jsDelivrやunpkgでJSライブラリを配信しよう
なお、無料でCDNを利用する方法があります。有名な無料のCDNにはjsDelivrや、unpkgなどがあります。
例えば、jsDelivrを使うには、Node.jsのパッケージマネージャーであるnpmや、GitHubを利用してライブラリをアップロードします。npmやGitHubにライブラリを登録すると、自動的にjsDelivrのCDNが利用可能な状態になります。
例えば、npmにライブラリをアップロードします。すると以下のような規則のURLでライブラリを利用できます。
●jsDelivrを使う方法
https://cdn.jsdelivr.net/npm/パッケージ名@バージョン/ファイル名
例えば、npmに「nadesiko3」という名前のライブラリをアップロードしたとします。その場合、ライブラリをアップロードした時に指定したバージョン(例えば、3.3.17)を指定して、ファイルを取得できます。README.mdというファイルを取得したければ、以下のようなURLでファイルにアクセスできます。
●nadesiko3のv3.3.17に含まれるREADME.mdにアクセス
https://cdn.jsdelivr.net/npm/nadesiko3@3.3.17/README.md
同様に、unpkgを使うとnpmにアップロードしたライブラリに以下のURLでアクセスできます。
●unpkgを使う方法
https://unpkg.com/パッケージ名@バージョン/ファイル名
先ほどの、nadesiko3のバージョン3.3.17にあるREADME.mdであれば、以下のURLでアクセスできます。
●nadesiko3のv3.3.17に含まれるREADME.mdにアクセス
https://unpkg.com/nadesiko3@3.3.17/README.md
このように、npmにアップされたライブラリであれば、手軽にunpkgやjsDelivrのCDNを利用できるので便利です。
○まとめ
今回は、CDNについて紹介しました。CDNを使うとコンテンツの配信が高速になります。なお、CDNのライブラリを使う場合には、にintegrity属性を指定することで改ざんチェックができて安心です。
また、jsDelivrやunpkgというサービスを利用すれば、自作のライブラリをCDNを通じて配信できます。それでは、npmにライブラリをアップロードするにはどうしたら良いのでしょうか。それほど難しくないのですが、次回、具体的な方法を紹介します。お楽しみに。
自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユース スーパークリエータ認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。直近では、「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」「すぐに使える!業務で実践できる! PythonによるAI・機械学習・深層学習アプリのつくり方 TensorFlow2対応(ソシム)」「マンガでざっくり学ぶPython(マイナビ出版)」など。
