Использование CloudFront для обслуживания статического веб-сайта, размещенного на Amazon S3

Часть 2/n задачи «Облачное резюме

Часть 1: Создание фронтенда

После настройки веб-сайта Next.js на S3 вы заметите, что конечной точкой веб-сайта http://cindy-crc.s3-website-us-east-1.amazonaws.com/ является HTTP. Это потому, что URL-адрес сайта должен использовать HTTPS для безопасности, и именно здесь нам нужно будет использовать CloudFront.

Стек:

• Next.js
• Amazon S3
• Amazon CloudFront

Как вы помните из предыдущего блога, вам нужно удалить все политики Bucket, прикрепленные к ведру S3, и заблокировать весь публичный доступ, чтобы продолжить работу.

В качестве источника мы будем использовать конечную точку REST API, доступ к которой будет ограничен идентификатором доступа Origin Access Identity (OAI).

Создайте дистрибутив CloudFront

Я в основном следовал принципу Использовать CloudFront для обслуживания статического веб-сайта, размещенного на Amazon S3.

1. В консоли Amazon CloudFront выберите Создать дистрибутив
   • Домен происхождения: cindy-crc.s3.us-east-1.amazonaws.com (из выпадающего меню)
   • Имя: cindy-crc.s3.us-east-1.amazonaws.com (должно быть заполнено автоматически)
   • Доступ к ведру S3: Да использовать OAI (ведро может ограничить доступ только CloudFront).
   • Для идентификатора доступа Origin выберите Create new OAI и выберите только что созданный OAI.
   • Политика ведра: Да, обновить политику ведра
   • Корневой объект по умолчанию — необязательно: index.html
2. Нажмите Create distribution и подождите, пока статус Last modified не перейдет из Deploying в Date. Это может занять ~5 минут.
3. Вы должны иметь возможность перейти по ссылке доменного имени дистрибутива https://d1ij0wngzhbeyc.cloudfront.net и увидеть сайт возобновления.

Устранение неполадок

Если вы получаете ошибку Access Denied, это, вероятно, связано с политикой Bucket. Вы должны заблокировать весь публичный доступ и разрешить доступ к S3 только вашему CloudFront Distribution. Политика ведра S3 должна выглядеть следующим образом

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
-                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity Distribution-ID"
+                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E392Q20ZNZ7N4X"
            },
            "Action": "s3:GetObject",
-            "Resource": "arn:aws:s3:::Bucket-Name/*"
+            "Resource": "arn:aws:s3:::cindy-crc/*"
        }
    ]
}