Cara melayani subdomain sebagai subdirektori

Katakan anda mempunyai laman web yang dibina di atas platform yang cemerlang di reka bentuk dan ia boleh didapati di Example.com. Tetapi platform itu jatuh pendek di blogging. Jadi anda berfikir pada diri sendiri, "Bagaimana jika saya boleh menggunakan platform blog yang berbeza dan menjadikannya tersedia di Example.com/blog?"

Kebanyakan orang akan memberitahu anda yang menentang bagaimana DNS dan laman web sepatutnya berfungsi dan menggunakan subdomain sebaliknya. Tetapi ada manfaat untuk menjaga kandungan anda pada domain akar yang kami tidak dapat dengan subdomain.

Ada cara untuk melayani dua platform yang berbeza pada url yang sama. Dan saya akan menunjukkan kepada anda sos rahsia supaya, pada akhir artikel ini, kami akan membuat blog.example.com berkhidmat sebagai contoh.com/blog.

Mengapa anda mahu melakukan ini

Kerana anda di sini, anda mungkin sudah tahu mengapa ini adalah jalan untuk meneruskan. Tetapi saya ingin memastikan anda berada di sini untuk alasan utama untuk melakukan ini: SEO. Semak 14 kajian kes ini yang menunjukkan hasil positif apabila orang memindahkan subdomain mereka ke subdirektori. Anda mahu blog dan domain anda untuk berkongsi nilai SEO. Meletakkannya di subdomain agak putus hubungan kedua.

Inilah sebab saya, dan menggabungkan dua platform, di mana domain utama berada di WordPress dan subdomain berada di Drupal. Tetapi tutorial ini adalah platform agnostik - ia akan berfungsi dengan hampir mana -mana platform.

Yang mengatakan, pendekatan Cloudflare yang kami tutupi dalam tutorial ini tidak serasi dengan Shopify melainkan anda membayar pelan perusahaan Cloudflare. Itu kerana Shopify juga menggunakan Cloudflare dan tidak membenarkan kami proksi trafik pada peringkat harga percuma mereka.

Langkah 0 (Pratonton)

Sebelum saya melompat, saya ingin menerangkan tahap yang tinggi dari apa yang akan berlaku. Singkatnya, kami akan mempunyai dua laman web: kami yang utama (contoh.com) dan subdomain (blog.example.com). Saya menggunakan "blog" sebagai contoh, tetapi dalam kes saya, saya perlu menggugurkan Drupal dengan jenis kandungan yang berbeza. Tetapi blog adalah kes penggunaan biasa.

Pendekatan ini bergantung kepada menggunakan Cloudflare untuk DNS dan sedikit tambahan sesuatu yang akan memberikan sihir. Kami akan memberitahu Cloudflare bahawa apabila seseorang melawat contoh.com/blog, ia sepatutnya:

1. memintas permintaan itu (kerana example.com/blog tidak benar -benar wujud),
2. minta domain yang berbeza (blog.example.com/blog) di belakang tabir, dan
3. Menyampaikan hasil dari langkah terakhir itu kepada pelawat yang bertopeng melalui example.com/blog.

Baiklah, mari kita menyelam dengan lebih terperinci!

Langkah 1: Menggunakan Cloudflare

Sekali lagi, kami menggunakan Cloudflare untuk DNS. Menunjuk DNS domain anda ada langkah pertama untuk memulakan.

Alasan untuk Cloudflare adalah bahawa ia membolehkan kita membuat pekerja yang mampu menjalankan sedikit kod pada bila -bila masa seseorang melawat URL tertentu (dipanggil laluan yang akan kita buat dalam langkah 3). Kod ini akan bertanggungjawab untuk menukar laman web di belakang tabir.

Cloudflare mempunyai panduan yang sangat baik untuk bermula. Matlamatnya adalah untuk menunjuk domain anda - di mana sahaja ia didaftarkan - kepada nameservers CloudFlare dan mengesahkan bahawa CloudFlare disambungkan dalam akaun CloudFlare anda.

Langkah 2: Buat pekerja

Kod ini akan bertanggungjawab untuk menukar laman web di belakang tabir. Kepala ke pekerja dan klik Buat Perkhidmatan .

Namakan perkhidmatan anda, kemudian pilih "HTTP HANDLER":

Klik Buat Perkhidmatan dan kemudian edit cepat .

Tampal dalam kod berikut dan ganti nama domain dengan anda sendiri pada baris 16 :

 // Dengar setiap permintaan dan balas dengan fungsi kami.
// Nota, ini hanya akan dijalankan pada laluan yang dikonfigurasikan dalam Cloudflare.
addEventListener ('ambil', fungsi (acara) {
  event.respondenwith (handlerequest (event.request))
})

