サブディレクトリとしてサブドメインを提供する方法

デザインに優れたプラットフォームにWebサイトが構築されており、Example.comで入手可能なWebサイトがあるとしましょう。しかし、そのプラットフォームはブログに不足しています。それで、あなたは自分自身に、「別のブログプラットフォームを使用して、それをexample.com/blogで利用できるようにすることができたらどうなるでしょうか？」

ほとんどの人は、DNSとWebサイトがどのように機能し、代わりにサブドメインを使用するかに反することをあなたに言うでしょう。しかし、サブドメインでは得られないルートドメインにコンテンツを保持することには利点があります。

同じURLで2つの異なるプラットフォームを提供する方法があります。そして、秘密のソースを紹介するので、この記事の終わりまでに、blog.example.comをexample.com/blogとして機能させることができます。

なぜあなたはこれをしたいのですか

あなたがここにいるので、あなたはおそらくこれが追求する道である理由をすでに知っているでしょう。しかし、私はあなたがこれを行う主な理由のためにここにいることを確実にしたいと思います：SEO。人々がサブドメインをサブディレクトリに移動するときに肯定的な結果を示すこれらの14のケーススタディをチェックしてください。ブログとドメインにSEOの価値を共有したいです。サブドメインに置くと、2つがやや切断されます。

これが私の理由であり、主なドメインがWordPressにあり、サブドメインがDrupalにある2つのプラットフォームを統合しました。しかし、このチュートリアルはプラットフォーム不可欠なものです。ほぼすべてのプラットフォームで動作します。

とはいえ、このチュートリアルで私たちがカバーしているCloudFlareアプローチは、CloudFlareのエンタープライズプランの支払いをしない限り、Shopifyと互換性がありません。 ShopifyはCloudFlareも使用しており、無料の価格設定層のトラフィックをプロキシできないためです。

ステップ0（プレビュー）

飛び込む前に、何が起こるかの高いレベルを説明したいと思います。要するに、2つのWebサイトの2つのWebサイト（example.com）とサブドメイン（blog.example.com）があります。例として「ブログ」を使用していますが、私の場合、異なるタイプのコンテンツでDrupalをドロップする必要がありました。しかし、ブログは典型的なユースケースです。

このアプローチは、DNSにCloudFlareの使用と、魔法を提供する少し余分なものを使用することに依存しています。 CloudFlareに、誰かがexample.com/blogにアクセスしたとき、それは次のことを伝えます。

1. そのリクエストを傍受する（example.com/blogが実際には存在しないため）、
2. 舞台裏で別のドメイン（blog.example.com/blog）をリクエストします
3. その最後のステップの結果を、example.com/blogからマスクされた訪問者に届けます。

さて、もっと詳細に飛び込みましょう！

ステップ1：CloudFlareの使用

繰り返しますが、DNSにCloudFlareを使用しています。ドメインのDNSを指して、開始するための最初のステップがあります。

CloudFlareの理由は、誰かが特定のURL（ステップ3で作成するルートと呼ばれる）を訪れるたびに、少しコードを実行できるワーカーを作成できることです。このコードは、舞台裏のウェブサイトを切り替える責任があります。

CloudFlareには、始めるための優れたガイドがあります。目標は、ドメインを登録している場所であっても、CloudFlareの名前サーバーに向けて、CloudFlareがCloudFlareアカウントに接続されていることを確認することです。

ステップ2：ワーカーを作成します

このコードは、舞台裏のウェブサイトを切り替える責任があります。労働者に向かい、 [サービスの作成]をクリックします。

サービスに名前を付けてから、「HTTPハンドラー」を選択します。

[サービスの作成]をクリックしてから、クイック編集します。

次のコードを貼り付け、 16行目でドメイン名を独自のものに置き換えます。

 //すべてのリクエストを聞いて、関数に応答します。
//注、これはCloudFlareで構成されたルートでのみ実行されます。
addeventListener（ 'fetch'、function（event）{
  event.respondwith（handlerequest（event.request））
}）

