해당 글은, Inblog 의 가이드 문서를 참고하여 작성하였습니다.
웹서비스를 만들다 보면, 하나의 도메인 아래에 여러 사이트를 연결해야 할 때가 종종 있습니다.
예를 들어:
- 메인 페이지는 Framer 로 만든 랜딩 페이지
- /blog 는 blog 서비스(wordpress, ghost, inblog 등등)
사용자에게는 example.com이라는 하나의 도메인에서 모든 콘텐츠가 제공되는 것처럼 보이기 때문에 사용자 경험(UX)이 좋아지고, SEO(검색 엔진 최적화) 측면에서도 유리합니다.
하지만, 이러한 구현은 여러 문제에 직면하게 됩니다.
- Framer 의 custom domain 은 proxy 연결을 지원하지 않는다.
- 대부분의 블로그 서비스는 서브 디렉토리 구조를 허용하지 않는다.
그렇다면 방법이 없는걸까?
여러가지 제약 조건은 생기지만 가능한 방법은 존재합니다.
첫째, wordpress, ghost 등의 블로그 서비스를 자가 호스팅 방식으로 설치해서 사용합니다. 또는 inblog 와 같이 서브디렉토리 구조의 연결을 허용해주는 블로그 서비스를 찾아 사용합니다.
둘째, 프록시 서버를 앞에두고, example.com 으로 들어오는 연결을 www.example.com 으로, example.com/blog 으로 들어오는 연결을 블로그 서비스로 리라이트 시켜줍니다. 그리고, Framer 의 커스텀 도메인 연결은 www.example.com 으로 설정해줍니다.
인프라를 자주 세팅해보지 않은 입장에서는, 위의 답변은 듣기만 해도 머리가 아프다.
우리는 이번 글에서 하나의 도메인을 사용하여 메인페이지, 블로그를 연결하는 간단한 방법을 배워볼 예정입니다.
이번 튜토리얼에서는 Cloudflare의 프록시 기능을 사용하기 위해, 도메인의 네임서버를 Cloudflare로 변경하는 과정이 포함되어 있습니다. 꼭 필요한 단계이니 참고해서 진행해 주세요.
어떤 준비가 필요한가요?
이번 글의 실습을 따라하기 위해서는 Framer, Inblog, Cloudflare 라는 서비스의 가입이 되어 있어야 하고, 자신이 사용할 도메인이 필요합니다.
Framer 의 커스텀 도메인 연결을 위해선 최소비용의 유료결제, Inblog 의 커스텀 도메인 연결을 위해선 14일의 프리티어 사용 or 유료 결제가 필요합니다.
Cloudflare 의 경우에는 결제없이 테스트가 가능하지만 사용량에 따라 과금이 되는 형식이므로 지속적인 사용을 위해선 카드 등록이 필요합니다.
단순한 프록시 연결은 Cloudflare 를 통해서 과금되는 양이 매우 적거나 미미함으로 과금에 걱정하지 않아도 되지만, Cloudflare 같은 클라우드 서비스는 계정이 탈취당하면 과금이 무한정 늘어날 수 있으니 꼭 이차인증을 달아 이러한 사태를 미연에 방지하도록 합니다.
Framer 의 세팅을 해보자
커스텀 도메인에 자신의 도메인 (예: example.com) 을 넣으면, 다음과 같은 화면이 뜬다. 이러면 Framer 세팅은 끝납니다.
붉은 박스 안의 값들은 추후 cloudflare 의 세팅을 마치면 사용할 예정입니다.
Inblog 의 세팅을 해보자
Inblog 의 도메인 설정창에서 Subdirectory 를 선택후, 자신의 도메인을 적습니다. (예: example.com/blog)
도메인을 입력후 connect domain 을 누르면, 위와같은 상태 확인창이 뜨면 끝입니다.
위 그림의 Connected 는 추후 Cloudflare 의 설정을 마치면 뜨게됩니다.
Cloudflare 의 세팅을 해보자
이 세팅에서 가장 중요한 부분인 Cloudflare 의 세팅입니다.
도메인이 존재하지 않는 경우
여기서 원하는 도메인을 선택 및 구매하면 됩니다. 이후 Framer 설정시 나온 3 개의 레코드를 추가 부분 부터 따라서 진행해 주시면 됩니다.
도메인이 존재하는 경우
계정 홈에서 도메인 추가를 누릅니다.
이후, 도메인등록(예: example.com) -> DNS 레코드 빠른 스캔 -> 요금제 선택 -> Free 요금제 선택 순으로 눌러주면 됩니다.
위와 같은 창이 뜰텐데, 이는 기존에 사용하던 dns 레코드가 자동으로 넘어온 것으로 이상이 있는지 체크 합니다. (유형이 NS 인 레코드는 기존 네임서버와 연결하던 레코드로 삭제하셔도 무방합니다)
그후, 레코드 추가를 눌러 Framer 설정시 나온 3 개의 레코드를 추가해주고, 활성화로 계속 버튼을 눌러줍니다.
단, 이부분에 기존의 설정들이 존재하시는 분들은 해당 내용을 잘 아는 분들에게 도움을 요청하길 권장드립니다. 기존에 연결된 서비스가 있다면, 서비스의 연결이 끊어질 수 있습니다.
위의 과정을 잘 따라오셨다면, 위와 같은 화면을 볼 수 있습니다. (Cloudflare 콘솔 홈 화면에서 해당 도메인을 눌러 접속 가능한 화면입니다.)
이전 화면에서 레코드 추가를 못하셨다면, 우측 상단의 DNS 레코드 링크를 눌러 추가를 하실 수 있습니다.
주의, 네임서버를 바꾸는 작업은 즉시 적용이 되지 않으며, 길면 2~3일정도의 기간이 소요됩니다. 이 기간동안 기존의 네임서버로 연결이 될 수 있으니, 기존의 연결은 2~3일정도 유지시키기를 권장드립니다.
이제 네임서버를 바꾸는 작업을 할텐데, corey.ns.cloudflare.com, gloria.ns.cloudflare.com 를 복사하여, 자신이 도메인을 구입한 곳에서 네임서버를 바꾸어 줍니다. (corey.ns.cloudflare.com, gloria.ns.cloudflare.com 이 값들은 변동이 있을 수 있습니다)
네임 서버 교체까지 완료한 경우, 지금 이름 서버 확인 버튼을 눌러 Cloudflare 에서 인식할 수 있도록 해줍니다.
HTTPS 연결 설정
위의 과정이 완료되었다면 다음과 같이 엣지 인증서가 생성되었을 것입니다. (상태는 아직 활성 상태가 아닐 수 있습니다)
여기서 스크롤을 조금 내려보면 항상 HTTPS 사용 이란 설정이 있는데, 활성화 시켜줍니다.
위의 세팅까지 완료하면, http 로 접속시에도 강제로 https 로 요청을 리다이렉트 시켜줍니다.
하지만, 여기서 인증서에 접근하는 부분은 https 리다이렉트에서 제외시켜줘야 합니다.
page rules 탭에서 위의 그림과 같이 URL 에 example.com/.well-known/acme-challenge/* (example.com 을 자신의 도메인으로 변경) 후, ssl 암호화 제외, 자동 HTTPS 다시 쓰기 제외로 설정해주고 저장합니다.
이 과정까지 완료되면, 자신의 도메인으로 Framer 의 접근이 되는것을 확인할 수 있습니다. (네임서버 문제 or 브라우저 캐시로 접근에 시간이 걸릴 수 있습니다. 가능하면 시크릿 모드같이 캐시가 남지 않는 환경으로 테스트를 권장드립니다)
블로그 연결
마지막으로 블로그 연결을 할 차례입니다.
위 그림과 같이, workers 및 pages 페이지로 이동하여 생성을 눌러줍니다.
Hello World로 시작하십시오! 를 눌러줍니다.
workers 의 타이틀을 기본값 or 원하는 이름으로 지정후, 그 아래 코드에 다음의 코드를 복사하여 넣어주세요.
addEventListener('fetch', (event) => {
event.respondWith(handleRequest(event.request));
});
async function handleRequest(request) {
try {
const url = new URL(request.url);
const inblogSubdomain = "example.inblog.io";
const customHost = url.host;
if (url.pathname.startsWith("/blog") || url.pathname === "/robots.txt") {
url.hostname = inblogSubdomain;
if (url.pathname !== "/robots.txt") {
url.pathname = url.pathname.replace("/blog", "");
}
const proxyRequest = new Request(url, request);
proxyRequest.headers.set("Host", inblogSubdomain);
proxyRequest.headers.set("X-Forwarded-Host", customHost);
proxyRequest.headers.set("X-Forwarded-Proto", "https");
const ip = request.headers.get("CF-Connecting-IP");
if (ip) proxyRequest.headers.set("X-Forwarded-For", ip);
return fetch(proxyRequest);
}
} catch (error) {
// if no action found, play the regular request
console.error("Error handling request:", error);
}
return fetch(request);
}
위 코드에서 example.inblog.io 를 example 만 자신의 inblog 도메인으로 적어주세요. inblog 도메인은 Inblog subdirectroy 상태 확인창에서 확인 가능합니다.
마지막으로 자신의 도메인이 호출될때, workers 가 호출을 먼저 확인후 동작을 하도록 설정합니다.
생성된 workers 의 설정 창으로 이동해주세요.
여기서 추가 버튼을 눌러 경로를 추가해줍니다.
영역을 눌러 자신의 도메인을 선택해주세요. 그리고, 경로에는 다음과 같은 경로들을 추가해주세요.(총 4번 추가해야 합니다.)
example.com/blog*
example.com/robots.txt
www.example.com/blog*
www.example.com/robots.txt
example.com 을 자신의 도메인으로 변경하여 추가합니다.
여기까지 작업을 완료하면, example.com/blog 로 접속시 자신의 Inblog 페이지가 보이는 것을 확인하실 수 있습니다.
마치며
이번 글에서는 하나의 도메인으로 Framer의 메인 페이지와 Inblog의 블로그를 연결하는 방법을 정리해보았습니다.
하나의 도메인 아래에서 여러 서비스를 운영하고자 하는 분들에게, 이 글이 작은 참고가 되었으면 합니다.
앞으로도 이런 실전형 노하우들을 더 많이 정리해서 공유해보겠습니다.
감사합니다.
'인프라' 카테고리의 다른 글
| 동적 렌더링을 통해 싱글페이지 어플리케이션(SPA) 의 SEO 를 관리하는법 (3) | 2025.08.02 |
|---|---|
| AWS Lightsail 을 이용한 워드프레스 구축 및 서브 디렉토리를 루트로 설정하는법 (3) | 2025.07.15 |
| 하나의 도메인으로 Framer 와 Blog 연결 시키는 방법 2 (with Cloudfront) (1) | 2025.07.03 |