Wie man eine Subdomäne als Unterverzeichnis dient-CSS-Tutorial-php.cn

Wie man eine Subdomäne als Unterverzeichnis dient

Nehmen wir an, Sie haben eine Website auf einer Plattform, die sich bei Design auszeichnet, und sie ist unter Beispiel.com erhältlich. Aber diese Plattform ist im Bloggen zu kurz. Sie denken also: „Was wäre, wenn ich eine andere Blogging -Plattform verwenden und sie unter Beispiel.com/blog zur Verfügung stellen könnte?“

Die meisten Leute würden Ihnen sagen, dass DNS und Websites funktionieren und stattdessen eine Subdomain verwenden sollen. Es gibt jedoch Vorteile, Ihre Inhalte auf der Root -Domäne zu halten, die wir einfach nicht mit Subdomänen bekommen.

Es gibt eine Möglichkeit, zwei verschiedene Plattformen auf derselben URL zu bedienen. Und ich werde Ihnen die geheime Sauce zeigen, damit wir am Ende dieses Artikels blog.example.com als Beispiel.com/blog dienen lassen.

Warum möchten Sie das tun

Weil Sie hier sind, wissen Sie wahrscheinlich schon, warum dies ein Weg ist, um zu verfolgen. Aber ich möchte sicherstellen, dass Sie aus dem Hauptgrund hier sind: SEO. Schauen Sie sich diese 14 Fallstudien an, die positive Ergebnisse zeigen, wenn Menschen ihre Subdomänen in Unterverzeichnisse übertragen. Sie möchten, dass Ihr Blog und Ihre Domain den SEO -Wert teilen. Wenn Sie es auf eine Subdomäne legen, werden die beiden etwas abgrenzt.

Dies war mein Grund und verschmolzen zwei Plattformen, auf denen sich die Hauptdomäne auf WordPress und die Subdomain auf Drupal befand. Aber dieses Tutorial ist die Plattform agnostisch - es funktioniert mit nahezu jeder Plattform.

Der CloudFlare -Ansatz, den wir in diesem Tutorial abdecken, ist mit Shopify unvereinbar, es sei denn, Sie bezahlen für den Unternehmensplan von Cloudflare. Das liegt daran, dass Shopify auch CloudFlare verwendet und es uns nicht erlaubt, den Datenverkehr auf ihrer kostenlosen Preisstufe zu steigern.

Schritt 0 (Vorschau)

Bevor ich einspringe, möchte ich das hohe Maß an dem erklären, was passieren wird. Kurz gesagt, wir haben zwei Websites: unsere Haupt -One (example.com) und die Subdomain (blog.example.com). Ich benutze als Beispiel "Blog", aber in meinem Fall musste ich Drupal mit einem anderen Inhaltstyp fallen lassen. Ein Blog ist jedoch der typische Anwendungsfall.

Dieser Ansatz beruht auf der Verwendung von Cloudflare für DNS und ein wenig mehr etwas, das die Magie liefert. Wir werden CloudFlare mitteilen, dass jemand, wenn jemand example.com/blog besucht, es sollte:

Fangen Sie diese Anfrage ab (da exist.com/blog nicht wirklich existiert),
Fordern Sie hinter den Kulissen eine andere Domain an (blog.example.com/blog) und
Liefern Sie die Ergebnisse aus diesem letzten Schritt an den von example.com/blog maskierten Besucher.

Okay, lasst uns detaillierter eingehen!

Schritt 1: Verwenden von Cloudflare

Auch hier verwenden wir Cloudflare für den DNS. Wenn Sie auf die DNS Ihrer Domain hinweisen, gibt es den ersten Schritt, um loszulegen.

Der Grund für CloudFlare ist, dass wir Arbeitnehmer erstellen können, die in der Lage sind, ein wenig Code auszuführen, wenn jemand bestimmte URLs besucht (genannte Routen, die wir in Schritt 3 erstellen). Dieser Code ist für das Umschalten der Websites hinter den Kulissen verantwortlich.

CloudFlare hat einen hervorragenden Leitfaden für den Einstieg. Ziel ist es, die von der Domain - wo immer sie registrierten - auf CloudFlare -Namenserver zu weisen und zu bestätigen, dass CloudFlare in Ihrem CloudFlare -Konto verbunden ist.

Schritt 2: Erstellen Sie den Arbeiter

Dieser Code ist für das Umschalten der Websites hinter den Kulissen verantwortlich. Gehen Sie zu den Arbeitern und klicken Sie auf Erstellen eines Dienstes .

Nennen Sie Ihren Dienst und wählen Sie "HTTP -Handler" aus:

Klicken Sie auf Dienst erstellen und dann schnell bearbeiten .

Fügen Sie den folgenden Code ein und ersetzen Sie die Domain -Namen durch Ihre eigene in Zeile 16 :

 // Hören Sie auf jede Anfrage und antworten Sie mit unserer Funktion.
// Beachten Sie, dass dies nur auf den in CloudFlare konfigurierten Routen ausgeführt wird.
AddEventListener ('Fetch', Funktion (Ereignis) {
  Ereignis.ResportWith (Handlrequest (Ereignis.Request))
})

// unsere Funktion, um die Antwort zu behandeln.
Async -Funktion Handlersquest (Anfrage) {
  // Erhalten Sie nur Anfragen mit diesem Proxy.
  if (Request.Method! == 'GET')
  return methodnotallowed (Anfrage);
  // Die URL, die angefordert wird.
  const url = neue url (request.url);
  // fordern Sie "Origin URL" an, auch als das echte Blog anstelle von dem, was angefordert wurde.
  // Dies schaltet die absolute URL aus, die den relativen Pfad unverändert lässt. 
  const Originurl = url.toString () .Replace ('https://example.com', 'https://blog.example.com');
  // Der Inhalt der Ursprungsseite.
  const OriginPage = warte auf Fetch (Originurl);
  // Geben Sie der Antwort unserer Ursprungsseite an.
  const newResponse = neue Antwort (OriginPage.body, OriginPage); NewResponse zurückgeben;
}

// Hey! Holen Sie sich nur Anfragen 
FunktionsmethodeNotallowed (Request) {
  Neue Antwort zurückgeben (`method $ {request.method} nicht erlaubt.`, {
    Status: 405,
    Header: {'erlauben': 'get'}
  })
}

Nach dem Login kopieren

Klicken Sie zuletzt auf Speichern und Bereitstellung .

Schritt 3: Routen hinzufügen

Informieren wir nun CloudFlare, auf welchen URLs (auch bekannt als Routen) diesen Code ausführen sollen. Besuchen Sie CloudFlare zur Website und klicken Sie dann auf Mitarbeiter .

Es gibt den Abschnitt "Arbeiter" auf dem Hauptbildschirm von CloudFlare, in dem Sie den Code bearbeiten, und dann gibt es den Abschnitt "Arbeiter" auf jeder Website, auf dem Sie die Routen hinzufügen. Sie sind zwei verschiedene Orte und es ist verwirrend.

Klicken Sie zunächst auf Route hinzufügen :

Da wir ein Blog mit vielen Kinderseiten hinzufügen, verwenden wir https://example.com/blog*. Beachten Sie, dass das Sternchen als Wild Card zum Matching fungiert. Dieser Code wird auf der Blog -Seite und auf jeder Seite ausgeführt, die mit dem Blog beginnt.

Dies kann unbeabsichtigte Konsequenzen haben. Sagen Sie beispielsweise eine Seite, die mit "Blog" beginnt, aber nicht Teil des eigentlichen Blogs ist, wie https://example.com/blogging-services. Das würde mit dieser Regel abgeholt werden.

Wählen Sie dann den Arbeiter im Dropdown -Bereich des Service aus.

Wir haben einen Großteil der Arbeiten erledigt, aber es gibt mehr Routen, die wir hinzufügen müssen - die CSS, JavaScript und andere Dateipfade, von denen das Blog abhängig ist (es sei denn, alle Dateien werden auf einer anderen URL gehostet, z. B. auf einem CDN). Ein guter Weg, um diese zu finden, besteht darin, Ihre Route zu testen und die Konsole zu überprüfen.

Gehen Sie zu Ihrem https://example.com/blog und stellen Sie sicher, dass etwas geladen wird. Es wird durcheinander aussehen, weil es die Themendateien fehlt. Das ist vorerst in Ordnung, solange es keinen 404 -Fehler erzeugt. Das Wichtigste ist, die Devtools Ihres Browsers zu öffnen, die Konsole zu starten und alle roten URLs zu notieren, die sie nicht finden oder laden können (normalerweise 404 oder 403), die Teil Ihrer Domain sind.

Sie möchten diese als Routen hinzufügen ... aber nur die übergeordneten Pfade. Also, wenn Ihre rote URL https://example.com/wp-content/themes/File1.css ist, dann tun Sie https://example.com/wp-content* als Route. Sie können auch einen untergeordneten Pfad hinzufügen, wenn Sie genauer sein möchten, aber die Idee ist, einen Weg zu verwenden, um die meisten Dateien zu fangen.

Sobald Sie diese Routen hinzufügen, schauen Sie sich Ihre URL an und sehen Sie, ob sie wie Ihre Subdomain aussieht. Wenn dies nicht der Fall ist, überprüfen Sie die vorherigen Schritte. (Wahrscheinlich müssen Sie weitere Routen hinzufügen.)

Es ist am besten, eine Qualitätsprüfung durchzuführen, indem Sie zu mehreren Seiten navigieren und sehen, ob etwas fehlt. Ich empfehle auch, Devtools zu öffnen und nach Ihrem Subdomain zu suchen (blog.example.com). Wenn dies angezeigt wird, müssen Sie entweder Routen hinzufügen, um diese Ressourcen abzuzielen , oder etwas mit Ihrer Plattform ausführen, um die Ausgabe dieser URLs nicht mehr auszugeben. Zum Beispiel gab meine Plattform ein kanonisches Tag mit meiner Subdomain aus, sodass ich ein Plugin gefunden habe, um die kanonische URL als meine Root -Domäne zu ändern.

Schritt 4: Das Secret von Saucen (noIndex)

Sie könnten sehen, dass wir ein Problem haben. Unsere URLs sind bei zwei verschiedenen URLs erhältlich. Ja, wir können das kanonische Attribut verwenden, um Google zu informieren, welche URL unser "Haupt" ist, aber überlassen wir es Google nicht, die richtigen Auswahl zu erhalten.

Stellen Sie zunächst Ihre gesamte Subdomain als noIndex fest (der Weg, dies zu tun, je nach Plattform). Im CloudFlare -Mitarbeiter werden wir dann die folgende Codezeile hinzufügen, die im Grunde genommen sagt, dass NoIndex, wenn die aktuelle URL über den Proxy zugegriffen wird.

 NewResponse.Headers.Delete ("X-Robot-tag");

Nach dem Login kopieren

Die vollständige Codelösung wird am Ende dieses Artikels bereitgestellt.

Schritt 5: Ändern Sie die Sitemap

Das Letzte, was Sie tun müssen, ist, die Sitemap des Subdomains zu ändern, damit die Subdomain nicht darin verwendet wird. Die Möglichkeit, dies zu tun, variieren je nach Plattform, aber das Ziel ist es, die Basis/Absolute/Domain in Ihrer Sitemap so zu ändern, dass example.com/mypost) anstelle von blog.exmaple.com/mypost druckt. Einige Plugins und Module erlauben dies ohne benutzerdefinierten Code.

