StudyDad

운영 콘솔 아키텍처 시리즈 8/9관리자 페이지를 만들다 보면 CORS 에러를 자주 만난다. 로컬에서는 되는데 배포하면 안 되고, GET은 되는데 POST는 안 되고, 쿠키를 보내면 갑자기 막힌다.CORS는 브라우저가 까다롭게 구는 문제가 아니다. 브라우저 보안 모델이다. 특히 React SPA처럼 정적 파일 도메인과 API 도메인이 분리된 구조에서는 CORS와 쿠키 인증을 처음부터 같이 설계해야 한다.문제 상황운영 콘솔은 console.example.com에서 서빙된다. API는 api.example.com에 있다. 두 주소는 host가 다르므로 서로 다른 origin이다.브라우저의 origin은 세 가지로 결정된다.scheme + host + port따라서 다음 두 주소는 다른 origin이다.http..

운영 콘솔 아키텍처 시리즈 5/9Lambda를 HTTP로 호출하려면 가장 단순한 방법은 Lambda Function URL이다. 별도 게이트웨이 없이 함수에 HTTPS URL을 붙일 수 있다. 작은 API라면 이 방식이 충분할 때도 많다.그런데 운영 콘솔의 API 앞에는 API Gateway를 뒀다. 단순히 "원래 그렇게 하니까"가 아니라, 브라우저 기반 콘솔에서 필요한 운영 기능을 한곳에서 처리하기 위해서였다.문제 상황운영 콘솔 API는 브라우저에서 호출된다. 정적 SPA는 console.example.com에서 서빙되고, API는 api.example.com 또는 클라우드 API 도메인에서 제공된다. 이 순간 CORS가 발생한다.또한 API는 하나의 엔드포인트가 아니었다. 동기화, 조회, 리포트 생성..

기술 실무 설계 시리즈 5/8API Gateway는 종종 Lambda 앞에 붙이는 프록시처럼 여겨진다.요청을 받아 Lambda로 넘겨주는 역할 말이다.하지만 브라우저 기반 운영 콘솔에서는 API Gateway를 단순 프록시로 보면 부족하다.CORS, 라우팅, 스로틀링, 로그, 인증 확장성, 백엔드 교체 가능성까지 포함한 운영 경계로 보는 편이 더 맞다.API 앞단에는 정책이 필요하다프론트엔드가 API를 호출할 때 단순히 백엔드 함수만 있으면 되는 것이 아니다.운영 중에는 다음 정책이 필요하다.어떤 path를 허용할 것인가어떤 method를 허용할 것인가어떤 origin에서 호출할 수 있는가preflight는 어디서 처리할 것인가요청이 너무 많으면 어떻게 제한할 것인가어떤 로그를 남길 것인가나중에 백엔드를..

AWS 실전 운영 시리즈 11/12CloudFront를 S3 앞에 붙이는 구성은 익숙하다.하지만 CloudFront를 EC2나 API 서버 앞에 둘 때는 조금 다른 문제가 생긴다.CloudFront의 Custom Origin에는 origin domain name이 필요하다. 운영 중인 API 서버가 EC2 IP로만 접근 가능하다면, CloudFront origin으로 쓰기 위해 별도의 도메인을 만들어야 할 수 있다.이 글은 API용 CloudFront 앞뒤에 왜 도메인을 두 개 만들었는지 정리한 것이다.문제 상황운영 콘솔에는 상주 API 서버가 있었다.이 서버는 대시보드와 분석 API처럼 짧고 잦은 요청을 처리했다.사용자는 다음 도메인으로 API를 호출하게 하고 싶었다.api.example.com그리고 ..

AWS 실전 운영 시리즈 5/12브라우저에서 API를 호출할 때 CORS 오류를 만나면 당황스럽다.서버는 멀쩡한 것 같은데 브라우저가 요청을 막는다. Postman에서는 되는데 화면에서는 안 된다.운영 콘솔처럼 React SPA와 API 도메인이 분리된 구조에서는 CORS가 설계 요소다.특히 JSON 요청이 많다면 preflight OPTIONS 요청을 어떻게 처리할지 정해야 한다.CORS preflight란 무엇인가브라우저는 다른 origin으로 특정 요청을 보내기 전에 OPTIONS 요청을 먼저 보낼 수 있다.이 요청을 preflight라고 한다.예를 들어 다음 조건에서는 preflight가 발생한다.Content-Type: application/jsonAuthorization 헤더 사용PUT, DE..

AWS 실전 운영 시리즈 4/12AWS API Gateway에는 크게 REST API와 HTTP API가 있다.HTTP API는 더 가볍고 저렴하고 빠르다. 그래서 새로 만들 때는 HTTP API가 먼저 떠오를 수 있다.하지만 항상 HTTP API가 정답은 아니다.운영 콘솔처럼 브라우저 기반 SPA, 여러 endpoint, CORS preflight, API Key, 요청 검증, MOCK 응답 같은 요소가 중요하다면 REST API가 더 나을 수 있다.문제 상황운영 콘솔의 프론트엔드는 별도 도메인에서 동작했다.API는 Lambda를 통해 제공되었고, 여러 path와 method가 있었다.필요한 것은 단순히 Lambda를 HTTP로 호출하는 것만이 아니었다.path별 라우팅CORS preflight 처리O..