Webflow CMS Behind CloudFront: 동일 도메인에서 동적 및 정적 페이지 제공

Source: Dev.to

번역을 진행하려면 실제 본문 텍스트가 필요합니다.
위의 링크에 있는 전체 글이나 번역하고 싶은 부분을 복사해서 제공해 주시면, 요청하신 대로 마크다운 형식과 코드 블록은 그대로 유지하면서 한국어로 번역해 드리겠습니다.

소개

AWS에 프런트엔드를 배포하는 일반적인 방법은 S3, CloudFront, 그리고 Route 53을 사용하는 것입니다. 간단하고 비용 효율적이며, 많은 팀이 수년간 이 구성을 운영합니다.

팀이 결국 일부 공개 페이지(예: 홈페이지나 블로그)를 Webflow와 같은 CMS로 옮기는 경우도 매우 흔합니다. 이러한 전환은 실용적인 이유에서 비롯됩니다:

• 마케터가 엔지니어링 개입 없이 콘텐츠를 게시할 수 있습니다.
• SEO 워크플로우가 쉬워집니다.
• 디자인 반복이 더 빨라집니다.

문제는 두 가지를 모두 수행하고 싶을 때 발생합니다:

• company.com 및 /blogs → Webflow에서 관리
• 나머지 모든 페이지(특히 /dashboard/*와 같은 동적 페이지) → S3에 유지

모든 것이 같은 도메인 아래에 존재해야 하며, 리디렉션이나 서브도메인은 허용되지 않습니다.

문제: 트래픽 라우팅

이 글에서는 배포 과정에서 이 문제를 어떻게 해결했는지 단계별로 설명합니다. 이 접근 방식으로 할 수 있는 일은 다음과 같습니다:

• CloudFront를 단일 진입점으로 유지합니다.
• Webflow 페이지와 S3‑백엔드 페이지를 동일한 apex 도메인에서 제공합니다.
• CloudFront에서 트래픽을 영구적으로 우회하지 않고 Webflow 도메인 인증을 처리합니다.

이 설정은 프로덕션 환경에서 안정적으로 작동하며, 다른 곳에 명확히 문서화되지 않은 여러 함정을 피합니다.

고수준 솔루션

Webflow로 라우팅 로직을 옮기려 시도하거나(엔터프라이즈 플랜이 필요할 수 있음) 새로운 프록시 레이어를 도입하는 대신, 우리는:

1. CloudFront를 단일 엣지로 유지합니다.
2. Webflow와 S3를 오리진으로 취급합니다.
3. 경로 기반 동작을 사용하여 각 요청이 어디로 가는지 결정합니다.

요청 흐름 (런타임)

Route53 → CloudFront
   ├── /dashboard/* → S3
   └── /*          → Webflow

브라우저 관점에서는 모든 것이 여전히 company.com에서 오는 것으로 보입니다. 리다이렉트도 없고, 서브도메인도 없으며, Webflow가 관리하는 페이지와 S3가 지원하는 페이지 사이에 눈에 보이는 경계가 없습니다.

Source: …

502 Bad Gateway가 나타나는 이유

Webflow를 CloudFront의 오리진으로 설정하는 것은 간단합니다. ALB나 외부 서비스와 마찬가지로 Webflow‑호스팅 사이트를 가리키는 커스텀 오리진을 만들면 됩니다.

하지만 그것만 하면 Webflow용 경로에서 502 Bad Gateway 오류가 발생할 가능성이 높습니다. 그 이유는 Webflow가 퍼블리싱을 허용하기 전에 도메인 소유권 확인을 요구하기 때문입니다.

Webflow 인증 흐름

1. TXT 레코드 – 소유권을 증명합니다.
2. A 레코드 또는 CNAME – 트래픽을 직접 Webflow로 라우팅합니다.

이 흐름은 Webflow가 트래픽의 최종 목적지일 때는 정상적으로 동작합니다. 하지만 우리 아키텍처에서는 DNS가 CloudFront를 가리켜야 하므로, 다음과 같은 불일치가 발생합니다:

Webflow UI는 두 가지 관점을 혼합해서 보여줍니다:

• 제어‑플레인 – 인증 (TXT 레코드).
• 데이터‑플레인 – 실제 트래픽 라우팅 (A/CNAME).

Webflow는 TXT 레코드와 A/CNAME 레코드가 모두 지속적으로 Webflow를 가리켜야 한다고 제안하지만, 지속적인 인증을 위해서는 TXT 레코드만 필수입니다.

Source: …

실용적인 해결 방법

1. Initial step – 검증이 성공하도록 TXT, A, CNAME 레코드를 Webflow에 지정합니다.
2. After verification – TXT 레코드를 유지하고 and A/CNAME 레코드를 CloudFront로 다시 지정합니다.
3. 이제 CloudFront는 Webflow를 오리진으로 안전하게 트래픽을 전달할 수 있습니다.

Source: …

단계별 구현

참고: 어떤 단계에서도 CloudFront를 제거하거나 우회하지 마세요. 최상위 도메인(company.com)과 www(사용하는 경우)는 항상 CloudFront로 해석되어야 합니다.

1. CloudFront에 사용자 지정 오리진 생성

2. 동작(Behaviours) 설정

순서가 중요합니다 – 더 구체적인 경로( /dashboard/*)가 기본(*) 동작보다 위에 위치해야 합니다.

3. Webflow 설정

1. Webflow UI에서 사용자 지정 도메인(company.com)을 추가합니다.

4. Route 53에 DNS 레코드 추가 (초기 단계)

**Webflow에서 도메인이 Verified(인증됨) 및 Published(게시됨) 상태가 될 때까지 기다립니다.

5. DNS를 CloudFront로 전환 (인증 후)

이제:

• DNS가 트래픽을 CloudFront로 라우팅합니다.
• Webflow는 인증된 상태이며 계속 게시할 수 있습니다.

6. Webflow에서 사이트 게시

1. 사용자 지정 도메인을 기본 도메인으로 설정합니다.
2. Publish(게시) 버튼을 클릭합니다.

추가 DNS 변경은 필요하지 않습니다.

결과

모든 콘텐츠는 동일 도메인 (company.com)에서 리다이렉트 없이 및 서브도메인 없이 제공됩니다.

핵심 통찰

• CloudFront는 단일 엣지로 유지됩니다.
• Webflow는 도메인을 한 번만 검증하면 됩니다; 그 후에는 CloudFront 뒤의 오리진이 될 수 있습니다.

이 간단한 사고 모델은 추가 프록시 레이어가 필요 없게 하며, 많은 팀이 이미 프로덕션에서 사용하고 있는 아키텍처를 활용합니다.

라우팅 및 Webflow로 요청 전달 처리

DNS를 CloudFront로 되돌린 후에도 **“update required”**와 같은 Webflow UI 경고가 표시될 수 있습니다. 도메인이 이미 인증되고 게시된 상태라면 이러한 경고는 무해합니다.

이 모델을 사용하면 정적 자산, 동적 프런트엔드, 그리고 Webflow와 같은 관리형 플랫폼을 혼합할 수 있는 유연성을 제공하면서도 CloudFront를 유지할 수 있습니다.

이것이 실제로 작동하는 아키텍처입니다.

읽어 주셔서 감사합니다.

나와 연결하기

• LinkedIn: [Your LinkedIn Profile]
• YouTube: [Your YouTube Channel] – 더 유용한 콘텐츠를 위해 구독하세요.

댓글 섹션에 자유롭게 의견을 남겨 주세요!