AWS CloudFront를 리버스 프록시로 사용해보자
date
Nov 25, 2023
slug
cloudfront-as-reverse-proxy
summary
AWS Route53, CloudFront, S3를 이용해서 죽은 URL 살리기
thumbnail
status
publish
현재 운영중인 프로덕트 게시글들의
URL
을 SEO 및 관리차원에서 서브 도메인에서 메인 도메인으로 옮기는 작업을 진행했다.하지만, 이렇게되면 기존에 검색엔진이 읽어간 URL들은 존재하지 않는 URL로 처리될 것이고 사용자는 해당
URL
로 접근시 없는 사이트로 인식되는 문제가 존재할 것이다. 😟 인프라 추상화 💭
AWS 사용 가정
- 사용자가 이전 URL(서브 도메인)로 접근
- 사용자의 이전 URL(서브 도메인)에 따라서 원하는 URL 계산
- 사용자는 바뀐 URL(메인 도메인)로
308 Permanent Redirect
‘위와 같은 로직을 인프라에서 어떻게 구현할까?’ 고민을 하는 와중
CloudFront
와 S3
를 이용하는 방법을 생각했다.일반적으로 CRA 프로젝트를 배포할 때 S3의 정적 파일 호스팅을 이용한다. 이를 착안해서 이전 URL을 S3 호스팅에 연결하고, 앞단의 CloudFront으로 사용자의 접근을 원하는 곳으로 이동시키는
Redirect 로직
를 두면 된다.![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F026510f4-b805-4d36-a3e2-e7b8837f6c19%2Fc90c78d7-01ff-4eb5-ba8c-1dce8620161e%2F%25E1%2584%2589%25E1%2585%25B3%25E1%2584%258F%25E1%2585%25B3%25E1%2584%2585%25E1%2585%25B5%25E1%2586%25AB%25E1%2584%2589%25E1%2585%25A3%25E1%2586%25BA_2023-11-26_%25E1%2584%258B%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE_5.08.57.png?table=block&id=6fe66778-f76e-414e-b556-b1c5e59d0ac3&cache=v2)
Redirect 로직
은 AWS의 Lambda@Edge 혹은 CloudFront Function을 이용하면 되는데, 해당 로직은 매우 간단한 함수이므로 CloudFront Function을 이용할 예정이다. (Lambda@Edge 요금의 1/6이다..😳)기존의 서브 도메인으로 연결된 EC2 내부 코드(nginx 코드)로 해당 Redirect 로직을 구현하는 방법도 생각했지만, 결국 실시간 요금 때문에 효과적인 방법은 아니라고 판단했다.
인프라 구체화
legacy.naver.com
→ naver.com
로 주소를 옮기는 예시S3
버킷 만들기
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F026510f4-b805-4d36-a3e2-e7b8837f6c19%2F7f365496-05b8-4fad-99fa-7e029bac6967%2F%25E1%2584%2589%25E1%2585%25B3%25E1%2584%258F%25E1%2585%25B3%25E1%2584%2585%25E1%2585%25B5%25E1%2586%25AB%25E1%2584%2589%25E1%2585%25A3%25E1%2586%25BA_2023-12-13_%25E1%2584%258B%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE_11.03.16.png?table=block&id=132def7b-b8c4-4374-8e5a-1caf39e99c0e&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F026510f4-b805-4d36-a3e2-e7b8837f6c19%2Fe106d74c-86ca-415e-8dd8-fd1b69f3eec4%2F%25E1%2584%2589%25E1%2585%25B3%25E1%2584%258F%25E1%2585%25B3%25E1%2584%2585%25E1%2585%25B5%25E1%2586%25AB%25E1%2584%2589%25E1%2585%25A3%25E1%2586%25BA_2023-12-13_%25E1%2584%258B%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE_11.02.19.png?table=block&id=f4f086a9-92f9-46e6-a34d-9f4a29ee534a&cache=v2)
- 버킷 이름은
이전 URL의 Host Name
로 정해주고 생성한다.
- 외부에서 접근을 위해 퍼블릭 엑세스 차단을 풀어준다.
버킷 속성 변경 (정적 웹 사이트 설정)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F026510f4-b805-4d36-a3e2-e7b8837f6c19%2F1cf90d5d-3e8e-4cee-a0f6-504edf7ecdb8%2F%25E1%2584%2589%25E1%2585%25B3%25E1%2584%258F%25E1%2585%25B3%25E1%2584%2585%25E1%2585%25B5%25E1%2586%25AB%25E1%2584%2589%25E1%2585%25A3%25E1%2586%25BA_2023-12-03_%25E1%2584%258B%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE_5.41.17.png?table=block&id=9b6ceb96-c2c9-40ab-9051-6b88848e158f&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F026510f4-b805-4d36-a3e2-e7b8837f6c19%2Ff89b6462-f8f0-4220-8395-0e644ae0e404%2F%25E1%2584%2589%25E1%2585%25B3%25E1%2584%258F%25E1%2585%25B3%25E1%2584%2585%25E1%2585%25B5%25E1%2586%25AB%25E1%2584%2589%25E1%2585%25A3%25E1%2586%25BA_2023-12-03_%25E1%2584%258B%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE_5.40.50.png?table=block&id=bb2da8f1-bde5-47d2-9f8d-c7ef03c32baa&cache=v2)
- 생성된 버킷의 속성(Property) 탭에서 제일 하단에 존재하는
정적 웹 사이트 호스팅
편집에서 호스트 이름을현재 URL(Redirect URL)의 Host Name
으로 설정한다.
- CloudFront와 S3 연결을 위해
버킷 웹 사이트 Endpoint
를 복사한다.
CloudFront
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F026510f4-b805-4d36-a3e2-e7b8837f6c19%2F0cc4f10a-92e0-452e-ba48-c477f7453299%2F%25E1%2584%2589%25E1%2585%25B3%25E1%2584%258F%25E1%2585%25B3%25E1%2584%2585%25E1%2585%25B5%25E1%2586%25AB%25E1%2584%2589%25E1%2585%25A3%25E1%2586%25BA_2023-12-03_%25E1%2584%258B%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE_5.43.04.png?table=block&id=46228551-5355-4845-841f-9c4bba9eca4a&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F026510f4-b805-4d36-a3e2-e7b8837f6c19%2F8b79a7f2-0e7c-47c0-a125-dbfc40a79cb0%2F%25E1%2584%2589%25E1%2585%25B3%25E1%2584%258F%25E1%2585%25B3%25E1%2584%2585%25E1%2585%25B5%25E1%2586%25AB%25E1%2584%2589%25E1%2585%25A3%25E1%2586%25BA_2023-11-29_%25E1%2584%258B%25E1%2585%25A9%25E1%2584%258C%25E1%2585%25A5%25E1%2586%25AB_12.17.14.png?table=block&id=cec3d268-1043-43b1-92cb-e38e99d05d27&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F026510f4-b805-4d36-a3e2-e7b8837f6c19%2Fa1a84764-caa0-427d-a7d9-284833c34776%2F%25E1%2584%2589%25E1%2585%25B3%25E1%2584%258F%25E1%2585%25B3%25E1%2584%2585%25E1%2585%25B5%25E1%2586%25AB%25E1%2584%2589%25E1%2585%25A3%25E1%2586%25BA_2023-11-29_%25E1%2584%258B%25E1%2585%25A9%25E1%2584%258C%25E1%2585%25A5%25E1%2586%25AB_12.30.21.png?table=block&id=fcfd292d-a492-41f6-9ddc-c06d1fc7f6cd&cache=v2)
- CloudFront 생성을 하는데,
S3
에서 만든버킷 웹 사이트 Endpoint
를 원본 도메인에 넣어준다.
- 프로토콜과 HTTP 방법은 자유!
- 설정에서 도메인
SSL
인증서를 등록해준다. - 위 예시에서는
*.naver.com
CloudFront Function
생성된 CloudFront Domain Name(Distribution domain name)으로 접속해보면 아직 이전 URL로 연결된다. 이제 Redirect 로직을 CloudFront Function으로 설정해줘야 한다.
- Redirect 함수 생성
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F026510f4-b805-4d36-a3e2-e7b8837f6c19%2F6672fc9e-affa-4aa5-a24b-4e6053a4cef0%2F%25E1%2584%2589%25E1%2585%25B3%25E1%2584%258F%25E1%2585%25B3%25E1%2584%2585%25E1%2585%25B5%25E1%2586%25AB%25E1%2584%2589%25E1%2585%25A3%25E1%2586%25BA_2023-11-29_%25E1%2584%258B%25E1%2585%25A9%25E1%2584%258C%25E1%2585%25A5%25E1%2586%25AB_1.08.46.png?table=block&id=5f1740a7-45a8-47e7-adf9-c418653182eb&cache=v2)
function handler(event) { const request = event.request; const path = request.uri; const redirectHandler = (path) => { let redirectURL = `https://naver.com`; // 새로운 URL ... return redirectURL }; const response = { statusCode: 308, statusDescription: 'Permanent Redirect', headers: { location: { value: redirectHandler(path) } }, }; return response; }
Redirect 로직을 서비스의 방향성에 맞게 JavaScript 함수로 만든 후
Publish
한다.- CloudFront에 연결하기
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F026510f4-b805-4d36-a3e2-e7b8837f6c19%2Faa5f794e-2580-4d79-8643-09ee9c865e0a%2F%25E1%2584%2589%25E1%2585%25B3%25E1%2584%258F%25E1%2585%25B3%25E1%2584%2585%25E1%2585%25B5%25E1%2586%25AB%25E1%2584%2589%25E1%2585%25A3%25E1%2586%25BA_2023-12-13_%25E1%2584%258B%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE_11.23.24.png?table=block&id=79d66679-a8f8-458d-bb07-1d51f05f874d&cache=v2)
CloudFront > Behaviors
설정에서 Viewer request에 만든 함수를 추가해준다. 이제 사용자(Viewer)가 해당 CloudFront Domain Name으로 접근하면 CloudFront Function이 실행될 것 이다. Route 53
마지막으로 CloudFront에 도메인 이름을 연결해줘야 한다.
Create Record
를 실행한다.- naver SSL 인증서는 실제로 갖고있지 않기 때문에, 예시는
*.fapis.io
Record Name
를 이전 URL로 지정한다.
Record Type
은A
,Route traffic to
는 위에서 지정한 CloudFront Domain Name(Distribution domain name)로 연결한다.
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F026510f4-b805-4d36-a3e2-e7b8837f6c19%2Fcf3f7964-98de-49b3-92b7-c905a28bfbac%2F%25E1%2584%2589%25E1%2585%25B3%25E1%2584%258F%25E1%2585%25B3%25E1%2584%2585%25E1%2585%25B5%25E1%2586%25AB%25E1%2584%2589%25E1%2585%25A3%25E1%2586%25BA_2023-12-03_%25E1%2584%258B%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE_5.28.41.png?table=block&id=7a167024-5a89-41bf-9d50-810f6a911fe0&cache=v2)
Redirect 확인
curl -i 이전주소
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F026510f4-b805-4d36-a3e2-e7b8837f6c19%2Fe6dc76ab-0775-4af4-a602-8259cbbd71c5%2F%25E1%2584%2589%25E1%2585%25B3%25E1%2584%258F%25E1%2585%25B3%25E1%2584%2585%25E1%2585%25B5%25E1%2586%25AB%25E1%2584%2589%25E1%2585%25A3%25E1%2586%25BA_2023-12-13_%25E1%2584%258B%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE_11.38.03.png?table=block&id=fc289187-887a-4b70-a8bb-ee69c8089c00&cache=v2)
해당 명령어를 통해서 Redirect를 확인해보자.
Via 헤더
에 CloudFront를 통해 301 Redirect 된 모습이 확인된다면 성공이다. 🎉