CodlessCode
AWS

CloudFront と 代替 ドメイン を使って S3 にアクセスする方法

CloudFront経由でS3の静的コンテンツにアクセスする手順を2ステップに分けて解説します。
また、Route53やACM、OAIも活用し、CloudFrontのドメインと独自ドメイン(のサブドメイン)をリンクさせ、HTTPSで接続するところまで設定します。

  

CloudFront+独自ドメインを使ってS3の静的コンテンツにアクセスする全体図

System Configuration

概要

CloudFront経由でS3の静的コンテンツにアクセスできるようにします。
また、CloudFrontのドメインと独自ドメインをリンクさせ、OAIも使用し

  • S3に直接アクセスできない
  • CloudFrontドメインからアクセス可能
  • 独自ドメインのサブドメインからアクセス可能

といった形にしていきます。

 

前提

  • S3バケットは作成済み(良ければこちらご参考に!)
  • S3バケットのブロックパブリックアクセスをすべてオンの状態
  • 独自ドメイン取得済み
 

独自ドメインを立てる(オプション)

ホストゾーン作成

最初に、Route53でホストゾーンを作成します。

  1. Route53コンソールを開き、左のメニューからホストゾーンを選択
  2. ホストゾーンの作成
  3. 取得済みのドメイン名を入力
  4. パブリックホストゾーンにチェックを入れてホストゾーンの作成を実行

NSレコードとSOAレコードができました。
サブドメインはあとで作成します。

 

証明書を発行

HTTPS接続のために、ACMで証明書を発行します。

証明書をリクエスト

  1. ACMコンソールを開く
  2. リージョンをバージニア北部us-east-1に変更する※重要※
  3. 証明書のリクエストを選択する
  4. パブリック証明書のリクエストをチェックし、証明書のリクエストを続行
  5. 取得済みのドメイン名*.ドメイン名を入力して次へ※重要※
  6. DNSの検証を選択して次へ
  7. 必要ならばタグを入力し、確定とリクエストを実行
  8. 進行中のリクエストページで続行をクリック

追加直後は検証保留中になっていますが、早いと数分で発行済みにかわります。

checking_certificated
 

なぜバージニア北部か

 

CloudFrontで指定するカスタムSSL証明書は米国東部(バージニア北部)リージョン(us-east-1)にある必要があります

 

他のリージョンで証明書発行済みの場合は?

 

バージニア北部で同じドメイン名の証明書をリクエストしましょう!
こちらで回答されているように、複数のリージョンにて同じドメイン名の証明書を作成することができます。※証明書の移動や他アカウントに譲渡はできません。

この場合は、次に示すCNAMEレコードの作成は不要です。
証明書のリクエストだけすればOKです。

 

CNAMEレコードを追加

add_cname_to_route53

証明書リクエスト後のページで、Route53でのレコードの作成ボタンをクリックして追加します。
ボタンが無ければ手動で追加する必要があるので名前種類をメモしておきましょう。
※画像は追加したあとのシーンなので、ボタンが非アクティブになってます。

そのあと、Route53でホストゾーンを確認すると、CNAMEというレコードが追加されていると思います。

[Route53でのレコードの作成]がない場合

該当のホストゾーンのページで、メモした名前、種類、値を使ってレコードを作成します。

  • レコード名に名前から、末尾の「.ドメイン名.」を除いた文字列を入力
  • レコードタイプはCNAMEを選択
  • 値はそのままの値を入力
 

CloudFrontを立てる

ディストリビューション作成

CloudFrontディストリビューションを作成していきます。
※独自ドメインにリンクさせる場合は、【オプション】の操作も必須です。

  1. CloudFrontコンソールを開き、ディストリビューションを作成
  2. オリジンドメインで該当するS3バケットを選択
  3. オリジンパスは空欄のまま
  4. 名前に任意の値を入力
  5. S3バケットアクセスで「はい、OAIを使用します」をチェック
  6. オリジンアクセスアイデンティティ(OAI)で新しいOAIを作成を実行
  7. バケットポリシーで「はい、バケットポリシーを更新します」をチェック
  8. デフォルトのキャッシュビヘイビアでビューワープロトコルポリシーとしてHTTPS onlyをチェック
  9. ビューワーのアクセスを制限するNo
  10. Cache policy and origin request policy (recommended)にチェックし
  11. キャッシュポリシーとしてCachingOptimized選択(任意で選択してください)
  12. 【オプション】設定代替ドメイン名(CNAME)-オプションにて「項目を追加」
  13. 【オプション】リンクさせたいサブドメインを入力
  14. 【オプション】カスタムSSL証明書-オプションにて先ほどリクエストした証明書を選択
  15. ディストリビューションを作成を実行

各設定項目について、もっとよく知りたい方はこちらを参照してください。

OAIを作成し、S3のパブリックアクセスをすべてブロック+バケットポリシーを変更することで、S3へアクセス制限を設けることができます。

 

CloudFrontのドメイン名確認

CloudFrontコンソールで作成したディストリビューションを選択して開き、一般タブにてディストリビューションドメイン名を確認できます。

これがデフォルトで割り当たっているCloudFrontのドメイン名になります。

 

S3のバケットポリシー確認

対象のS3バケットのポリシーを確認すると以下のようなポリシーが追加されていると思います。

{
    "Sid": "番号",
    "Effect": "Allow",
    "Principal": {
        "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity CloudFrontのOAI"
    },
    "Action": "s3:GetObject",
    "Resource": "S3バケットのARN/*"
}
 

サブドメインとリンクさせる(オプション)

サブドメインを作成し、CloudFrontと紐づけます。

  1. Route53コンソールを開き、先ほど作成したホストゾーンを開く
  2. レコードを作成を実行
  3. リンクさせたいサブドメインになるようにレコード名を入力
    (例:media.laboliy.comにしたいので「media」と入力)
  4. レコードタイプAを選択
  5. エイリアスをオン
  6. CloudFrontディストリビューションへのエイリアスを選択
  7. 先ほど作成したディストリビューションのドメイン名を選択
  8. ほかの項目はデフォルトのままで
  9. レコードを作成を実行

ディストリビューションのドメイン名がリストにない場合、デプロイ中の可能性があるので、少し待ってからやってみましょう。

 

アクセスの確認

お疲れ様でした✨

最後に、S3バケットに適当な画像をアップロードして、アクセスできるか確認してみます。

以下の3つのURLを適宜読み替えてブラウザに打ち込んでみてください。
(この記事の全体図の画像を例としています)


// S3直接 …… AccessDenied
https://s3.ap-northeast-1.amazonaws.com/バケット名/articles/202109/access_s3_via_cloudfront_with_auth.jpg

// CloudFront …… アクセス可能
https://CloudFrontのドメイン/articles/202109/access_s3_via_cloudfront_with_auth.jpg

// 独自ドメイン …… アクセス可能
https://media.laboliy.com/articles/202109/access_s3_via_cloudfront_with_auth.jpg