//応答を処理する関数。
async function handlerequest（request）{
  //このプロキシでリクエストのみが機能します。
  if（request.method！== 'get'）
  return methodnotallowed（request）;
  //要求されているURL。
  const url = new url（request.url）;
  //要求されたものではなく、「Origin URL」別名Real Blogをリクエストします。
  //これにより、絶対URLが切り替わり、相対パスは変化しません。 
  const originurl = url.toString（）.replace（ 'https://example.com'、 'https://blog.example.com'）;
  // Originページの内容。
  const riginpage = await fetch（originurl）;
  // ResponseにOriginページを与えます。
  const newResponse = new Response（ostirionpage.body、ovirionpage）; NewResponseを返します。
}

// おい！リクエストのみを取得します 
function methodnotallowed（request）{
  新しい応答を返します（ `method $ {request.method} not load.`、{
    ステータス：405、
    ヘッダー：{'lock'： 'get'}
  }）
}

最後に、 [保存と展開]をクリックします。

ステップ3：ルートを追加します

次に、このコードをオンにするためにどのURL（別名ルート）をcloudflareに通知しましょう。 CloudFlareのWebサイトにアクセスして、 [ワーカー]をクリックします。

CloudFlareのメイン画面には、コードを編集するワーカーセクションがあり、各Webサイトにルートを追加するワーカーセクションがあります。それらは2つの異なる場所であり、混乱しています。

まず、 [ルートの追加]をクリックします。

多くのチャイルドページがあるブログを追加しているため、https：//example.com/blog*を使用します。アスタリスクは、マッチングのためのワイルドカードとして機能することに注意してください。このコードは、ブログページとブログから始まるすべてのページで実行されます。

これは意図しない結果をもたらす可能性があります。たとえば、「ブログ」から始まるが、https：//example.com/blogging-servicesのような実際のブログの一部ではないページがあるとします。それはこのルールで拾われるでしょう。

次に、サービスドロップダウンでワーカーを選択します。

多くの作業が行われていますが、追加する必要があるルートはさらにあります。CSS、JavaScript、およびブログが依存している他のファイルパス（すべてのファイルがCDNなどの異なるURLでホストされていない限り）。これらを見つける良い方法は、ルートをテストしてコンソールをチェックすることです。

https://example.com/blogにアクセスして、何かが読み込まれていることを確認してください。テーマファイルが欠落しているため、めちゃくちゃに見えます。 404エラーが発生していない限り、今のところ問題ありません。重要なことは、ブラウザのDevToolsを開き、コンソールを発射し、ドメインの一部であるすべての赤いURL（通常は404または403）をメモすることです。

それらをルートとして追加したいのですが、親のパスのみを行います。したがって、赤いURLがhttps://example.com/wp-content/themes/file1.cssの場合は、ルートとしてhttps://example.com/wp-content*を実行します。より具体的にしたい場合は、子供のパスを追加することもできますが、アイデアは1つのルートを使用してほとんどのファイルをキャッチすることです。

これらのルートを追加したら、URLをチェックして、サブドメインのように見えるかどうかを確認してください。そうでない場合は、前の手順を確認してください。 （可能性がある可能性があります。さらにルートを追加する必要があります。）

複数のページに移動し、何かが欠けているかどうかを確認して、質の高いチェックを行うのが最善です。また、devtoolsを開き、サブドメイン（blog.example.com）を検索することをお勧めします。それが表示されている場合は、それらのリソースをターゲットにするためのルートを追加する必要があるか、それらのURLの出力を停止するためにプラットフォームで何かをする必要があります。たとえば、私のプラットフォームはサブドメインで標準タグを出力していたため、標準的なURLをルートドメインに変更するプラグインを見つけました。

ステップ4：ソースの秘密（noindex）

