목적
카페24 이용하는 고객들을 위해서 기존 스크립트를 삽입하는 작업을 자동화로 변경하는 작업을 위해 카페24 연동 작업을 진행하였음.
위 작업을 통해 카페24와 dns를 연동시켜 스크립트 삽입하는 자동화 기능을 이용할 수 있음.
CORS 개념
교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.
CORS 구성
S3 bucket CORS 권한 변경
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"PUT",
"POST",
"DELETE"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [
"x-amz-server-side-encryption",
"x-amz-request-id",
"x-amz-id-2"
]
},
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"PUT",
"POST",
"DELETE"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [
"x-amz-server-side-encryption",
"x-amz-request-id",
"x-amz-id-2"
]
},
{
"AllowedHeaders": [],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [
"x-amz-server-side-encryption",
"x-amz-request-id",
"x-amz-id-2"
]
}
]
S3 bucket 정책 추가
"Resource": [
"arn:aws:s3:::xxx.io/xx/app_icon/*",
"arn:aws:s3:::xxx.io/xx/firebase_json/*",
"arn:aws:s3:::xxx.io/xx/push_noti/*",
"arn:aws:s3:::xxx.io/dist/*"
Cloudfront 설정변경
- Behaviors --> Path Pattern(Default) --> Allowed HTTP Methods "GET, HEAD" 에서 "GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE" 로 변경 --> Cached HTTP Methods "OPTIONS" 활성화 --> Cache Based on Selected Request Headers "Whitelist" 추가 --> "Access-Control-Request-Headers, Access-Control-Request-Methods, Origin" 추가
- Invalidations --> Create Invalidations --> Object Paths "/dist/cafe24_test.js" 추가