CDNを使って画像を最適化する
📅
はじめに 🔗
現在、記事の画像はpublicフォルダーに.pngファイルとして保存しています。
<Image>コンポーネントでそれらを参照し、表示できます。
しかし、画像が増えるほどプロジェクトが大きくなり、管理もしづらくなります。
画像が多いとページの読み込みも遅くなるため、最適化できる読み込み方法を調べました。CDNとは 🔗
CDN（Content Delivery Network）はコンテンツ配信ネットワークです。世界各地のサーバーにコンテンツを保存し、ユーザーがアクセスすると最も近いサーバーから配信します。 これにより配信速度を高め、サーバーの負荷を減らせます。 Wikipedia↗
CDNを提供する事業者には、次のようなものがあります。
この中からCloudFrontとS3バケットを使い、CDN環境を構築します。
CloudFrontとS3とは 🔗
Amazon CloudFront
は、.html、.css、.js、画像などの静的・動的なウェブコンテンツ
をユーザーへ素早く配信するサービスです。
エッジロケーションと呼ばれる、世界中のデータセンターネットワークからコンテンツを提供します。
ユーザーがCloudFrontのコンテンツを要求すると、遅延が最も短いエッジロケーションへリクエストがルーティングされ、最適な性能で配信されます。
Amazon S3
はウェブサービス向けのオブジェクトストレージで、ウェブ規模の計算処理に使えるシンプルなウェブサービスインターフェースを提供します。CDN環境の構築 🔗
1. S3バケットを作成する 🔗
私はRoute53でホスティング中のドメインがあるため、そのアカウントでログインして進めました。
- AWSにログインし、
S3へ移動して버킷 생성（バケットを作成）をクリックします。 **リージョンに注意してください。**作成前に適切なリージョンを選びます。私は아시아 태평양(서울)（アジアパシフィック・ソウル）を選びました。 バケット名の規則↗：アンダースコアは使えません。 ほかは既定の設定で進めます。버킷 만들기（バケットを作成）をクリックすると作成されます。
2. CloudFrontを作成する 🔗
CloudFrontへ移動し、배포 생성（ディストリビューションを作成）をクリックします。- Origin DomainでS3バケットのエンドポイントを選びます。
Origin Accessで
원본 엑세스 제어 설정（オリジンアクセスコントロール設定）を選び、Create new OACをクリックします。 既定の設定でCreateをクリックします。 既定のキャッシュ動作にあるビューワープロトコルポリシーは、用途に応じて選びます。私はHTTPS onlyを選びました。 imgタグやscriptタグは既定でCORSチェックを行わないため、キャッシュポリシーは既定のままでも構いませんが、念のため設定します。- オリジンリクエストポリシーを
CORS-S3Originにします。 - レスポンスヘッダーポリシーを
CORS-With-Preflightにします。
배포 생성（ディストリビューションを作成）をクリックします。 - オリジンリクエストポリシーを
3. S3バケットポリシーを設定する 🔗
CloudFrontの作成が終わると、次のメッセージが表示されます。
ポリシーのコピーをクリックし、リンクからS3バケットのポリシー設定へ移動します。
編集をクリックし、コピーしたポリシーを貼り付けて保存します。
4. CloudFrontへの接続を確認する 🔗
S3バケットに画像をアップロードします。
アップロードをクリックしてファイルを選択します。
ドラッグ＆ドロップでもアップロードできます。
CloudFrontに戻り、デプロイの状態を確認します。
完了すると、ディストリビューションのドメイン名が分かります。
これで、配信ドメイン名を使って画像にアクセスできます。
https://[도메인 이름]/[파일명]"CDNに独自ドメインを設定する（任意） 🔗
既定のドメイン名はAWSが提供するものです。
複雑で覚えづらいため、普段使っているドメインと接続すると便利です。
ホスティングされているドメイン
が必要なので、事前に用意してください。1. レコードを作成する 🔗
Route53で自分のドメインを選びます。
레코드 세트 생성（レコードセットの作成）をクリックします。
サブドメインを入力し、CNAMEを選びます。
値にはCloudFrontの配信ドメイン名を入力して作成します。2. SSL証明書を発行する 🔗
CloudFront用のSSL証明書が必要なので、ACM（AWS Certificate Manager）で発行します。
CloudFrontで使う証明書は、米国東部（バージニア北部）リージョンでしか発行できません。
リージョンをバージニア北部に変更してから進めてください。
証明書のリクエストからパブリック証明書のリクエストへ進みます。
CNAMEを設定したドメインを入力し、요청（リクエスト）をクリックします。最初は検証待ちの状態です。
待っても変化しない場合は、
Route53에서 레코드 생성（Route53でレコードを作成）ボタンからDNSレコードを作成します。3. CloudFrontにドメインを接続する 🔗
CloudFrontのページで設定の編集をクリックします。
次のようにCNAMEとSSL証明書を設定し、
설정 저장（設定を保存）をクリックします。設定が終わったら、そのドメインにアクセスしてCDNへの接続を確認します。
まとめ 🔗
さらに考える 🔗
記事全体についてCDN適用前後を比較しました。
画像の多い記事を対象にしています。
CDN適用前
CDN適用後
