AWS cloudfront S3연동 / OAI를 이용 (access denied 문제 관련 해결)

목차

 

 

 

 

1. S3 설정

 

페이지를 보여줄 index.html 을 하나 s3에 업로드 합니다.

 

그리고 속성 탭에서 정적 웹사이트 호스팅을 합니다.

아래는 이미 되어 있어서 활성화 되어있는데 원래는 비활성화입니다. 

오른쪽위에 편집을 누릅니다.

 

다른거 건드릴것 없이 인덱스 문서에 페이지에 표시할 문서인 index.html을 입력해주고 저장합니다.

- 어디서든 볼수 있게하기위한 퍼블릭설정은 권한에서 버킷정책이랑 퍼블릭액세스를 해줘야하지만 cloudfront에서 oai 로 접근할 것이고 설정을 해주기때문에 그냥 놔둬도 됩니다.

 

 

 

 

 

2. Cloudfront 배포 생성

배포 탭에서 배포생성을 합니다.

 

 

들어가시면 원본 도메인에 방금 위 S3에서 생성한 버킷이름을 선택합니다.

S3에서 생성한 도메인이 다를텐데 2019년 이후에 생성된 리전의 경우 이것이 적용되지 않으나

보시는 분들은 한국에서 하실거기 때문에 그냥 선택하시면 되겠습니다.

이름이 살짝 다릅니다.

선택하시면 이름이 자동으로 나타납니다.

선택후 원본 경로가 있는데

s3 내부에 원하는 경로를 입력하면됩니다

예를들어 s3 의 test 폴더에 index.html 을 접근시키고 싶다라면

