본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

Cloudflare로 프록시 설정하기

Framer 사이트를 Cloudflare와 함께 사용하면 리버스 프록시(reverse proxy) 구성이 가능합니다. 이는 트래픽 관리, 맞춤형 라우팅, 인프라 정책 준수 등 고급 활용 사례에 적합합니다.

리버스 프록시란, 사이트와 방문자 사이에 Cloudflare와 같은 서비스를 두는 방식입니다. 이를 통해 다음과 같은 일을 할 수 있습니다.

• 내부 인프라와의 통합 (예: 방화벽, 라우팅 규칙 적용)

• 고급 로깅 및 규제 요건 준수

• CDN, 캐싱, 지역별 트래픽 관리 제어

하지만 Framer에서는 자체적으로 많은 기능을 제공하므로, 특정 인프라 또는 정책상의 필요가 있는 경우에만 리버스 프록시를 사용하는 것을 권장드려요.
Note: 리버스 프록시는 Scale 및 Enterprise 요금제에서만 지원됩니다.

Framer 사이트 설정하기

1. Framer 프로젝트를 열고 Site Settings → Domains로 이동하세요.

2. 무료 Framer 서브도메인을 추가 후 (예: example.framer.website)

3. Domains 섹션 하단으로 이동하여 Canonical URL을 설정하세요.
   예시: “Advanced” 입력란에 커스텀 도메인example.com을 입력하고 사이트를 발행합니다.

Cloudflare에서 도메인 설정하기

1. Cloudflare에 로그인 후 커스텀 도메인(예: example.com)을 추가합니다.

2. DNS 설정으로 이동하여 루트(@) 또는 서브도메인(app.example.com)을 더미 A 레코드(예: 192.0.2.1)로 지정합니다.

Note: Cloudflare DNS 관리 화면에서 A 레코드가 192.0.2.1을 가리키고 있으며, 프록시 상태가 활성화(주황색 구름 아이콘)로 설정되어 있습니다.

Cloudflare Worker 생성하기

1. Cloudflare 대시보드에서 Workers & Pages로 이동해 새 Worker를 생성합니다.

2. 모든 트래픽을 처리할 수 있도록 라우트를 지정합니다. 예시: example.com/*

3. Worker 코드 입력: 아래 예시에서 my-company.framer.website 부분을 실제 Framer 도메인으로 교체하세요.

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const url = new URL(request.url);
  return fetch('<https://my-company.framer.website>' + url.pathname + url.search, {
    method: request.method,
    headers: request.headers,
    body: request.body,
  });
}

설정 확인하기

• Worker가 올바른 도메인 라우트에 연결되어 있는지 확인합니다.

• 변경 사항이 적용되기까지 몇 분 걸릴 수 있어요.

• 브라우저 개발자 도구 또는 HTTP 헤더 검사 도구를 사용하여 트래픽이 Cloudflare를 통해 라우팅되는지 확인하세요.

• 문제가 있거나 도움이 필요하면 Framer 지원팀으로 문의해 주세요.

본 글은 Framer 공식 블로그의 ‘How to proxy with Cloudflare’를 번역·각색한 콘텐츠입니다.