[AWS] 프론트 부분 AWS 배포 - (S3, CloudFront 연동)

프로젝트 배포를 위해 프론트 부분을 배포하고자 한다.

프론트 부분은 직접 수동으로, s3 버킷 안에 업로드를 해주고, s3를 cloudfront로 연동시켜주어서 마무리 할 계획이다.

 

CloudFront를 연동하는 이유는, 글로벌 서비스를 위한 캐싱 데이터의 사용과, s3에 집적 접근하는게 아닌, 클라우드 프론트를 이요하여 캐싱 데이터에 접근하는 것이기 때문에 AWS 비용 절감도 할 수 있기 때문이다.

 

쉽게 말해서

CloudFront란, 정적파일들을 캐싱해주는 서비스이다. (정적파일 호스팅까지)

 

S3 만드는방법

https://thalals.tistory.com/139

aws s3 ( AWS 파일 업로드 저장소 )

CloudFront 배포하는 방법

https://thalals.tistory.com/141

[AWS] CloudFront CDN서비스를 이용해서 Front 구성하기

 

---

S3 버킷만드는 방법과 Cloudfront로 배포하는 방법은 전의 게시물에서 포스팅을 했는데,

 

이번에는 cloudfront에서 배포를 성공을해도, S3에 접근하지 못하는 경우의 해결방법에 대해서 포스팅 하고자 한다.

 

그전에 주의해야할 점

1. S3 버킷에 프론트 페이지를 분리해서 배포하는 것이기 때문에, index.html 파일은 루트 경로에 있는게 좋다.

2. 스프링 프로젝트에서는 타임리프 구문을 이용했기 때문에, static 폴더나 template폴더안에 분리해서 경로를 설정해주었는데, 프론트를 분리해서 배포하는 것이기 때문에 js,css,img등 모두 루트경로로부터 시작되어야한다.

예시 - 모두 루트 경로로부터 존재해야됨

 

 

401 AcessDenided 권한 

그 다음 S3에서 객체에 접근할 수 있는 권한을 주어야한다.

버킷 권한 > 버킷 정책 편집을 누른다.

 

그 다음 권한을 

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::[버킷 이름]/*"
        }
    ]
}

이런식으로 편집을 해준다.

 

구글링을 "cloudfront 에 s3 연결 후 access denied 뜰 때" 라고 검색을 했을 때는, 이제 Cloudfront에서 s3에 접근 권한만을 주면 되는 줄알고

 

클라우드 프론트 보안 액세스 ID를 만들어

아래와 같이 cloudfront에게 접근 권한을 주었다.

 "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity [OriginAccessIdentity 의 ID]"
            },

 

이렇게 하면, 모두 public으로 되어있는 s3 file에는 접근할 수 있지만, 일일이 모든 파일의 접근 권한을 열어주어야하는 번거러움이 있다. (그렇지 않다면 403 error 가 나온다)

 

그래서 principal : * 이렇게 주어 모든 권한을 열어주었다.

 

더 좋고 보안적인 방법이 있겠지만, 연습을 위한거니까 이정도로 마무리한다,,,ㅠ

이미지, css 등 403에러없이 잘 나온다!