CDN과 S3을 사용하여 정적 웹사이트로 우회 하는 법

고객사에서 웹서버 작업기간 동안 정적 웹사이트로 되어있는 중지배너를 올려달라고 요청을 한 적이 있습니다.
아키텍처로 그리면 아래와 같이 됩니다.

S3에서 html을 호스팅하는 구조인데 AWS S3은 정적 웹사이트를 호스팅 하는 기능을 제공하고 있습니다.
실제로 s3 공식문서에서도 관련 내용을 상세하게 설명해 줍니다.
Amazon S3를 사용하여 정적 웹 사이트 호스팅

자연스레 S3에서 정적 웹사이트를 호스팅 할 수 있다면 CDN과 연결해서 사용하는 것도 가능하다.
[AWS] CloudFront와 S3 연결하기

이 글에서는 S3에서 정적 웹사이트를 CDN과 같이 사용하여 우회하는 법을 설명하겠습니다.

추가적으로 아래의 특수한 조건을 충족하여 구현하였다는 점 참고해 주시면 감사하겠습니다.
특수한 조건이란 아래의 2가지로

1. 기존 도메인을 유지하면서 모든 요청을 s3로 가게끔 경로 수정
2. 도메인 뒤에 /후 어떠한 값을 넣더라도 무조건 정적페이지 출력

여기서 필요한 리소스는 EC2, ALB, S3, CDN, SSL 인증서 입니다.
SSL인증서 제공 방법은 다양하기에 여기서는 다루지 않겠습니다.

우선 정적 웹사이트를 올리기 위해 s3를 먼저 생성해야 합니다.
s3 생성 가이드는 워낙 많기 때문에 아무거나 참고해서 생성하면 됩니다. 단 CND과 같이 사용하려면 퍼블릭 액세스는 막아야 합니다.

그 후 원하는 정적웹사이트를 버킷에 추가했습니다.

원래는 버킷 속성에서 바로 정적 웹사이트 호스팅을 할수가 있습니다.
하지만 CDN을 연결해서 호스팅 할 것이기에 굳이 s3에서는 설정을 하지 않았습니다.
이제 s3를 만들었으니 cdn과 연결을 해보겠습니다.
CDN으로 들어가서 배포 생성을 누르면 원본을 입력 하라는 항목이 나옵니다.

여기서 중요한 부분이 S3 버킷 엑세스 부분인데 CloudFront 원본 엑세스(OAI)를 사용해야지만 버킷을 퍼블릭 허용으로 하지않아도 외부에서 정적 웹사이트에 접속 할 수 있습니다.

잘 되는지 확인 하기 위해 url에 도메인을 입력해보겠습니다.

그럼 이제 s3에 올린 html파일로 도메인만 입력 했을때 자동으로 접근할 수 있도록 기본값 루트를 설정하겠습니다.
수정하려는 CDN에서 일반을 누르고 편집을 누르면 아래의 기본 루트객체를 수정이 가능 합니다.

변경을 완료하고 도메인만으로 접속을 해서 잘 들어 간다면 정상적으로 적용 된 것입니다.

그럼 이제 우회여부를 확인하기 위한 테스트 용 웹서버를 설치하여 연결해 보겠습니다.
ec2를 하나 생성하고 그 안에 Nginx를 설치했습니다. 그리고 cdn 연결에 필요한 ALB를 만들어 보겠습니다.
만약 ALB없이 바로 ec2로 연결하면 아래와 같이 origin을 찾을 수 없다는 에러가 발생한다.

이러한 문제로 ALB를 설치하고 ec2에 연결해야 합니다.(만약 ec2가 퍼블릭 IP를 가지고 있고 또한 DNS 서버에서 특정 도메인을 A레코드로 매핑되어 있다면 될수도 있을 것 같습니다.)
ALB를 설치하고 EC2와 연결을 완료하면 CDN 원본 목록에서 ALB 도메인을 확인 할 수 있습니다. 등록 방법은 앞서 S3 방법과 동일합니다.

그럼 원본 등록을 마쳤다면 동작에서 원본을 반드시 수정해야 합니다.

수정 후 도메인에 웹서버 안에 있는 index.html 주소를 입력하면 nginx가 나옵니다.

지금은 기본 루트 객체를 수정하지 않아서 index.html을 url에 입력해야 합니다. 기본 루트 객체를 디폴트로 수정하면 도메인만 입력해도 nginx 화면을 볼 수가 있습니다.
여기까지 위 조건 중 1번은 다 준비가 된 상황입니다.
동작에서 모든 작업의 원본을 S3로 변경 하기만 하면 아키텍처 처럼 경로가 형성됩니다.

그럼 남은건 도메인 뒤에 어떠한 값을 입력 하든지 간에 정적 웹사이트를 뜨도록 하는 방법입니다.
아래의 이미지는 아직 유효하지 경로를 입력해서 진입하면 Access Denied가 발생하도록 되어 있는 상태입니다.

여기서 오류 페이지에서 대신 중지배너를 호스팅 할 수 있도록 설정을 하면 원하는 우회 방식이 구현 됩니다.

현재 설정된 오류 페이지의 목록입니다. 오른쪽에 응답 페이지 경로를 보면 아무런 표시가 없습니다.
응답 페이지 경로에 S3 정적 웹사이트 위치를 추가하면 됩니다.

아까와 동일한 url을 입력하면 정적 웹사이트가 뜨는 것을 확인 할 수 있습니다.

오류 코드는 여러가지를 추가 할 수 있으니 상황에 맞춰서 설정 하면 됩니다.

이렇게 오류 페이지 까지 설정하면 위 조건을 모두 만족할 수 있는 우회 방식의 CND S3 정적 웹사이트 호출 된 걸 확인 하실 수 있습니다.