목적

카페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" 추가