リバースプロキシ設定を実装するためのユニバーサルnginxインターフェース

1. プロキシサーバーとは何ですか?

プロキシサーバーは、クライアントが要求を送信すると、それを直接宛先ホストに送信するのではなく、まずプロキシサーバーに送信します。プロキシサービスは、クライアントの要求を受け入れた後、それをホストに送信し、宛先ホストから返されたデータを受信し、プロキシサーバーのハードディスクに保存してから、クライアントに送信します。

2. プロキシサーバーを使用する理由

1) アクセス速度の向上

ターゲットホストから返されたデータはプロキシサーバーのハードディスクに保存されるため、次回クライアントが同じサイトのデータにアクセスすると、プロキシサーバーのハードディスクから直接読み取られ、キャッシュの役割を果たします。特に人気のあるサイトでは、リクエスト速度が大幅に向上します。

2) ファイアウォール機能

すべてのクライアント要求は、リモートサイトにアクセスするためにプロキシサーバーを経由する必要があるため、プロキシサーバーに制限を設定して、特定の安全でない情報をフィルター処理できます。

3) プロキシサーバー経由でアクセスできない対象サイトにアクセスする

インターネット上には多くのプロキシサーバーが開発されています。クライアントのアクセスが制限されている場合、制限のないプロキシサーバーを介して目的のサイトにアクセスできます。簡単に言えば、ファイアウォールをバイパスするために使用するブラウザーはプロキシサーバーを利用しています。海外に行くことはできませんが、外部ネットワークに直接アクセスすることもできます。

リバースプロキシとフォワードプロキシ

1. フォワードプロキシとは何ですか?リバースプロキシとは何ですか?

フォワードプロキシは、クライアントとターゲットホストの間に設定され、内部ネットワークからインターネットへの接続要求をプロキシするためにのみ使用されます。クライアントはプロキシサーバーを指定し、元々 Web サーバーに直接送信されていた http 要求をプロキシサーバーに送信する必要があります。

リバースプロキシサーバーはサーバー側に設置されます。頻繁に要求されるページをバッファリングすることでサーバーの負荷を軽減し、クライアントの要求を内部ネットワーク上のターゲットサーバーに転送します。また、サーバーから取得した結果を、インターネット上で接続を要求しているクライアントに返します。このとき、プロキシサーバーとターゲットホストは外部からは 1 つのサーバーのように見えます。

2. リバースプロキシの主な用途は何ですか?

現在、多くの大規模 Web サイトではリバースプロキシが使用されています。外部ネットワークから内部サーバーへの悪意のある攻撃を防ぎ、サーバーの負荷を軽減するキャッシュ機能やアクセスセキュリティ制御に加え、負荷分散を実行してユーザーリクエストを複数のサーバーに分散することもできます。

フロントエンド開発者にとって、インターフェースをデバッグし、毎回コードをテストサーバーに送信するのは、非常に時間がかかり、面倒な作業です。

効率を向上させるために、nginx リバースプロキシを使用してこの問題を解決しました。

インターフェースアドレス:
テスト

URLにアクセス:
ローカルホスト

根本的な問題は、ログイン時にクッキーが書き込まれないことです。この問題を解決するために、私たちは多くの回り道をしました。

ワーカープロセス 1;
イベント {
  ワーカー接続 1024;
}
http {
  mime.types を含めます。
  デフォルトタイプ アプリケーション/オクテットストリーム;
  ファイル送信オン;
  キープアライブタイムアウト10;
  サーバー{
    聞く 80;
    server_name ローカルホスト;
    
    場所 =/ {
      add_header X-Frame-Options SAMEORIGIN;
      ルート D:/workspace/;
      インデックス index.html;
    }

    場所 ~* \.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ {
      文字セット utf-8;
      ルート D:/workspace/;
      有効期限は3日です。
    }
    
    場所 = /socket/v2 {
      proxy_pass http://test.com;
      proxy_redirect オフ;
      プロキシ_http_バージョン 1.1;
      proxy_set_header アップグレード $http_upgrade;
      proxy_set_header 接続「アップグレード」;
      proxy_set_header ホスト test.com;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header リモートホスト $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      プロキシ接続タイムアウト 30;
      プロキシ送信タイムアウト 30;
      プロキシ読み取りタイムアウト 60;
      プロキシバッファサイズ 256k;
      プロキシバッファ 4 256k;
    }
    
    位置 / {
      proxy_pass http://test.com;
      proxy_set_header クッキー $http_cookie;
      proxy_cookie_domain test.com ローカルホスト;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header ホスト test.com;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header リモートホスト $remote_addr;
    }
  }
}

コアコードは次の 3 行のコードです。

proxy_set_header クッキー $http_cookie;
proxy_cookie_domain test.com ローカルホスト;
proxy_set_header ホスト test.com;

具体的な説明については、漠然としか理解していません。

1つ目はクッキーを運ぶことです。
クッキーを設定する2番目のドメイン
3番目は実際のホストを設定します

重要な注意: 上記の 3 つの順序を逆にしないでください。そうしないと、プロキシが失敗しますが、その理由はわかりません。

携帯電話でデバッグするにはどうすればいいですか?

携帯電話から localhost に直接アクセスすることはできません。携帯電話とコンピューターを同じネットワークセグメントに接続し、コンピューターの IP を使用してアクセスできます。
しかし、ここではローカルホストのみがプロキシされ、コンピュータのIPはプロキシされません。

したがって、上記の server{...} をコピーし、その中のすべての localhost を自分のコンピューターの IP に変更する必要があります。最終的なコードは次のとおりです。