あなたは私たちに問題があることを見るかもしれません。 URLは2つの異なるURLで利用できます。ええ、Canonical属性を使用して、GoogleにどのURLが「メイン」であるかを通知できますが、正しいものを選択するためにGoogleに任せないでください。

まず、サブドメイン全体をnoindexとして設定します（これを行う方法はプラットフォームによって異なります）。次に、CloudFlareワーカーでは、次のコード行を追加します。これは、基本的に、現在のURLがプロキシからアクセスされるときにNoindexを削除すると述べています。

 newresponse.headers.delete（ "x-robots-tag"）;

完全なコードソリューションは、この記事の最後に提供されます。

ステップ5：サイトマップを変更します

最後にすべきことは、サブドメインのサイトマップを変更して、その中のサブドメインを使用しないようにすることです。これを行う方法はプラットフォームによって異なりますが、目標は、blog.exmaple.com/mypostの代わりに、syplemes.com/mypost）を印刷するように、サイトマップのベース/絶対/ドメインを変更することです。一部のプラグインとモジュールは、カスタムコードなしでこれを許可します。

それだけです！解決策は機能しているはずです！

制限

このCloudFlareの魔法は、その欠点がないわけではありません。たとえば、GETリクエストのみを受け入れます。つまり、サーバーからのみを取得できることを意味します。フォームが使用するものを投稿することができません。したがって、訪問者にフォームをログインまたは送信する必要がある場合は、すでに行ったことの上にもっと作業があります。これについては、別の記事でいくつかのソリューションについて説明しました。

前述のように、もう1つの制限は、Shopifyでこのアプローチを使用するには、CloudFlareのエンタープライズ価格設定層への購読が必要であることです。繰り返しますが、それはShopifyがCloudFlareを使用し、他の計画でトラフィックをプロキシする能力を制限するためです。

また、同じプラットフォームの2つのインスタンスを一緒にマージしようとしている場合（たとえば、トップレベルのドメインとサブドメインの両方のWordPressの両方をマージしようとしている場合も、いくつかの問題が発生する場合があります。ただし、そのような場合、プラットフォームの1つのインスタンスを統合および使用できるはずです。

完全なソリューション

これがすべての栄光のコードです：

 //すべてのリクエストを聞いて、関数に応答します。
//注、これはCloudFlareで構成されたルートでのみ実行されます。
addeventListener（ 'fetch'、function（event）{
  event.respondwith（handlerequest（event.request））
}）
//応答を処理する関数。
async function handlerequest（request）{
  //このプロキシでリクエストのみが機能します。
  if（request.method！== 'get'）return methodnotallowed（request）;
  //要求されているURL。
  const url = new url（request.url）;
  //要求されたものではなく、「Origin URL」別名Real Blogをリクエストします。
  //これにより、絶対URLが切り替わり、相対パスは変化しません。 
  const originurl = url.toString（）.replace（ 'https://example.com'、 'https://blog.example.com'）;
  // Originページの内容。
  const riginpage = await fetch（originurl）;
  // ResponseにOriginページを与えます。
  const newResponse = new Response（ostirionpage.body、ovirionpage）;
  // Originドメインから「noindex」を削除します。
  newresponse.headers.delete（ "x-robots-tag"）;
  // WordPress専用のCloudFlareキャッシュを削除します。
  // cloudflare apoを使用していて、ブログがWordPressではない場合（ただし
  //メインドメインは）、ApoがOrigin URLで実行されないようにします。
  // newresponse.headers.set（ "cf-edge-cache"、 "no-cache"）; NewResponseを返します。 
}
// おい！リクエストのみを取得します 
function methodnotallowed（request）{
  新しい応答を返します（ `method $ {request.method} not load.`、{
    ステータス：405、
    ヘッダー：
    {'lock'： 'get'}
  }）
}

途中で助けが必要な場合は、私のウェブサイトcreateToday.ioを通じて私に連絡するか、ビデオデモンストレーションについて私のYouTubeをチェックしてください。

以上がサブディレクトリとしてサブドメインを提供する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。