// Fungsi kami untuk mengendalikan respons.
Async Function HandlereQuest (Permintaan) {
  // Hanya mendapatkan permintaan bekerja dengan proksi ini.
  jika (request.method! == 'get')
  pulangan methodNotAllowed (permintaan);
  // URL yang diminta.
  const url = url baru (request.url);
  // Permintaan "URL Asal" aka blog sebenar dan bukannya apa yang diminta.
  // Ini menghidupkan URL mutlak yang meninggalkan jalan relatif tidak berubah. 
  const originUrl = url.toString () .replace ('https://example.com', 'https://blog.example.com');
  // Kandungan halaman asal.
  Const OriginPage = menunggu ambil (asalUrl);
  // Beri respons halaman asal kami.
  const newResponse = Response baru (OriginPage.body, OriginPage); kembali NewResponse;
}

// hei! Dapatkan permintaan sahaja 
Fungsi MethodNotAllowed (permintaan) {
  kembali respons baru (`kaedah $ {request.method} tidak dibenarkan.`, {
    Status: 405,
    Tajuk: {'Benarkan': 'GET'}
  })
}

Akhir sekali, klik Simpan dan Deploy .

Langkah 3: Tambahkan laluan

Sekarang mari kita memaklumkan Cloudflare yang URL (alias laluan) untuk menjalankan kod ini. Kepala ke laman web di Cloudflare, kemudian klik pekerja .

Terdapat bahagian pekerja di skrin utama CloudFlare, di mana anda mengedit kod, dan kemudian ada bahagian pekerja di setiap laman web di mana anda menambah laluan. Mereka adalah dua tempat yang berbeza, dan ia mengelirukan.

Pertama, klik Tambah Laluan :

Kerana kami menambah blog yang mempunyai banyak halaman kanak -kanak, kami akan menggunakan https://example.com/blog*. Perhatikan asterisk bertindak sebagai kad liar untuk dipadankan. Kod ini akan dijalankan di halaman blog dan setiap halaman yang bermula dengan blog.

Ini boleh membawa kesan yang tidak diingini. Katakanlah, sebagai contoh, anda mempunyai halaman yang bermula dengan "blog" tetapi bukan sebahagian daripada blog sebenar, seperti https://example.com/blogging-services. Itu akan dijemput dengan peraturan ini.

Kemudian, pilih pekerja dalam lungsur perkhidmatan .

Kami mempunyai banyak kerja yang dilakukan, tetapi terdapat lebih banyak laluan yang perlu kami tambahkan - CSS, JavaScript, dan laluan fail lain yang blog bergantung kepada (kecuali semua fail dihoskan pada URL yang berbeza, seperti pada CDN). Cara yang baik untuk mencari ini adalah dengan menguji laluan anda dan memeriksa konsol.

Kepala ke https://example.com/blog anda dan pastikan sesuatu dimuatkan. Ia akan kelihatan merosakkan kerana ia kehilangan fail tema. Tidak mengapa buat masa ini, selagi ia tidak menghasilkan ralat 404. Yang penting ialah membuka penyemak imbas anda, api konsol, dan perhatikan semua URL merah yang tidak dapat ditemui atau dimuatkan (biasanya 404 atau 403) yang merupakan sebahagian daripada domain anda.

Anda akan mahu menambah mereka sebagai laluan ... tetapi hanya jalan ibu bapa. Jadi, jika URL merah anda https://example.com/wp-content/themes/file1.css, maka lakukan https://example.com/wp-content* sebagai laluan anda. Anda juga boleh menambah laluan kanak -kanak, jika anda ingin menjadi lebih spesifik, tetapi idea itu adalah menggunakan satu laluan untuk menangkap kebanyakan fail.

Sebaik sahaja anda menambah laluan tersebut, lihat URL anda dan lihat sama ada ia kelihatan seperti subdomain anda. Jika tidak, periksa langkah -langkah sebelumnya. (Kemungkinan anda perlu menambah lebih banyak laluan.)

Adalah lebih baik untuk melakukan pemeriksaan yang berkualiti dengan menavigasi ke beberapa halaman dan melihat jika ada yang hilang. Saya juga mengesyorkan membuka DevTools dan mencari subdomain anda (blog.example.com). Jika itu muncul, anda perlu menambah laluan untuk menargetkan sumber -sumber tersebut atau melakukan sesuatu dengan platform anda untuk berhenti mengeluarkan URL tersebut. Sebagai contoh, platform saya mengeluarkan tag kanonik dengan subdomain saya, jadi saya dapati plugin untuk mengubah suai URL kanonik untuk menjadi domain akar saya.

Langkah 4: Rahsia Sos (NoIndex)