ワーカープロセス 1;
イベント {
  ワーカー接続 1024;
}
http {
  mime.types を含めます。
  デフォルトタイプ アプリケーション/オクテットストリーム;
  ファイル送信オン;
  キープアライブタイムアウト10;
  サーバー{
    聞く 80;
    server_name ローカルホスト;
    
    場所 =/ {
      add_header X-Frame-Options SAMEORIGIN;
      ルート D:/workspace/;
      インデックス index.html;
    }

    場所 ~* \.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ {
      文字セット utf-8;
      ルート D:/workspace/;
      有効期限は3日です。
    }
    
    場所 = /socket/v2 {
      proxy_pass http://test.com;
      proxy_redirect オフ;
      プロキシ_http_バージョン 1.1;
      proxy_set_header アップグレード $http_upgrade;
      proxy_set_header 接続「アップグレード」;
      proxy_set_header ホスト test.com;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header リモートホスト $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      プロキシ接続タイムアウト 30;
      プロキシ送信タイムアウト 30;
      プロキシ読み取りタイムアウト 60;
      プロキシバッファサイズ 256k;
      プロキシバッファ 4 256k;
    }
    
    位置 / {
      proxy_pass http://test.com;
      proxy_set_header クッキー $http_cookie;
      proxy_cookie_domain test.com ローカルホスト;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header ホスト test.com;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header リモートホスト $remote_addr;
    }
  }
  サーバー{
    8080を聴く;
    サーバー名xx.xx.xx.xx;
    
    場所 =/ {
      add_header X-Frame-Options SAMEORIGIN;
      ルート D:/workspace/;
      インデックス index.html;
    }

    場所 ~* \.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ {
      文字セット utf-8;
      ルート D:/workspace/;
      有効期限は3日です。
    }
    
    場所 = /socket/v2 {
      proxy_pass http://test.com;
      proxy_redirect オフ;
      プロキシ_http_バージョン 1.1;
      proxy_set_header アップグレード $http_upgrade;
      proxy_set_header 接続「アップグレード」;
      proxy_set_header ホスト test.com;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header リモートホスト $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      プロキシ接続タイムアウト 30;
      プロキシ送信タイムアウト 30;
      プロキシ読み取りタイムアウト 60;
      プロキシバッファサイズ 256k;
      プロキシバッファ 4 256k;
    }
    
    位置 / {
      proxy_pass http://test.com;
      proxy_set_header クッキー $http_cookie;
      proxy_cookie_domain test.com xx.xx.xx.xx;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header ホスト test.com;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header リモートホスト $remote_addr;
    }
  }
}

アクセス方法: http://xx.xx.xx.xx:8080

構成がパッケージングツールによって生成される場合、Node.jsを使用してコンピューターのIPアドレスを動的に取得できます。

関数 getIPAdress() {   
  var インターフェース = require('os').networkInterfaces();   
  (インターフェース内のvar devName) {      
    var iface = インターフェース[devName];      
    (var i = 0; i < iface.length; i++) の場合 {         
      var alias = iface[i];         
      if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {            
        alias.address を返します。
      }      
    }   
  } 
}

そこで、nginx.configを動的に生成するツールを紹介します。

関数buildNginxConfig(config) {

  関数 getIPAdress() {   
    var インターフェース = require('os').networkInterfaces();   
    (インターフェース内のvar devName) {      
      var iface = インターフェース[devName];      
      (var i = 0; i < iface.length; i++) の場合 {         
        var alias = iface[i];         
        if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {            
          alias.address を返します。         
        }      
      }   
    } 
  }
  var cwd = process.cwd().replace(/\\/g, '/') + '/app';
  var protocol = /https|443/.test(config.ip) ? 'https' : 'http';

  var サーバー = [{
    ブラウザIP: 'localhost',
    ポート: 80、
    ルート: cwd、
    サーバーIP: config.ip、
    プロトコル: プロトコル、
  }, {
    ブラウザIP: getIPAdress(),
    ポート: 8080、
    ルート: cwd、
    サーバーIP: config.ip、
    プロトコル: プロトコル、
  }].map(関数(項目) {
    戻り値 `
  サーバー{
    ${item.port} をリッスンします。
    サーバー名 ${item.browserIp};
    
    場所 =/ {
      add_header X-Frame-Options SAMEORIGIN;
      ルート ${item.root};
      インデックス index.html;
    }

    場所 ~* \\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ {
      文字セット utf-8;
      ルート ${item.root};
      有効期限は3日です。
    }
    
    場所 = /socket/v2 {
      proxy_pass ${item.protocol}://${item.serverIp};
      proxy_redirect オフ;
      プロキシ_http_バージョン 1.1;
      proxy_set_header アップグレード $http_upgrade;
      proxy_set_header 接続「アップグレード」;
      proxy_set_header ホスト ${item.serverIp};
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header リモートホスト $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      プロキシ接続タイムアウト 30;
      プロキシ送信タイムアウト 30;
      プロキシ読み取りタイムアウト 60;
      プロキシバッファサイズ 256k;
      プロキシバッファ 4 256k;
    }
    
    位置 / {
      proxy_pass ${item.protocol}://${item.serverIp};
      proxy_set_header クッキー $http_cookie;
      proxy_cookie_domain ${item.serverIp} ${item.browserIp};
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header ホスト ${item.serverIp};
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header リモートホスト $remote_addr;
    }
  }`;
  }).join('\n');
  var str = `worker_processes 1;
イベント {
  ワーカー接続 1024;
}
http {
  mime.types を含めます。
  デフォルトタイプ アプリケーション/オクテットストリーム;
  ファイル送信オン;
  キープアライブタイムアウト10;
  ${サーバー}
}`;

  str を返します。
}

エクスポート = module.exports = buildNginxConfig;

このユニバーサルリバースプロキシを使用すると、任意の Web サイトインターフェイスを自由に操作できます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: