안녕하세요 브릭메이트 Dong입니다. 오늘은 AWS Cloudfront와 S3를 연동시켜 정적 웹사이트를 배포하는 과정을 한번 진행해 보도록 하겠습니다.
Cloudfront란?
CloudFront는 아마존 웹 서비스(AWS)에서 제공하는 콘텐츠 전송 네트워크(CDN) 서비스입니다. 전 세계에 분산된 엣지 로케이션에 캐시하여 사용자들에게 더 빠르고 안정적인 서비스를 제공합니다. 이는 사용자가 더 가까운 엣지 로케이션에서 콘텐츠를 가져오므로 응답 시간이 단축되고, 대용량 트래픽에 대비하여 확장성이 향상됩니다.
S3란 무엇일까?
S3는 사용자가 필요에 따라 데이터를 저장하고 검색할 수 있는 확장 가능한, 내구성이 뛰어난 저장소입니다. 데이터는 버킷(bucket)이라는 개별적인 저장소 컨테이너에 저장되며, 각 객체는 고유한 키를 가지고 있습니다. 또한, S3는 높은 내구성을 제공하여 데이터 손실이나 손상을 최소화한다는 장점이 있습니다.
그럼 바로 웹사이트 배포를 진행해보도록 하겠습니다!
1. 먼저 버킷을 생성해줍니다.
- 모든 퍼블릭 엑세스 차단 설정
- 나머지는 기본설정을 해주고 버킷을 생성해줍시다.
2. 버킷 정적 웹 사이트 호스팅 활성화
- 버킷 > 속성 > 정적 웹사이트 호스트 편집순서로 이동하면 됩니다!
기본페이지를 index.html파일로 설정해 줍시다.
3. 부트스트랩 템플릿 다운후 업로드
-
부트스트랩에서 무료로 제공하는 예제 템플릿을 다운해줍니다.
https://startbootstrap.com/#google_vignette
-
다운받은 파일을 버킷에 업로드 시켜줍시다.
-
S3 호스팅 엔드포인트 주소로 접속해봅시다
-
접속되지 않는 것을 확인할 수 있습니다.
퍼블릭 엑세스 요청을 막았기 떄문에 Public에 공개된 URL를 통해 접근할 수 없습니다. 그래서 Cloudfront을 통해 버킷에 접근을 해야합니다. 이 방법은 외부에서 직접적으로 S3에 접근할 수 없기 떄문에 보안에 효율적이며 이미지를 빠르게 캐싱할 수 있습니다.
4. Cloudfront을 생성하여 S3와 연동시켜줍니다.
- 도메인을 버킷을 선택해주고 Cloudfront에 대한 엑세스만 제할 할수 있게 원본 엑세스 제어 설정을 체크하고 OAC를 하나만들어 줍니다.
- Redirect HTTP to HTTPS를 선택해줍니다.
현재 테스트만 진행할 것이기 떄문에 Origin Shield나 WAF는 사용하지 않도록 하겠습니다.
- 기본값 루트 객체를 index.html으로 설정해줍니다
Cloudfront URL에서 S3 페이지를 가져오기위해선 Cloudfonrt URL/index.html을 통해 접속해야하는데 이 과정을 생략하고 바로 URL주소에서 페이지를 처리하기위해서 설정해줍니다!
5. S3 버킷 정책 업데이트 진행
- 버킷정책을 복사해줍니다.
- 버킷 > 권한 > 버킷정책 > 편집으로 복사해준 Json을 붙여줍니다.
6. Cloudfront 도메인 주소 확인
Cloudfront 도메인으로 정적 웹페이지를 볼 수 있습니다!
갑사합니다.