Anda mungkin melihat bahawa kami mempunyai masalah. URL kami boleh didapati di dua URL yang berbeza. Ya, kita boleh menggunakan atribut kanonik untuk memaklumkan Google yang URL adalah "utama" kami, tetapi jangan biarkan ia pergi ke Google untuk memilih yang betul.

Pertama, tetapkan seluruh subdomain anda sebagai NoIndex (cara untuk melakukan ini akan berbeza mengikut platform). Kemudian, dalam pekerja Cloudflare, kami akan menambah baris kod berikut, yang pada dasarnya mengatakan untuk menghapuskan NoIndex apabila URL semasa diakses melalui proksi.

 newResponse.headers.delete ("X-Robots-Tag");

Penyelesaian kod penuh disediakan pada akhir artikel ini.

Langkah 5: Ubah suai tapak

Perkara terakhir yang perlu dilakukan ialah mengubah sitemap subdomain supaya tidak menggunakan subdomain di dalamnya. Cara untuk melakukan ini akan berubah mengikut platform, tetapi matlamatnya adalah untuk mengubah suai asas/mutlak/domain di sitemap anda supaya ia mencetak contoh.com/mypost) dan bukannya blog.exmeple.com/mypost. Sesetengah plugin dan modul akan membolehkan ini tanpa kod tersuai.

Itu sahaja! Penyelesaiannya harus berfungsi!

Batasan

Magic Cloudflare ini bukan tanpa kelemahannya. Sebagai contoh, ia hanya menerima permintaan mendapatkan, bermakna kita hanya boleh mendapatkan sesuatu dari pelayan. Kami tidak dapat menyiarkannya yang digunakan oleh bentuk. Oleh itu, jika anda perlu log masuk atau mengemukakan borang pelawat, akan ada lebih banyak kerja di atas apa yang telah kami lakukan. Saya membincangkan beberapa penyelesaian untuk ini dalam artikel lain.

Seperti yang dinyatakan sebelum ini, satu lagi batasan ialah menggunakan pendekatan ini di Shopify memerlukan melanggan peringkat harga perusahaan Cloudflare. Sekali lagi, itu kerana Shopify juga menggunakan Cloudflare dan menyekat keupayaan untuk proksi trafik pada rancangan mereka yang lain.

Anda juga mungkin mendapat beberapa masalah jika anda cuba menggabungkan dua contoh platform yang sama bersama-sama (contohnya kedua-dua domain peringkat atas dan subdomain menggunakan WordPress). Tetapi dalam kes seperti itu, anda harus dapat menyatukan dan menggunakan satu contoh platform.

Penyelesaian penuh

Inilah kod dalam semua kemuliaannya:

 // Dengar setiap permintaan dan balas dengan fungsi kami.
// Nota, ini hanya akan dijalankan pada laluan yang dikonfigurasikan dalam Cloudflare.
addEventListener ('ambil', fungsi (acara) {
  event.respondenwith (handlerequest (event.request))
})
// Fungsi kami untuk mengendalikan respons.
Async Function HandlereQuest (Permintaan) {
  // Hanya mendapatkan permintaan bekerja dengan proksi ini.
  jika (request.method! == 'get') method balikNotAllowed (permintaan);
  // URL yang diminta.
  const url = url baru (request.url);
  // Permintaan "URL Asal" aka blog sebenar dan bukannya apa yang diminta.
  // Ini menghidupkan URL mutlak yang meninggalkan jalan relatif tidak berubah. 
  const originUrl = url.toString () .replace ('https://example.com', 'https://blog.example.com');
  // Kandungan halaman asal.
  Const OriginPage = menunggu ambil (asalUrl);
  // Beri respons halaman asal kami.
  const newResponse = Response baru (OriginPage.body, OriginPage);
  // Keluarkan "noindex" dari domain asal.
  newResponse.headers.delete ("X-Robots-Tag");
  // Keluarkan cache Cloudflare kerana ia dimaksudkan untuk WordPress.
  // Sekiranya anda menggunakan APO Cloudflare dan blog anda bukan WordPress, (tetapi
  // Domain utama anda adalah), kemudian hentikan apo daripada berjalan pada url asal anda.
  // newResponse.headers.set ("cf-edge-cache", "no-cache"); kembali NewResponse; 
}
// hei! Dapatkan permintaan sahaja 
Fungsi MethodNotAllowed (permintaan) {
  kembali respons baru (`kaedah $ {request.method} tidak dibenarkan.`, {
    Status: 405,
    Tajuk:
    {'Benarkan': 'Dapatkan'}
  })
}

Jika anda memerlukan bantuan di sepanjang jalan, saya mengalu -alukan anda untuk menghubungi saya melalui laman web saya createetoday.io atau periksa YouTube saya untuk demonstrasi video.

Atas ialah kandungan terperinci Cara melayani subdomain sebagai subdirektori. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!