웹 사이트를 만들고 싶다!

일단 움직이는 웹 사이트를 만들고 싶습니다. 계속됩니다.

이번 설계도

실제 사이트

마지막으로 쓸 수 없었다.
- CloudFront 사용(탈S3 public)
- Cognito를 사용한 사용자 등록 기능
의 CloudFront 주위에 대해 쓰고 싶습니다.

만드는 사이트

나도 못

네일 모델 찾기 네일리스트와 무료로 네일을 받고 싶은 사람을 매칭하는 서비스입니다

길

Route53 좋은 느낌의 도메인에서 DNS 설정

CloudFront 경유 전용 연결 허용

오류 페이지 정보

Route53에서 좋은 느낌의 도메인 + CDN

우선 아래 사이트를 참고로 좋은 느낌의 도메인을 취득합니다
Amazon Route 53에서 도메인 구매

그리고 아래 페이지 중간에 참고로 CNAME 만들기
S3의 특정 버킷에 대한 액세스를 특정 CloudFront에서만 허용합니다.

CloudFront 준비

기본적으로 다음 페이지를 참고로 CloudFront 만들기
CloudFront + S3로 CDN(Cache Distribution 패턴) 구축 절차

CloudFront에서만 통신 허용

마지막 버킷 정책에서는 S3이 직접 보이기 때문에,
또한 다음 사이트를 예로 CloudFront 경유만으로 볼 수 있도록 변경
S3의 특정 버킷에 대한 액세스를 특정 CloudFront에서만 허용합니다.

bucket_policy.json

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity {{CloudFront ID}}"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::{{BUCKET_NAME}}/*"
        }
    ]
}

또한 배포 명령을 수정하여 공개 액세스를 금지합니다.

buildspec.yml

version: 0.2
env:
  variables:
    AWS_REGION: "ap-northeast-1"
phases:
  build:
    commands:
    - aws s3 sync ./frontend/ s3://{{BUCKET_NAME}}/ # --acl public-read

이제 https://{{CNAME}}/index.html URL로 연결할 수 있습니다!

오류 페이지 관련

이것으로 일단 연결됩니다만,
URL 실수 등을하면 매우 짜증나는 오류 페이지가 반환됩니다.



S3에없는 것을 지정하면 access denied가됩니다.
따라서 아래와 같이 CloudFront 측에서 403일 때는 error.html 를 보도록 해 둡니다.
적절한 error.html을 만드는 것이 좋습니다.

다음은 Cognito 주위에 대해

여기까지 오면 일단 보안 관련 오류가 나오지 않으므로 안심
인프라 주위가 생겼기 때문에 Cognito의 로그인 주위 등에 대해 쓰고 싶습니다.
일단 움직이는 웹 사이트를 만들고 싶다 (Cognito 편)

수작업으로 하고 있는 상태이므로 가끔 지적을 주시면 기쁩니다!
또 기억하면서 써 갔기 때문에 잘못된 내용이 있으면 죄송합니다. .