본문 바로가기

⭐ AWS/CloudFront

CloudFront와 S3 연동

# CloudFront에서 배포 하기

1. CloudFront 배포 설정하기 with S3

- 클라우드 프론트도 도메인을 가지고 있다.

해당 도메인을 찌르면 S3에 설정한 정적 데이터를 호출한다.

- 보안 탭을 보면 WAF를 설정할 수 있다.

- 원본은 생성된 내용을 자세히 확인 할 수 있다.

- 만약 원본 엑세스 제어 설정(권장) 내용을 선택 할 수 없으면 오른쪽에 Create new OAC를 클릭하여 신규로 생성한다.

- 동작은 아래와 같이 우선순위를 설정할 수 있고, 경로 패턴을 통해 해당 경로로 들어오는 트래픽을 분산할 수 있다.

- 오류 페이지는 오류 페이지와 관련된 내용을 정의 할 수 있다.

- 무효화는 CloudFront가 캐싱하고 있는 정보를 삭제한다.

2. CloudFront와 연결된 S3 설정

- html 파일은 아래의 링크에서 생성

2024.04.12 - [HTML] - html 코드를 온라인에서 수정하는 사이트

 

html 코드를 온라인에서 수정하는 사이트

# html 코드를 온라인에서 수정하는 사이트 https://ko.rakko.tools/tools/129/ 온라인 HTML 편집기 : 생성기 및 편집기 | RAKKOTOOLS🔧 온라인 및 무료 HTML 편집기. 입력 텍스트, 테이블 등으로 HTML 생성 및 편집

may9noy.tistory.com

- index.html 파일 설정은 아래의 링크에서 확인

2023.11.14 - [⭐ AWS/S3] - S3 버킷 정적 웹 호스팅 사용하기

 

S3 버킷 정적 웹 호스팅 사용하기

# S3 버킷 정적 웹 호스팅 사용 - S3 버킷의 속성을 클릭 후 가장 아랫부분에 아래의 화면처럼 정적 웹 사이트 호스팅 편집을 할 수 있다. - 활성화를 클릭하면 아래의 옵션을 지정 할 수 있다. index.

may9noy.tistory.com

3. S3 설정은 아래와 같다.

- 객체

객체는 현재 리소스들을 보여준다.

- 권한이 중요해서 권한을 보면 아래와 같다.

버킷 정책이라는 항목에서 값을 넣을수 있는데 해당 내용은 CloudFront에서 정책을 가져올 수 있다.

위에 원본 편집 항목에서 정책 복사를 선택하여 아래의 내용을 가져올 수 있다.

- 정책 복사를 통해 가져온 내용을 버킷 정책에 붙여 넣는다.

그러면 CloudFront와 S3같 연동은 문제없이 된다.

추가로, 속성 탭의 정적 웹 사이트 호스팅은 아래와 같이 비 활성화로 설정 한다.

4. 결과는 아래와 같다.

- 클라우드 프론트의 배포 도메인 이름/index.html 로 접근하면 아래와 같이 접근이 가능하다.

- 끝 -