CSSライブラリの脱CDN（ローカル化）
De-CDN Strategy for CSS Libraries
はじめに
ウェブサイト制作において、TailwindやFont Awesomeなどの有名ライブラリを使用する際、多くの開発者はCDN（Content Delivery Network）からこれらのリソースを読み込むことを選びます。これらのライブラリをローカルサーバーで管理する方法もあり、それには多くのメリットがあります。このサーバーでも今まではCDNを使用していましたが、ローカルで管理するほうが性に合っていると思い今回それを行いました。
メリットとデメリットについて解説していきます。
CDNからローカル管理へ移行するメリット
1つ目のメリットとして、外部依存性が解消されることが挙げられます。CDNサービスに依存していると、そのサービスが停止した場合にウェブサイトの見た目や機能に影響が出る可能性があります。2019年にはCloudflare CDNの大規模障害により、多くのウェブサイトに影響がでました。ローカル管理することで、このようなリスクを完全に排除できます（自身のサーバーが止まらないとは言えないですが）
2つ目は安定したパフォーマンスが見込めるということです。外部サーバーへの接続状況に左右されず、常に一定速度でリソースを読み込めます。特に接続速度が不安定な環境や地域でのユーザー体験が向上します。
3つ目はプライバシーとセキュリティの強化です。閲覧者のブラウザが外部CDNサーバーに接続する必要がなくなるため、プライバシー保護の観点から優れています。また、サードパーティCookieやトラッキングのリスクも低減できます。
4つ目はバージョンを自由に管理できるということです。CDN側でライブラリが予期せずアップデートされることで、サイトの見た目や挙動が変わってしまうことがあります。ローカル管理することで、自分のペースでアップデートを適用できます。
CDNからローカル管理へ移行するデメリット
1つ目に、CDN管理のライブラリは皆がキャッシュしている可能性があるということです。ローカルホスティングに変更すると、初回ロード時だけですがページ表示に時間がかかる可能性があります。
2つ目に、定期的なメンテナンスが必要になるということです。ライブラリに脆弱性が発見された場合には、速やかに最新版に更新する必要があります。各ライブラリの公式サイトやGitHubリポジトリで、セキュリティ関連の情報を定期的にチェックする必要が生まれます。また、定期的なアップデートなどを計画する必要もでてくるのでそこが面倒な点です。
私自身はメリットがデメリットを上回ると判断してローカル管理に移行しましたが、プロジェクトの規模や要件に応じて最適な選択は異なると思います。ご自身の状況に合わせてご検討ください。
次に実装方法を紹介します。
実装方法
ライブラリをローカルに移行するには、以下のような手順で実施します
はじめに、curlコマンドでcdnからライブラリを取得します。
# 必要なディレクトリを作成
mkdir -p css/fontawesome/webfonts
# Tailwind CSSを取得
curl -o css/tailwind.min.css https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css
# Font Awesome CSSを取得
curl -o css/fontawesome/all.min.css https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css
# Font Awesomeのフォントファイルを取得
curl -o css/fontawesome/webfonts/fa-brands-400.woff2 https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-brands-400.woff2
curl -o css/fontawesome/webfonts/fa-regular-400.woff2 https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-regular-400.woff2
curl -o css/fontawesome/webfonts/fa-solid-900.woff2 https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-solid-900.woff2
念の為、sedコマンドを使用してall.min.cssの整形を行います。
sed -i 's|../webfonts/|/css/fontawesome/webfonts/|g' css/fontawesome/all.min.css
その後、HTMLファイル内のリンク参照を更新します
<!-- CDNの場合 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<!-- ローカル管理の場合 -->
<link href="/css/tailwind.min.css" rel="stylesheet">
<link href="/css/fontawesome/all.min.css" rel="stylesheet">
問題なくサイトが表示されていれば完成です。
変更のバージョン管理
Gitなどのバージョン管理システムを使用して、ライブラリのアップデート履歴を記録しておくと、問題発生時の原因特定が容易になります。
# 例：Gitでの変更記録
git add css/tailwind.min.css css/fontawesome/
git commit -m "Update Tailwind CSS to v2.2.19 and Font Awesome to v6.0.0"
より効率的な管理方法として、外部ライブラリを専用のディレクトリ（例：~/lib/css/や/usr/local/share/web-libraries/など）で一元管理し、各プロジェクトからシンボリックリンクで参照する方法があります
# ライブラリを共通ディレクトリで管理
mkdir -p ~/lib/css/tailwind
mkdir -p ~/lib/css/fontawesome
# 最新バージョンをダウンロード・配置
curl -o ~/lib/css/tailwind/tailwind-2.2.19.min.css https://cdn.example.com/tailwind-2.2.19.min.css
curl -o ~/lib/css/fontawesome/fontawesome-6.0.0.min.css https://cdn.example.com/fontawesome-6.0.0.min.css
# プロジェクト内にシンボリックリンクを作成
ln -s ~/lib/css/tailwind/tailwind-2.2.19.min.css /srv/www/yourweb/css/tailwind.min.css
ln -s ~/lib/css/fontawesome/fontawesome-6.0.0.min.css /srv/www/yourweb/css/fontawesome.min.css
# 変更をGitで記録
git add css/
git commit -m "Link Tailwind CSS v2.2.19 and Font Awesome v6.0.0"
シンボリックリンクを使うことでバージョンの変更が容易に可能になりますし、プロジェクトごとに異なるバージョンが使えたりと、色々便利です。
まとめ
CSSライブラリをローカルで管理することは、サイトの信頼性、パフォーマンス、セキュリティを高める効果的な方法だと思いますが、定期的なアップデートとメンテナンスを怠ると、これらのメリットが十分に活かされず、むしろ脆弱性リスクが高まる可能性があることに注意が必要です。
おわり