Логотип Зефирнет

Как обслуживать поддомен в качестве подкаталога

Дата:

Допустим, у вас есть веб-сайт, созданный на платформе с превосходным дизайном, и он доступен по адресу example.com. Но эта платформа не подходит для ведения блога. Итак, вы думаете про себя: «Что, если бы я мог использовать другую платформу для ведения блога и сделать ее доступной по адресу example.com/blog? "

Большинство людей скажут вам, что это противоречит тому, как должны работать DNS и веб-сайты, и вместо этого использовать субдомен. Но есть преимущества хранения вашего контента в корневом домене, которые мы просто не получаем с субдоменами.

Есть способ обслуживать две разные платформы по одному и тому же URL. И я собираюсь показать вам секретный соус, чтобы к концу этой статьи мы blog.example.com служить в качестве example.com/blog.

Почему вы хотите это сделать

Поскольку вы здесь, вы, вероятно, уже знаете, почему следует идти по этому пути. Но я хотел бы убедиться, что вы здесь по основной причине сделать это: SEO. Проверьте это 14 кейсов которые показывают положительные результаты, когда люди перемещают свои поддомены в подкаталоги. Вы хотите, чтобы ваш блог и ваш домен разделяли ценность SEO. Помещение его в поддомен несколько разъединит их.

Это было моей причиной, и в итоге я объединил две платформы, где основной домен был на WordPress, а поддомен на Drupal. Но это руководство не зависит от платформы — оно будет работать практически на любой платформе.

Тем не менее, подход Cloudflare, который мы рассматриваем в этом руководстве. несовместим с Shopify если вы не платите за корпоративный план Cloudflare. Это связано с тем, что Shopify также использует Cloudflare и не позволяет нам проксировать трафик на их бесплатном ценовом уровне.

Шаг 0 (Предварительный просмотр)

Прежде чем я начну, я хочу объяснить высокий уровень того, что произойдет. Короче говоря, у нас будет два сайта: наш основной (example.com) и субдомен (blog.example.com). Я использую «блог» в качестве примера, но в моем случае мне нужно было зайти в Drupal с другим типом контента. Но блог — типичный вариант использования.

Этот подход основан на использовании Cloudflare для DNS и еще чего-то, что обеспечит волшебство. Мы собираемся сообщить Cloudflare, что когда кто-то посещает example.com/blog, должно:

  1. перехватить этот запрос (потому что example.com/blog реально не существует)
  2. запросить другой домен (blog.example.com/blog) за кадром и
  3. доставить результаты этого последнего шага посетителю, замаскированному через example.com/blog.

Хорошо, давайте углубимся в это более подробно!

Шаг 1: Использование Cloudflare

Опять же, мы используем Cloudflare для ДНС. Указание DNS вашего домена — это первый шаг к началу работы.

Причина использования Cloudflare в том, что он позволяет нам создавать Рабочие которые способны запускать часть кода каждый раз, когда кто-то посещает определенные URL-адреса (называемые маршрутами, которые мы создадим на шаге 3). Этот код будет отвечать за переключение веб-сайтов за кулисами.

У Cloudflare есть отличное руководство по началу работы. Цель состоит в том, чтобы указать ваш домен — где бы он ни был зарегистрирован — на серверы имен Cloudflare и подтвердить, что Cloudflare подключен к вашей учетной записи Cloudflare.

Шаг 2: Создайте работника

Этот код будет отвечать за переключение веб-сайтов за кулисами. Направляйтесь к Рабочие и нажмите Создать службу.

Обратите внимание на среднее время процессора! Этот процесс добавил около .7ms на запрос (так что в принципе ничего).

Назовите свою службу, затем выберите «Обработчик HTTP»:

Нажмите Создать Сервис , а затем Quick Edit.

Вставьте следующий код и замените доменные имена своими в строке 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: Добавьте маршруты

Теперь давайте сообщим Cloudflare, какие URL-адреса (маршруты) запускать этот код. Перейдите на веб-сайт в Cloudflare, затем нажмите Рабочие.

На главном экране Cloudflare есть раздел Workers, где вы редактируете код, а затем на каждом веб-сайте есть раздел Workers, где вы добавляете маршруты. Это два разных места, и это сбивает с толку.

Прежде всего, нажмите Добавить маршрут:

Поскольку мы добавляем блог с множеством дочерних страниц, мы будем использовать https://example.com/blog*. Обратите внимание, что звездочка действует как подстановочный знак для сопоставления. Этот код будет работать на странице блога и на каждой странице, которая начинается с blog.

Это может иметь непредвиденные последствия. Скажем, например, у вас есть страница, которая начинается с «блог», но не является частью настоящего блога, например https://example.com/blogging-services. Это будет подхвачено этим правилом.

Затем выберите работника в Сервис падать.

Мы проделали большую работу, но нам нужно добавить дополнительные маршруты — CSS, JavaScript и другие пути к файлам, от которых зависит блог (если только все файлы не размещены на другом URL-адресе, например на 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 , чтобы сообщить 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 или проверить мой ютуб для демонстрации видео.

Spot_img

Последняя разведка

Spot_img