CloudFront 및 S3에 React SPA 배포

SPA(단일 페이지 애플리케이션)는 단일 웹 문서만 로드한 다음 다른 콘텐츠가 표시될 때 XMLHttpRequest 및 Fetch와 같은 JavaScript API를 통해 해당 단일 문서의 본문 콘텐츠를 업데이트하는 웹 앱 구현입니다. 그것에 대해 자세히 읽어보십시오here.

이 게시물의 목적을 위해 간단한 반응 앱을 사용하겠습니다.

반응 빌드를 보관할 S3 버킷 설정

버킷 만들기

버킷 이름을 도메인과 동일하게 유지합니다(도움말).

객체 소유권을 'ACL 비활성화됨'으로 둡니다

.

모든 공용 액세스를 차단합니다.

React 애플리케이션 빌드 폴더를 S3 버킷에 배포

index.html 파일이 디렉토리의 루트에 있는지 확인하십시오.

CloudFront 설정

새 CloudFront 배포 생성

방금 생성한 S3 버킷으로 오리진을 선택합니다.

S3 버킷 액세스: 객체 액세스 ID가 아직 없는 경우 새로 만드십시오.

CloudFront에서 정책을 업데이트하도록 할 수 있습니다. (선택 Yes, update the bucket policy )

가격 등급: 필요에 따라 지역을 선택할 수 있습니다.

도메인 이름에서 이 CloudFront를 사용할 것이므로 CNAME 도메인 이름을 제공합니다. 내 도메인 이름은 roshan-raj.com입니다.

사용자 정의 SSL 인증서를 추가하도록 선택할 수 있습니다. AWS에서 요청하도록 선택할 수 있습니다. CloudFront에서 사용하는 경우 비용은 무료입니다. 새 SSL 인증서를 생성하는 경우 N.Virginia 지역에 있어야 합니다.

기본 루트 개체를 index.html로 지정합니다.

표준 로깅을 설정할 수 있습니다. (권장)

S3로 돌아갑니다.

CloudFront에서 버킷에 대한 정책을 추가했어야 합니다.

정책에 s3:ListBucket이라는 다른 문을 추가해야 합니다.

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity <CLOUDFRONT>"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::roshan-raj/*"
        },
        {
            "Sid": "2",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity <CLOUDFRONT>"
            },
            "Action": "s3:ListBucket",
            "Resource": "arn:aws:s3:::roshan-raj"
        }
    ]
}

끝났습니다. React 앱은 CloudFront URL에서 사용할 수 있습니다.

이제 React SPA에 추가 경로가 있는 경우 해당 경로로 이동하면 "NoSuchKey" 오류가 발생합니다.

CloudFront 함수를 사용하여 URL을 다시 작성하고 URL에 index.html을 첨부하여 이 문제를 해결할 수 있습니다.

CloudFront 함수를 생성하고 아래 코드를 사용합니다. https://github.com/aws-samples/amazon-cloudfront-functions/blob/main/url-rewrite-single-page-apps/index.js

함수를 게시하고 CloudFront > 동작 > 편집 > 뷰어 요청에 연결합니다.

이제 "NoSuchKey"오류가 수정되었습니다.
Route53의 도메인에 연결하려면 도메인을 CloudFront 도메인 이름으로 가리키기만 하면 됩니다.