「SAVACAN」担当のMKです。
前回のブログではCloudflareのCDNをご紹介しました。
今回はAWSのCDNマネージドサービスであるCloudFrontをご紹介したいと思います。
まずはじめにCloudFrontを利用する設定の基本である[CloudFrontとS3を使った静的サイト]の公開の流れをご紹介します。
次に[AWSの外部にあるオリジンサーバー（オンプレ）をCloudFront]で公開する流れをご紹介します。
オンプレでCloudFrontを利用する際のDNSは[Route53]を使わずAWS以外のDNSサービスを利用して設定しました。
そもそもCDNが何か知らない！という方は、前回のブログで解説しておりますのでよろしければご覧ください。
CloudflareのCDNとVPNを設定してみる
CloudFrontとS3を使った静的サイト作成までの流れ
はじめにS3にアップロードしたファイルをCloudFrontで公開するために以下の流れで設定をしていきます。
- S3にバケットを作成
- バケットにWEBコンテンツをアップロード
- バケットの静的ウェブホスティングを許可
- CloudFrontのディストリビューション作成
- CloudFrontにS3のバケットポリシーを適用する
- アクセスして動作確認
S3にバケットを作成
まず初めにS3の画面にて[バケット]をクリックします。
[バケット]画面から[バケットを作成]をクリックします。
バケット名に[任意の名前]を入力し、その他は全てデフォルトの設定で[バケットを作成]をクリックします。
バケット名の説明に「バケット名はグローバル名前空間内で一意であることに加えて」（下の写真緑線）と記載があります。
これは、バケット名が公開URLの一部に利用されるためS3全体で同じ名前を使用することができないという意味になります。
バケットをインターネット公開するために[このバケットのブロックパブリックアクセス設定]で[パブリックアクセスをすべてブロック]のチェックを外します。
バケットにWEBコンテンツをアップロード
作成したバケットをクリックします。
ファイルをS3にアップロードするために[アップロード]をクリックします。
[アップロード]画面で[ファイルを追加]をクリックしてファイルをアップロードします。
ファイルのアップロードが終わったら[アップロード]をクリックします。
バケットの静的ウェブホスティングを許可
次に作成したバケットの公開設定をします。
バケットの[プロパティ]タブをクリックします。
画面最下段の静的ウェブサイトホスティングの[編集]をクリックします。
静的ウェブサイトホスティングに[有効にする]を選択、インデックスドキュメントに[index.html]を入力します。
今回は他の設定はデフォルトのままとして画面最下段の[変更の保存]をクリックします。
以上でS3側の設定は完了です！
続いてCloudFront側の設定をしていきます。
CloudFrontのディストリビューション作成
CloudFrontの画面にて[ディストリビューションを作成]をクリックします。
[Origin domain]にS3で作成したバケットを選択します。
オリジンとはCloudFrontがリクエストを送信するロケーションのことを言います。
[デフォルトのキャッシュビヘイビア]は今回はデフォルトのままとします。
ビヘイビアではパスパターンでオリジンに振り分けることができます。
[オリジンアクセス]に[Origin access control settings (recommended)]を選択しCloudFrontからのアクセスのみに制限します。
選択すると[Create new OAC]というボタンが表示されますのでクリックします。
今回は全てデフォルト入力のまま[Create]をクリックします。
デフォルトルートオブジェクトに[index.html]を入力して[ディストリビューションを作成]をクリックします。
以上でCloudFront側の設定は完了です。
続いてCloudFrontのポリシーをS3に設定します。
S3のバケットポリシーを適用する
作成したCloudFrontディストリビューションの[オリジン]タブからオリジンをチェックして[編集]をクリックします。
[Origin access control]下の青枠内にある[ポリシーをコピー]をクリックします。
コピーができたら[S3 バケットアクセス許可に移動]をクリックします。
S3バケットの[アクセス許可]タブから[バケットポリシー]の[編集]をクリックします。
[バケットポリシー]のポリシー入力枠に[Origin access control]でコピーした情報を貼り付けて画面右下の[変更の保存]をクリックします。
ここまででS3にアップロードした画像を公開するための設定が完了しましたので実際にアクセスしてみましょう！
動作確認
アクセスするURLを確認するためにCloudFrontの[ディストリビューション]画面の一覧に記載されたドメイン名を確認します。
ブラウザのURLバーに
https://上の写真の赤線のドメイン名/S3にアップロードしたファイル名
を入力してアクセスできれば成功です！
続いてAWSの外部にあるオリジンサーバー（オンプレ）をCloudFrontで公開する設定をご紹介したいと思います。
AWSの外部にあるオリジンサーバーをCloudFrontで公開する
初めにSSL証明書を作成します。
[certificate manager]サービスを開いて[証明書をリクエスト]をクリックします。
[証明書をリクエスト]画面で[パブリック証明書をリクエストする]を選択して[次へ]をクリックします。
[パブリック証明書をリクエスト]画面で、完全修飾ドメイン名にCloudfront経由でアクセスするドメイン名を入力します。
検証方法に今回は[DNS検証]を選択して画面最下段の[次へ]をクリックします。
[次へ]をクリックした画面で証明書の内容が表示されますので[ドメイン]からCNAME名とCNAME値をコピーします。
ドメインを管理するDNSサーバーへ、検証の為にコピーしたCNAME名とCNAME値を登録します。
登録が完了したら[certificate manager]画面に戻り画面最上段に表示されている[証明書を表示]をクリックします。
検証が完了するとステータスが保留中から[発行済み]と[成功]に変わります。
以上でSSL証明書の作成が完了です。
続いてCloudFrontでディストリビューションを作成します。
ディストリビューション作成
CloudFront画面を開いて[ディストリビューションを作成]をクリックします。
[ディストリビューションを作成]画面でOrigin domainにCloudFrontがオンプレサーバーにアクセスする際のドメインを入力します。
さきほどSSL証明書を作成したドメインではなく、オリジンサーバーにアクセス可能なドメインを設定します。
有償でWAFが利用できますが今回使用しませんので[セキュリティ保護を有効にしないでください]を選択します。
[代替ドメイン名 (CNAME)]にCloudfrontにアクセスするドメイン（SSL証明書を作成したドメイン）を入力します。
[Custom SSL certificate]に先ほど作成したSSL証明書を指定します。
入力が完了したら[ディストリビューションを作成]をクリックします。
以上でCloudfrontのディストリビューションの作成が完了しました。
最後にDNSを設定します。
DNSの設定
以下のようにDNSを設定しています。
Cloudfrontアクセス用ドメインとオリジンサーバー用ドメインは必ず別で無ければならない点に注意。
・Cloudfrontアクセス用ドメインレコード
mktest CNAME [aws指定値].cloudfront.net
・オリジンサーバー用レコード（サーバーIP）
mktest2 A xxx . xxx . xxx . xxx
動作確認
ここまでの設定でDNSが反映されたらCloudfrontにアクセスしてみましょう！
URLに入力するドメインは mktest.space-i.com のようなCNAMEを設定したサブドメインになります。
1回目のアクセスでCloudfrontにキャッシュが作成されます。
2回目以降のアクセスをしたときブラウザの開発者ツールで以下の写真のように[X-Cache]に[Hit from cloudflont]と表示されていればCloudfrontでのキャッシュ取得に成功です！
CloudflareとのCDN比較
大きな違いとして以下2点があります。
（１）費用感
従量課金制のCloudfrontに対して、Cloudflareは無料版と月額固定料金のPro（20$/月）、Business（200$/月）プランがあります。
無料プランから初めてみたい方はCloudflare一択になりますね！
（２）設定のしやすさ
CloudflareにDNSを持たせる場合はCloudflareの方がCDNの設定が楽です。
Cloudfrontは全てを自分で設定する必要があります。
個人的に、外部のオリジンサーバーを利用する場合はAWSよりCloudflareの方が導入が簡単だと感じました。
オリジンサーバーがAWS内にあるときは他のサービスとの連携がしやすく請求もAWSにまとまるため、Cloudfrontの方が全体の構成が分かりやすく、管理しやすいと感じました。
弊社ではCloudfront、Cloudflare共に導入実績がありますので、CDNの導入をご検討の際はお気軽にご相談ください！
