디자인 면에서 뛰어난 플랫폼을 기반으로 구축된 웹사이트가 있고 다음에서 사용할 수 있다고 가정해 보겠습니다. example.com. 그러나 그 플랫폼은 블로깅에 부족합니다. 따라서 "다른 블로깅 플랫폼을 사용하여 example.com/blog? "
대부분의 사람들은 DNS와 웹사이트가 작동하고 대신 하위 도메인을 사용하는 방식에 어긋난다고 말할 것입니다. 그러나 하위 도메인에서는 얻을 수 없는 루트 도메인에 콘텐츠를 유지하면 이점이 있습니다.
동일한 URL에서 두 개의 다른 플랫폼을 제공하는 방법이 있습니다. 그리고 이 기사의 끝에서 우리가 만들 수 있도록 비밀 소스를 보여 드리겠습니다. blog.example.com 으로 봉사하다 example.com/blog.
왜 이 일을 하고 싶은지
당신이 여기 있기 때문에 이것이 왜 추구해야 할 길인지 이미 알고 있을 것입니다. 그러나 나는 당신이 이것을 하는 주된 이유인 SEO에 대해 여기 있는지 확인하고 싶습니다. 이것들을 확인하십시오 14개의 사례 연구 사람들이 하위 도메인을 하위 디렉토리로 이동할 때 긍정적인 결과를 보여줍니다. 블로그와 도메인이 SEO 가치를 공유하기를 원합니다. 하위 도메인에 넣으면 둘의 연결이 다소 끊어집니다.
이것이 내 이유였으며 메인 도메인이 WordPress에 있고 하위 도메인이 Drupal에 있는 두 개의 플랫폼을 병합했습니다. 그러나 이 튜토리얼은 플랫폼에 구애받지 않으며 거의 모든 플랫폼에서 작동합니다.
즉, 이 자습서에서 다루는 Cloudflare 접근 방식은 Shopify와 호환되지 않습니다 Cloudflare의 Enterprise 요금제를 지불하지 않는 한. Shopify도 Cloudflare를 사용하고 무료 가격 계층에서 트래픽을 프록시하는 것을 허용하지 않기 때문입니다.
0단계(미리보기)
뛰어들기 전에 무슨 일이 일어날지 높은 수준으로 설명하고 싶습니다. 간단히 말해서, 우리는 두 개의 웹사이트를 갖게 될 것입니다.example.com) 및 하위 도메인(blog.example.com). 저는 "블로그"를 예로 들었지만 제 경우에는 다른 유형의 콘텐츠로 Drupal에 들러야 했습니다. 그러나 블로그는 일반적인 사용 사례입니다.
이 접근 방식은 DNS에 Cloudflare를 사용하고 마법을 제공할 약간의 추가 기능을 사용합니다. 누군가 방문하면 Cloudflare에 알릴 것입니다. example.com/blog, 다음과 같아야 합니다.
- 그 요청을 가로챕니다(왜냐하면
example.com/blog실제로 존재하지 않음), - 다른 도메인 요청(
blog.example.com/blog) 무대 뒤에서, 그리고 - 마스크를 통해 방문자에게 마지막 단계의 결과를 전달합니다.
example.com/blog.
좋아, 더 자세히 알아보자!
1단계: Cloudflare 사용
다시 말하지만, 우리는 Cloudflare DNS를 위해. 시작하기 위한 첫 번째 단계는 도메인의 DNS를 가리키는 것입니다.
Cloudflare를 사용하는 이유는 노동자 누군가 특정 URL(3단계에서 생성할 경로라고 함)을 방문할 때마다 약간의 코드를 실행할 수 있습니다. 이 코드는 배후에서 웹사이트를 전환하는 역할을 합니다.
Cloudflare에는 다음과 같은 훌륭한 가이드가 있습니다. 시작하기. 목표는 등록된 모든 도메인이 Cloudflare의 네임서버를 가리키도록 하고 Cloudflare가 Cloudflare 계정에 연결되어 있는지 확인하는 것입니다.
2단계: 작업자 생성
이 코드는 배후에서 웹사이트를 전환하는 역할을 합니다. 로 이동 노동자 클릭 서비스 생성.
.7ms 요청에 (따라서 기본적으로 아무것도).서비스 이름을 지정한 다음 "HTTP 처리기"를 선택합니다.
서비스 생성 그리고 빠른 편집.
다음 코드를 붙여넣고 16행에서 도메인 이름을 자신의 것으로 교체하십시오.:
// Listen for every request and respond with our function.
// Note, this will only run on the routes configured in Cloudflare.
addEventListener('fetch', function(event) {
event.respondWith(handleRequest(event.request))
})
// Our function to handle the response.
async function handleRequest(request) {
// Only GET requests work with this proxy.
if (request.method !== 'GET')
return MethodNotAllowed(request);
// The URL that is being requested.
const url = new URL(request.url);
// Request "origin URL" aka the real blog instead of what was requested.
// This switches out the absolute URL leaving the relative path unchanged.
const originUrl = url.toString().replace('https://example.com', 'https://blog.example.com');
// The contents of the origin page.
const originPage = await fetch(originUrl);
// Give the response our origin page.
const newResponse = new Response(originPage.body, originPage); return newResponse;
}
// Hey! GET requests only
function MethodNotAllowed(request) {
return new Response(`Method ${request.method} not allowed.`, {
status: 405,
headers: { 'Allow': 'GET' }
})
}마지막으로 저장 및 배포.
3단계: 경로 추가
이제 이 코드를 실행할 URL(경로라고도 함)을 Cloudflare에 알려 보겠습니다. Cloudflare의 웹 사이트로 이동한 다음 노동자.
Cloudflare의 기본 화면에는 코드를 편집하는 작업자 섹션이 있고 각 웹 사이트에는 경로를 추가하는 작업자 섹션이 있습니다. 두 곳이 다른 곳이라 혼란스럽습니다.
먼저 클릭 경로 추가:
많은 하위 페이지가 있는 블로그를 추가하기 때문에 https://example.com/blog*. 별표는 일치를 위한 와일드 카드 역할을 합니다. 이 코드는 블로그 페이지와 다음으로 시작하는 모든 페이지에서 실행됩니다. blog.
이는 의도하지 않은 결과를 초래할 수 있습니다. 예를 들어 "blog"로 시작하지만 실제 블로그의 일부가 아닌 페이지가 있다고 가정해 보겠습니다. https://example.com/blogging-services. 그것은 이 규칙으로 선택될 것입니다.
그런 다음, Worker를 선택하십시오. 예배 쓰러지 다.
많은 작업이 완료되었지만 CSS, JavaScript 및 블로그가 의존하는 기타 파일 경로를 추가해야 하는 경로가 더 있습니다(모든 파일이 CDN). 이를 찾는 좋은 방법은 경로를 테스트하고 콘솔을 확인하는 것입니다.
당신의 머리 위로 https://example.com/blog 그리고 무언가가 로딩 중인지 확인하십시오. 테마 파일이 없기 때문에 엉망으로 보일 것입니다. 404 오류가 발생하지 않는 한 지금은 괜찮습니다. 중요한 것은 브라우저의 DevTools를 열고 콘솔을 실행하고 도메인의 일부인 찾거나 로드할 수 없는 모든 빨간색 URL(일반적으로 404 또는 403)을 기록해 두는 것입니다.
경로로 추가하고 싶지만 부모 경로만 수행합니다. 따라서 빨간색 URL이 https://example.com/wp-content/themes/file1.css, 그런 다음 https://example.com/wp-content* 당신의 경로로. 더 구체적이고 싶다면 자식 경로를 추가할 수도 있지만 아이디어는 대부분의 파일을 잡는 데 하나의 경로를 사용하는 것입니다.
해당 경로를 추가한 후 URL을 확인하고 하위 도메인과 같은지 확인하십시오. 그렇지 않은 경우 이전 단계를 확인하십시오. (경로를 더 추가해야 할 수도 있습니다.)
여러 페이지로 이동하여 누락된 항목이 있는지 확인하여 품질을 확인하는 것이 가장 좋습니다. 또한 DevTools를 열고 하위 도메인을 검색하는 것이 좋습니다(blog.example.com). 표시되는 경우 해당 리소스를 대상으로 하는 경로를 추가해야 합니다. or 해당 URL 출력을 중지하려면 플랫폼에서 조치를 취하십시오. 예를 들어, 내 플랫폼이 내 하위 도메인과 함께 표준 태그를 출력하고 있었기 때문에 표준 URL을 내 루트 도메인으로 수정하는 플러그인을 찾았습니다.
4단계: 소스의 비밀(noindex)
문제가 있음을 알 수 있습니다. 우리의 URL은 두 개의 다른 URL에서 사용할 수 있습니다. 예, 우리는 사용할 수 있습니다 canonical 어떤 URL이 "기본" URL인지 Google에 알리기 위해 속성을 사용하지만 올바른 URL을 선택하도록 Google에 맡기지 맙시다.
첫째, 전체 하위 도메인을 다음과 같이 설정하십시오. noindex (이를 수행하는 방법은 플랫폼에 따라 다릅니다). 그런 다음 Cloudflare Worker에서 기본적으로 제거하라는 다음 코드 줄을 추가합니다. noindex 프록시를 통해 현재 URL에 액세스할 때
newResponse.headers.delete("x-robots-tag");전체 코드 솔루션은 이 기사의 끝에 제공됩니다.
5단계: 사이트맵 수정
마지막으로 할 일은 하위 도메인의 사이트맵을 수정하여 하위 도메인을 사용하지 않도록 하는 것입니다. 이 작업을 수행하는 방법은 플랫폼에 따라 다르지만 목표는 사이트맵에서 기본/절대/도메인을 수정하여 example.com/mypost) 대신에 blog.exmaple.com/mypost. 일부 플러그인 및 모듈은 사용자 정의 코드 없이 이를 허용합니다.
그게 그거야! 솔루션이 작동해야 합니다!
제한 사항
이 Cloudflare 마법에는 단점이 없습니다. 예를 들어 GET 요청, 즉 서버에서만 항목을 가져올 수 있습니다. 우리는 할 수 없습니다 POST 양식이 사용하는 것입니다. 따라서 방문자가 로그인하거나 양식을 제출해야 하는 경우 이미 수행한 작업 외에도 더 많은 작업이 필요합니다. 이에 대한 몇 가지 솔루션에 대해 논의했습니다. 다른 기사.
앞서 언급했듯이 또 다른 제한 사항은 Shopify에서 이 접근 방식을 사용하려면 Cloudflare의 Enterprise 가격 책정 계층에 가입해야 한다는 것입니다. 다시 말하지만 Shopify는 Cloudflare도 사용하고 다른 계획에서 트래픽을 프록시하는 기능을 제한하기 때문입니다.
동일한 플랫폼의 두 인스턴스를 병합하려는 경우에도 몇 가지 문제가 발생할 수 있습니다(예: 최상위 도메인과 하위 도메인 모두 WordPress 사용). 그러나 그러한 경우에는 플랫폼의 하나의 인스턴스를 통합하고 사용할 수 있어야 합니다.
전체 솔루션
모든 영광의 코드는 다음과 같습니다.
// Listen for every request and respond with our function.
// Note, this will only run on the routes configured in Cloudflare.
addEventListener('fetch', function(event) {
event.respondWith(handleRequest(event.request))
})
// Our function to handle the response.
async function handleRequest(request) {
// Only GET requests work with this proxy.
if (request.method !== 'GET') return MethodNotAllowed(request);
// The URL that is being requested.
const url = new URL(request.url);
// Request "origin URL" aka the real blog instead of what was requested.
// This switches out the absolute URL leaving the relative path unchanged.
const originUrl = url.toString().replace('https://example.com', 'https://blog.example.com');
// The contents of the origin page.
const originPage = await fetch(originUrl);
// Give the response our origin page.
const newResponse = new Response(originPage.body, originPage);
// Remove "noindex" from the origin domain.
newResponse.headers.delete("x-robots-tag");
// Remove Cloudflare cache as it's meant for WordPress.
// If you are using Cloudflare APO and your blog isn't WordPress, (but
// your main domain is), then stop APO from running on your origin URL.
// newResponse.headers.set("cf-edge-cache", "no-cache"); return newResponse;
}
// Hey! GET requests only
function MethodNotAllowed(request) {
return new Response(`Method ${request.method} not allowed.`, {
status: 405,
headers:
{ 'Allow': 'GET' }
})
}도중에 도움이 필요하면 내 웹 사이트를 통해 저에게 연락하는 것을 환영합니다. CreateToday.io 또는 체크 아웃 내 YouTube 비디오 시연을 위해.
