Часть 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.
- В консоли 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
- Нажмите Create distribution и подождите, пока статус Last modified не перейдет из Deploying в Date. Это может занять ~5 минут.
- Вы должны иметь возможность перейти по ссылке доменного имени дистрибутива 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/*"
}
]
}