Das ist das! Die Lösung sollte funktionieren!

Einschränkungen

Diese Cloudflare -Magie ist nicht ohne Nachteile. Beispielsweise akzeptiert es nur GET -Anfragen, dh wir können Dinge nur vom Server erhalten. Wir können nicht veröffentlichen, was Formen verwenden. Wenn Sie also Ihre Besucher anmelden oder Formulare einreichen müssen, wird mehr Arbeiten über das geben, was wir bereits getan haben. Ich habe in einem anderen Artikel mehrere Lösungen dafür diskutiert.

Wie bereits erwähnt, besteht eine weitere Einschränkung darin, dass die Verwendung dieses Ansatzes in Shopify das Abonnieren der Unternehmenspreisstufe von CloudFlare erfordert. Auch dies liegt daran, dass Shopify auch CloudFlare verwendet und die Fähigkeit einschränkt, den Verkehr in ihren anderen Plänen zu vergeben.

Sie können auch einige Probleme bekommen, wenn Sie versuchen, zwei Instanzen derselben Plattformen zusammenzuführen (z. B. sowohl Ihre Domäne auf höchster Ebene als auch Subdomain verwenden WordPress). In einem solchen Fall sollten Sie jedoch in der Lage sein, eine Instanz der Plattform zu konsolidieren und zu verwenden.

Vollständige Lösung

Hier ist der Code in all seinem Ruhm:

 // Hören Sie auf jede Anfrage und antworten Sie mit unserer Funktion.
// Beachten Sie, dass dies nur auf den in CloudFlare konfigurierten Routen ausgeführt wird.
AddEventListener ('Fetch', Funktion (Ereignis) {
  Ereignis.ResportWith (Handlrequest (Ereignis.Request))
})
// unsere Funktion, um die Antwort zu behandeln.
Async -Funktion Handlersquest (Anfrage) {
  // Erhalten Sie nur Anfragen mit diesem Proxy.
  if (request.method! == 'get') return methodnotallowed (request);
  // Die URL, die angefordert wird.
  const url = neue url (request.url);
  // fordern Sie "Origin URL" an, auch als das echte Blog anstelle von dem, was angefordert wurde.
  // Dies schaltet die absolute URL aus, die den relativen Pfad unverändert lässt. 
  const Originurl = url.toString () .Replace ('https://example.com', 'https://blog.example.com');
  // Der Inhalt der Ursprungsseite.
  const OriginPage = warte auf Fetch (Originurl);
  // Geben Sie der Antwort unserer Ursprungsseite an.
  const newResponse = neue Antwort (OriginPage.body, OriginPage);
  // "noIndex" aus der Ursprungsdomäne entfernen.
  NewResponse.Headers.Delete ("X-Robot-tag");
  // Entfernen Sie den Cloudflare -Cache, da er für WordPress gedacht ist.
  // Wenn Sie Cloudflare Apo verwenden und Ihr Blog ist nicht WordPress (aber nicht
  // Ihre Hauptdomäne ist) und verhindern Sie, dass Apo auf Ihrer Ursprungs -URL ausgeführt wird.
  // NewResponse.Headers.set ("CF-Edge-Cache", "No-Cache"); NewResponse zurückgeben; 
}
// Hey! Holen Sie sich nur Anfragen 
FunktionsmethodeNotallowed (Request) {
  Neue Antwort zurückgeben (`method $ {request.method} nicht erlaubt.`, {
    Status: 405,
    Header:
    {'Erlauben': 'get'}
  })
}

Nach dem Login kopieren

Wenn Sie auf dem Weg Hilfe benötigen, begrüße ich Sie, um mich über meine Website CreateToday.io zu erreichen oder meine YouTube für eine Videodemonstration zu lesen.

Das obige ist der detaillierte Inhalt vonWie man eine Subdomäne als Unterverzeichnis dient. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!