[Aws] Cloudfront 와 function을 이용한 점검 프록시 만드기

gmyun1999·2024년 8월 22일

aws cloudfront cloudfront function route 53

AWS

목록 보기

3/4

순서

EB를 생성하고 세팅한다.
mocked route 53 레코드를 생성한다
cloudfront 및 cloud function을 생성한다.
mocked route 53 레코드를 삭제한다
cloudfront의 대체 도메인을 넣어준다.
실제 route 53 레코드를 생성한다

→ 이러는 이유: cloudfront의 Cname을 넣고싶으면 ssl 인증서가 존재해야한다. 근데 ssl 인증서를 받으려면 해당 도메인이 존재해야한다. 따라서 ssl 인증서를 받는 용도로 도메인을 생성한다음. 해당 도메인을 지워버려야 Cname으로 연결 가능하다. (안지우면 다른 aws 서비스를 바라 보고있다고 나옴)

- EB 생성 및 세팅은 이 글에서는 다루지않습니다.

- 순서대로 진행되니 그대로 따라하면됩니다.

2. mocked route 53 레코드를 생성한다

이유: cloudfront 배포 대체도메인(CName)을 생성하기위해서

가정: 백엔드 도메인을 가지고있는 상태텍스트

호스팅 영역에서 레코드 생성

원하는 레코드 이름 넣고, 값에 아무런 값 밀어넣기(mocked)
레코드 생성

3. cloudfront 및 cloudfunction 생성

배포 > 배포 생성 에 들어간후 Origin domain에 EB 혹은 Alb 도메인 입력
- origin path의 경우 origin으로 모든 request가 들어왔을때 추가로 붙여주는 path를 의미한다 ex) example.com 이 요청되고, origin path가 /post 이면 example.com/post 인채로 origin 으로 들어간다.
- Enable Origin Shield는 cloudfront 엣지 로케이션과 origin 사이에 추가적인 캐싱 레이어를 두는거다. 따라서 캐시 확인을 매번 오리진과 하지않고, 해당 캐싱레이어에서 수행하는걸의미한다. 단 돈드니깐 하지말자.

2. 기본 캐시 동작 설정

아마 EB를 선택했을시 자동으로 알맞은 http 방법을 골라줄거다. 우리는 백엔드 서버와 연결되어 있으니 허용된 방법을 GET, HEAD, Put, Post, path, delete 모두 선택해야한다.

3. 캐시 키 및 원본 요청

EB를 선택했으면 자동으로 EB에 맞는 캐시 정책 및 원본 요청 정책을 선택해준다. 여기서 추가로 설정하고싶으면 정책을 만들어서 쓸수있다.
응답 헤더 정책의 경우 Eb가 응답한 Reponse 해더에 추가로 뭘더 붙이고싶거나 그런경우 해주면되고, 현재로서는 필요없다.

4. 함수 연결 및 웹어플리케이션 방화벽 설정

이부분에 cloudfront function을 붙여주면된다. 아직 만들지않았으니 우선 냅두자.
웹 어플리케이션 방화벽의 경우 ddos 공격, 쓰레기 트래픽을 모두 막아주는 역할을 하는데 이역시 돈이 들기 때문에 하지말자.

5. 설정

대체 도메인이름: 우선 비워둡시다. 지금 시점에서 넣을수가없음.
ssl Certificate: 아까 생성했던 route 53의 레코드 도메인에 해당되는 인증서를 만들면된다. (인증서를 만들기위해서는 해당 도메인이 route 존재해야함)

6. cloudfunction 만들기

함수 > 함수 생성 클릭후 이름 지은다음 생성하기

빌드 탭에 들어가서 request를 가로채서 처리할 함수 작성

        function handler(event) {
        var request = event.request;
    
       
        var type = "prod";
    
        if (type === "prod") {
            return request;
        } 
    
        if (type === "maintenance") {
            var response;
    
            if (request.method === "OPTIONS") {
                // OPTIONS 요청 처리
                response = {
                    statusCode: 200,
                    statusDescription: 'OK',
                    headers: {
                        "access-control-allow-origin": { "value": "*" },
                        "access-control-allow-methods": { "value": "GET, POST, OPTIONS" },
                        "access-control-allow-headers": { "value": "Content-Type, Authorization" }
                    }
                };
            } else {
                var maintenanceStart = "2024.08.22, 10:20am"; // 시작 시간
                var maintenanceEnd = "2024.08.22, 10:30am";   // 종료 시간
    
                response = {
                    statusCode: 503,
                    statusDescription: 'Service Unavailable',
                    headers: {
                        "access-control-allow-origin": { "value": "*" },
                        "access-control-allow-methods": { "value": "GET, POST, OPTIONS" },
                        "access-control-allow-headers": { "value": "Content-Type, Authorization" },
                        "access-control-expose-headers": { "value": "maintenance-start, maintenance-end" },
                        "maintenance-start": { "value": maintenanceStart },
                        "maintenance-end": { "value": maintenanceEnd }
                    }
                };
            }
    
            return response;
        }
    }

프리플라이트 요청도 해당 함수에서 처리해줘야함 (Options)
cors 헤더를 추가해줘야함
503 status의 경우 body에 집어넣을수가없음. 따라서 사용자 정의 헤더 생성해야함
- 사용자 정의 헤더를 브라우저가 읽으려면 “access-control-expose-headers" 에 해당 헤더를 넣어줘야함