[AWS] Amazon CloudFront Functions 으로 URL 리다이렉트 구현하기
AWS Solution Architecture로 일하면서 다양한 AWS 서비스를 활용한 인프라 구성을 진행했다고 생각했는지만, CloudFront Fuctions에 대해서 잘 몰랐었던 내용이라서 이번 기회를 통해 블로그 글을 작성하고자 합니다.
제가 가지고 있는 여러 취미 중 하나가 덕질인데, 그중 최애의 프로필 홈페이지를 정적 웹사이트로 구성하여 AWS로 운영하고 있습니다.
정적웹사이트를 S3 + CloudFront를 활용해서 운영해서 좋은 점은 AWS 공식문서에 잘 나와있는데 발췌해서 확인하자면...
- S3 버킷이 자동으로 확장 및 축소되기 때문에 스토리지 공간을 계획하여 특정 크기를 할당할 필요가 없습니다.
- S3는 서버리스(Serverless) 서비스이기 때문에 파일이 저장되는 서버를 관리하거나 패치할 필요가 없습니다.
- CloudFront는 엣지 로케이션이라고 하는 데이터 센터의 전 세계 네트워크를 통해 콘텐츠 서비스를 제공합니다.
- 엣지 서버를 사용해 콘텐츠를 캐싱하고 서비스를 제공하면 최종 사용자가 위치한 곳에 더욱 가깝게 콘텐츠를 전송할 수 있기 때문에 성능이 향상됩니다.
- S3 버킷에 대한 부하를 줄일 뿐만 아니라 콘텐츠를 요청하는 사용자에게도 더욱 빠르게 응답할 수 있습니다.
- CloudFront를 사용해 콘텐츠 데이터를 전송하면 S3에서 직접 파일을 제공하는 것보다 더욱 비용 효율적이며, S3에서 CloudFront로 데이터를 전송하는 수수료도 없습니다.
- CloudFront의 보안 기능으로 애플리케이션의 보안을 강화할 수 있습니다.
이러한 특성으로 인해 저처럼 개발을 잘 못하는 사람이 인터넷에서 돌아다니는 무료 템플릿을 통해 HTML, CSS, JS 원본을 가지고 ChatGPT와 함께라면 다음과 같은 사이트도 쉽고 빠르게 만들 수 있으며, WAF 적용하고 트래픽이 늘어나더라도 한 달에 5달러 미만으로 부담 없이 글로벌 서비스를 개시할 수 있습니다.
이렇게 탄생한 홈페이지가 싱어송라이터 반오 Ban.O의 홈페이지가 되겠습니다!!
반오 (Ban.O) - 사람들의 꿈을 응원하는 반오
사람들의 꿈을 응원하는 싱어송라이터 반오입니다. 반오의 음악과 활동에 대한 정보를 제공합니다.
ban-o.art
혼자서 뚝딱뚝딱 만들다가 아무도 접속하지 않는 사이트는 의미가 없기 때문에 SEO 최적화를 진행하던 중 링크에 있는 내용을 기반으로 다국어 페이지를 제작하기로 마음먹게 되었습니다.
현재 프로젝트 구조는 다음과 같습니다.
├── index.html
├── css
│ └── ...
├── en
│ ├── index.html
│ └── ...
├── errors
│ └── ...
├── images
│ └── ...
├── js
│ └── ...
├── music
│ └── ...
├── videos
│ └── ...
루트 디렉터리에 한국어로 되어 있는 html 파일이 존재하고, en 디렉터리 안에 영어로 작성된 html 구조가 되었습니다.
CloudFront를 구성할 때 Default root object를 옵션으로 지정할 수 있기 때문에 https://ban-o.art/로 호출하더라도 index.html 파일을 불러올 수 있습니다.
문제는 en 디렉터리 안에 있는 파일들인데, 경로를 https://ban-o.art/en으로 호출하는 경우 403 권한오류가 나타나기 때문에 사용자는 반드시 https://ban-o.art/en/index.html으로 작성해야 하는 불편함이 있습니다.
물론 S3를 하나 더 만들고 거기에 영어 페이지를 추가하고 기존 CloudFront에 원본을 추가하여 Default root object를 구성할 수도 있겠지만 대단한 프로젝트도 아니고 단순 정적웹사이트를 이원화시켜서 운영하는 것은 아니라는 생각이 들어 해결방법을 찾아보기로 했습니다.
먼저 우리의 친구 ChatGPT에 문의하니 AWS Lambda@Edge를 추천해줍니다.
Lambda@Edge는 Amazon CloudFront의 기능 중 하나로서 애플리케이션의 사용자에게 더 가까운 위치에서 코드를 실행하여 성능을 개선하고 지연 시간을 단축할 수 있게 해 준다고 AWS 공식 문서에서 설명하고 있습니다.
하지만 아무리 생각해도 단순 리다이렉션 서비스를 구축하는데 Lambda를 사용하는건 적절하지 않아 보입니다.
기본적으로 Lambda는 콜드스타트 방식이기 때문에 트래픽이 많지 않은 저에게 적용할 경우 리다이렉션 하는데 1~2초 정도 기다려야 하는 상황이 생깁니다. 또한 Lambda가 절대 저렴한 서비스는 아니기 때문에 ChatGPT가 추천한 Lambda@Edge는 포기하고 다른 방법을 찾아보도록 합니다.
CloudFront 콘솔을 유심하게 살펴보던 중 눈에 보이지 않던 다른 항목이 보이기 시작합니다.
함수... 바로 구글링하여 CloudFront Functions에 대해 찾아보니 다음과 같은 사용 사례에 단기 실행 경량 함수에 적합하다고 합니다.
- 캐시 키 정규화 – HTTP 요청 속성(헤더, 쿼리 문자열, 쿠키 및 URL 경로)을 변환하여 캐시 적중률을 개선할 수 있도록 최적의 캐시 키를 생성합니다.
- 헤더 조작 – 요청 또는 응답에서 HTTP 헤더를 삽입, 수정 또는 삭제합니다. 예를 들어 모든 요청에 True-Client-IP 헤더를 추가할 수 있습니다.
- URL 리디렉션 또는 다시 쓰기 – 요청 정보에 따라 뷰어를 다른 페이지로 리디렉션하거나 한 경로에서 다른 경로로 모든 요청을 다시 씁니다.
- 요청 권한 부여 – 권한 부여 헤더 또는 다른 요청 메타데이터를 검사하여 JSON 웹 토큰(JWT)과 같은 해시된 권한 부여 토큰을 검증합니다.
사용 사례에 URL 리디렉션 또는 다시 쓰기가 적혀 있는 것을 보고 바로 CloudFront Functions를 사용하여 URL 리다이렉션 작업을 진행하도록 합니다.
다음 링크를 기반으로 CloudFront Functions 함수를 간략하게 작성하도록 합니다.
파일 이름이 포함되지 않는 요청 URL에 index.html 추가 - Amazon CloudFront
파일 이름이 포함되지 않는 요청 URL에 index.html 추가 다음 뷰어 요청 함수는 URL에 파일 이름이나 확장자를 포함하지 않는 요청에 index.html를 추가합니다. 이 함수는 Amazon S3 버킷에서 호스팅되는
docs.aws.amazon.com
먼저 CloudFront에서 함수 -> 함수 생성을 눌러 이름과 Runtime 정보를 입력합니다.
함수 코드 항목에서 다음과 같이 함수를 작성합니다.
function handler(event) {
const request = event.request;
const uri = request.uri;
if (uri === "/en") {
return {
statusCode: 302,
statusDescription: 'Found',
headers: {
"location": { "value": "/en/index.html" }
}
};
}
return request;
}
게시 탭에서 함수 게시를 클릭하고 배포 항목에 적용하고자 하는 CloudFront를 선택하면 CloudFront Functions 배포가 완료됩니다.
간단하게 URL 리다이렉션 정책설정이 완료되었습니다.
배포 즉시 사용할 수 있고, 정상적으로 https://ban-o.art/en-> https://ban-o.art/en/index.html 으로 넘어가는 것도 확인되었습니다.
생각보다 아주 간단하게 문제를 해결할 수 있었습니다.
만약 CloudFront Functions와 Lambda@Edge 중에서 사용을 고려 중이시라면 다음 표를 참고하시기 바랍니다.
간단하게 CloudFront Functions을 사용하여 URL 리다이렉션 정책을 구성해보았습니다. 서버리스 환경으로 서비스를 구축하는 경우 예상하지 못한 동작으로 인해 난해한 경험을 받으신 분들이 있으셨을 것이라 생각됩니다.
AWS는 생각보다 다양한 옵션들을 제공하고 있고, 콘솔만 꼼꼼하게 살펴보는 것만으로도 힌트를 얻을 수도 있으니 본 글이 문제를 해결하는게 있어 조금이나마 도움이 되었으면 좋겠습니다.
감사합니다.