/test/* 적고 나중에 적을 기본루트객체에 index.html을 입력하면됩니다.

저는 버킷아래에 바로 index.html을 넣어서 경로 입력을 하지않고 해당 버킷의 root로 바로 접근할수 있도록 하였습니다.

---

이름 밑에 보시면 예, OAI 사용을 체크해주면 OAI(원본 액세스 ID)를 선택해야하는데 

생성하지 않았으니 새 OAI 를 생성해야합니다. 아래에 간단하게 설명했습니다.

그리고 아래 버킷정책에 예, 버킷정책업데이트를 선택하시고 아래에 설정으로 갑니다.

생성은 생성 누르면 아래처럼 나오는데 오른쪽 아래 생성 누르시면 간단하게 생성이 됩니다.

 

 

---

위는 업데이트 이전

오늘 2022-10-06 다시한번보니 인터페이스가 변경되어있네요

 

원본액세스 제어 설정 선택하시고

밑에 제어설정 생성을 클릭합니다.(이미 있다면 선택하시고 넘어가시면 됩니다.)

그리고 밑에 s3 버킷정책을 업데이트 해야한다고 경고 하듯이

배포를 생성하고 난뒤 정책을 설정합시다.

 

제어 설정을 클릭하면 이렇게나오는데 기본값으로 놔두고 생성합니다.

(제어 설정 생성의 이름은 원본도메인과 일치해야합니다. 다르면 Access Denied 뜹니다.)

 

 

 

 

 

 

 

 

 

 

아래로 내리면 설정에 기본값 루트 객체가 있는데 거기에 index.html 을 입력합니다.

이걸 하지 않으면 배포도메인에 index.html을 추가적으로 입력을 해줘야 합니다.

예를들어 배포도메인 xxx.cloudfront.net 만 입력해도 알아서 index.html이 붙어 페이지가 뜹니다.

(절대 index.html 앞에 / 붙이면 안됩다. /index.html 이렇게 하면 안됨)

 

공식문서에서 아래와 같이 나와있습니다.

오리진경로
CloudFront가 항상 오리진의 특정 디렉터리에서 콘텐츠를 요청하게 하려면 슬래시(/) 뒤에 디렉터리 경로를 입력합니다. 경로 끝에는 슬래시(/)를 추가하지 마십시오. CloudFront에서 오리진 도메인 이름에 디렉터리 경로를 추가합니다.

 

 

 

그외 나머지는 기본값으로 설정했습니다.  

(더자세한건 document로...)

위와 같은 창이 나오는데

다른건 건드릴건 없어서 그냥 두고 생성합니다.

 

 

 

 

 

public으로 접근가능하게한 s3의 경우 

배포 도메인 이름 을 복사하여 주소에 복붙하면 해당 페이지가 나타납니다.

 

public 설정으로 했을경우 잘 나올것이지만 oai이용하려는 지금 설정에서는 index.html페이지가 나타나지 않을것입니다.

 

하지만 우리는 oai를 이용하여 cloudfront 에서만 접근가능하게 하고 싶습니다.

그래서 정책설정을 안했기때문에 아래 403 Access denied 오류가 발생할것입니다.

 

 

 

 

 

3. Access Deined 오류 처리 위한 정책 설정

 

정책설정이나 권한 설정이 잘못되면 Access denied (403)에러가 발생합니다.

 

위에서 말했듯이 s3에서 버킷정책 설정을 해줘야합니다.

 

다시 cloudfront로 접속합니다

 

해당 버킷에 들어가서

원본 - 설정변경할 원본 - 편집을 클릭합니다.

 

 

 

그럼 전과 다르게 밑에 이 정책 설명을 사용하여 CloudFront에 대한 액세스를 허용해야 합니다.

라고 나옵니다.

그옆에 정책복사를 클릭합니다.

 

그럼 정책 성명서 복사됨이라고 뜨면 클립보드에 해당 정책이 복사된것입니다.

 

이제 S3로 갑니다.

 

 

 

해당 s3 bucket의 권한탭에서

버킷 정책에서 편집을 클릭하여

cloudfront에서 복사한 정책을 붙여 주면 됩니다.

 

 

 

{
        "Version": "2008-10-17",
        "Id": "PolicyForCloudFrontPrivateContent",
        "Statement": [
            {
                "Sid": "AllowCloudFrontServicePrincipal",
                "Effect": "Allow",
                "Principal": {
                    "Service": "cloudfront.amazonaws.com"
                },
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::test-springboot-deploy/*",
                "Condition": {
                    "StringEquals": {
                      "AWS:SourceArn": "arn:aws:cloudfront::[account-number]:distribution/ED6BSKMEE9BKA"
                    }
                }
            }
        ]
      }

 

Action 에는 원하시는 접근권한 get put delete 등등... 을 추가하셔도 됩니다.

 

 

 

 

 

항상 이 경로를 통해 페이지를 표시하기 때문에 S3 에 폴더를 생성하여 index.html 을 넣어줘야합니다.

 

 

 

인터넷에서 html 아무거나 사용하여 올려 봤습니다.

 

그러면 페이지가 정상적으로 작동되는것을 확인하실수 있습니다.

 

 

 

 

4. 삭제

clodfront 삭제는 비활성화후 좀 기다렸다가 삭제하시면 됩니다.

 

비활성화후 몇분정도 지난후에 삭제란이 활성화 됩니다.

 

 

원본액세스 ID는 비용이 나가지 않지만 

나중에 헷갈릴수도 있으니 삭제합니다.

왼쪽에 보안 - 원본 액세스 ID 에 들어가셔서 OAI 선택하시고 삭제하시면 됩니다.

 

 

 

 

 

5. 캐싱설정

cloudfront를 설정하면서

결과를 보기위해 페이지에 들어가면 캐싱이 되어있어 전에 있던게 있다가 캐싱이 끝나면 반영이 되기 때문에 

바로 보기 위해선 설정을 해줘야합니다.

그래도 배포에 조금 시간이 걸리긴합니다.

 

 

 

 

1. CachingDisabled

 

cloudfront의 동작에서 캐싱을 안하고 싶은 원본을 선택하고 편집을 클릭합니다.

 

 

캐시 키 및 원본요청에서 cachingdisabled를 선택하고 저장합니다.

 

 

 

 

2. 캐싱 된 상태에서 캐시 지우고 확인(무효화 생성)

캐싱이 되고 있는 상태에서 변경사항을 바로 확인하고 싶을때 하는 방법입니다.

 

 

 

cloudfront 서비스에서 무효화 탭에 들어가

무효화 생성을 클릭합니다.

 

객체 경로에 /*을 하면 root 경로 아래 모든 파일의 캐싱을 무효화 하여 새로 업데이트한 내용이 바로 반영되게 하는 방법입니다.

 특정경로만 무효화(캐싱을 지우기) 하고 싶으시다면 특정 경로를 적어주시면 됩니다.

 

무효화에 요금이 있습니다. 1000개는 보통안하니 걱정은 안하셔도 됩니다.

매달 추가 비용 없이 초기 1,000개의 경로에 대한 무효화 요청을 할 수 있습니다.
이후로 무효화 요청 경로당 0.005 USD가 청구됩니다.

 

3. 배포 

cachingdisabled를 하거나 무효화를 생성해도 바로 반영이 되진 않습니다.

그 이유는 변경사항을 배포하는데 시간이 걸리기때문입니다.

 

첫페이지

 

 

cloudfront ID에 들어가서 화면

 

마지막 수정에 배포라고 나와있는데 이러면 아직 반영중이라는 뜻입니다.

 

기다리면

 

이런식으로 시간이 표기 됩니다.

 

끝으로...

왠진모르지만 인터넷 상의 사람들이 403 에러 뜨면 에러페이지에 index.html을 넣어

해당페이지가 제대로 뜨는것처럼 하는 분들이 대부분이더군요.

그렇게하면 겉으로는 잘된것처럼 보이지만 여러페이지를 라우팅하는경우 계속 index.html만 나타날것입니다.

라고 생각했는데 SPA구조에서는 이게 맞습니다. 

index.html 에서 처리하기때문에 모든 에러를 index.html로 라우팅하는게 맞습니다.

 

 

 

그리고 쓰기등의 권한의 경우 aws 서비스 에서 s3로 올리기 때문에 서비스 역할설정을하여 올리면 되고 허용하면 보안상 안좋습니다.

 

cloudfront는 캐싱 및 s3 권한, 정책설정이 굉장히 까다로운 작업이라고 생각합니다.

캐싱 정책을 더 들어가면 더까다롭겠지만 이만큼도 하는데 익숙해지기 시간이 꽤나 걸렸던것같습니다.

 

AWS cloudfront를 이용하여 더 다양한 설정을 하여 비용 및 latency를 줄이시길 바랍니다.

 

 

 

Reference

403 error

https://aws.amazon.com/ko/premiumsupport/knowledge-center/s3-website-cloudfront-error-403/

Amazon S3 웹 사이트 엔드포인트를 사용하는 CloudFront 배포의 액세스 거부 오류 해결

 

 

 

 

AWS cloudfront documents

https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/Introduction.html

Amazon CloudFront란 무엇입니까? - Amazon CloudFront

 

기본루트 지정

https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/DefaultRootObject.html

기본 루트 객체 지정 - Amazon CloudFront

 

S3 origin에 대한 액세스 제한

https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html#oac-permission-to-access-s3

Amazon S3 오리진에 대한 액세스 제한 - Amazon CloudFront