検索
ホームページ運用・保守Nginxnginx インターフェイスのリバース プロキシ構成の概要

nginx インターフェイスのリバース プロキシ構成の概要

作为前端开发,每次调试接口,把代码发到测试服务器,是很费时费事的一件事情。
为了提高效率,想到了nginx反向代理来解决这一问题。

接口地址:
test.com

访问地址:
localhost

最核心的问题就是,登录时,无法写入cookie的问题,为了解决这个问题,走了不少弯路。

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile      on;
    keepalive_timeout 10;
    server {
        listen  80;
        server_name  localhost;
        
        location =/ {
            add_header X-Frame-Options SAMEORIGIN;
            root        D:/workspace/;
            index index.html;
        }

        location ~* \.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ {
            charset     utf-8;
            root        D:/workspace/;
            expires     3d;
        }
        
        location = /socket/v2 {
            proxy_pass   http://test.com;
            proxy_redirect off;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Host test.com;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_connect_timeout 30;
            proxy_send_timeout 30;
            proxy_read_timeout 60;
            proxy_buffer_size 256k;
            proxy_buffers 4 256k;
        }
        
        location / {
            proxy_pass   http://test.com;
            proxy_set_header Cookie $http_cookie;
            proxy_cookie_domain test.com localhost;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host test.com;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
        }
    }
}

核心代码在三行代码上:
proxy_set_header Cookie $http_cookie;
proxy_cookie_domain test.com localhost;
proxy_set_header Host test.com;

具体解释我也是一知半解:
第一个是携带cookie,
第二个设置cookie 的 domain
第三个 设置真实的host

重要提示:以上3个的顺序不要颠倒,否则代理失败,我也不知道为什么。

如何在手机上调试呢?

手机上不可能直接访问localhost,可以把手机和电脑连接到同一个网段,使用电脑的ip进行访问。

但是这里只代理了localhost,并没有代理电脑的ip

所以,需要把是上面的server{...}拷贝一份,只需要把里面的localhost全部改成你的电脑ip就可以了,最终代码:

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile      on;
    keepalive_timeout 10;
    server {
        listen  80;
        server_name  localhost;
        
        location =/ {
            add_header X-Frame-Options SAMEORIGIN;
            root        D:/workspace/;
            index index.html;
        }

        location ~* \.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ {
            charset     utf-8;
            root        D:/workspace/;
            expires     3d;
        }
        
        location = /socket/v2 {
            proxy_pass   http://test.com;
            proxy_redirect off;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Host test.com;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_connect_timeout 30;
            proxy_send_timeout 30;
            proxy_read_timeout 60;
            proxy_buffer_size 256k;
            proxy_buffers 4 256k;
        }
        
        location / {
            proxy_pass   http://test.com;
            proxy_set_header Cookie $http_cookie;
            proxy_cookie_domain test.com localhost;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host test.com;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
        }
    }
    server {
        listen  8080;
        server_name  xx.xx.xx.xx;
        
        location =/ {
            add_header X-Frame-Options SAMEORIGIN;
            root        D:/workspace/;
            index index.html;
        }

        location ~* \.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ {
            charset     utf-8;
            root        D:/workspace/;
            expires     3d;
        }
        
        location = /socket/v2 {
            proxy_pass   http://test.com;
            proxy_redirect off;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Host test.com;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_connect_timeout 30;
            proxy_send_timeout 30;
            proxy_read_timeout 60;
            proxy_buffer_size 256k;
            proxy_buffers 4 256k;
        }
        
        location / {
            proxy_pass   http://test.com;
            proxy_set_header Cookie $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 Host test.com;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
        }
    }
}

访问方法:

http://xx.xx.xx.xx:8080 即可

如果是打包工具生成增这个配置的话,可以用nodejs动态获取你电脑的ip

function  getIPAdress() {      
    var  interfaces  =  require('os').networkInterfaces();      
    for (var  devName  in  interfaces) {            
        var  iface  =  interfaces[devName];            
        for (var  i = 0; i < iface.length; i++) {                 
            var  alias  =  iface[i];                 
            if (alias.family  ===  &#39;IPv4&#39;  &&  alias.address  !==  &#39;127.0.0.1&#39;  &&  !alias.internal) {                       
                return  alias.address;
            }            
        }      
    }  
}

所以,这里贴出来一个动态生成nginx.config的工具

function buildNginxConfig(config) {
    function  getIPAdress() {      
        var  interfaces  =  require(&#39;os&#39;).networkInterfaces();      
        for (var  devName  in  interfaces) {            
            var  iface  =  interfaces[devName];            
            for (var  i = 0; i < iface.length; i++) {                 
                var  alias  =  iface[i];                 
                if (alias.family  ===  &#39;IPv4&#39;  &&  alias.address  !==  &#39;127.0.0.1&#39;  &&  !alias.internal) {                       
                    return  alias.address;                 
                }            
            }      
        }  
    }
    var cwd = process.cwd().replace(/\\/g, &#39;/&#39;) + &#39;/app&#39;;
    var protocol = /https|443/.test(config.ip) ? &#39;https&#39; : &#39;http&#39;;
    var servers = [{
        browserIp: &#39;localhost&#39;,
        port: 80,
        root: cwd,
        serverIp: config.ip,
        protocol: protocol,
    }, {
        browserIp: getIPAdress(),
        port: 8080,
        root: cwd,
        serverIp: config.ip,
        protocol: protocol,
    }].map(function(item) {
        return `
    server {
        listen  ${item.port};
        server_name  ${item.browserIp};
        
        location =/ {
            add_header X-Frame-Options SAMEORIGIN;
            root        ${item.root};
            index index.html;
        }
        location ~* \\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ {
            charset     utf-8;
            root        ${item.root};
            expires     3d;
        }
        
        location = /socket/v2 {
            proxy_pass   ${item.protocol}://${item.serverIp};
            proxy_redirect off;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Host ${item.serverIp};
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_connect_timeout 30;
            proxy_send_timeout 30;
            proxy_read_timeout 60;
            proxy_buffer_size 256k;
            proxy_buffers 4 256k;
        }
        
        location / {
            proxy_pass   ${item.protocol}://${item.serverIp};
            proxy_set_header Cookie $http_cookie;
            proxy_cookie_domain ${item.serverIp} ${item.browserIp};
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host ${item.serverIp};
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
        }
    }`;
    }).join(&#39;\n&#39;);
    var str = `worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile      on;
    keepalive_timeout 10;
    ${servers}
}`;
    return str;
}
exports = module.exports = buildNginxConfig;

有了这个万能反向代理,可以随心所欲的玩转任何网站接口了

推荐教程:nginx教程

以上がnginx インターフェイスのリバース プロキシ構成の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
NGINX:最新のWebアプリケーション用の汎用ツールNGINX:最新のWebアプリケーション用の汎用ツールApr 11, 2025 am 12:03 AM

nginxisentialformodernwebapplicationsdueToitsRolesasareverseproxy、loadbalancer、andwebserver、weberporformanceandscalability.1)itactsasaReverseproxy、拡張、およびパフォーマンスを強化し、パフォーマンスを強化し、積極的に積極的なものを増やします

nginx SSL/TLS構成:HTTPSでWebサイトを保護しますnginx SSL/TLS構成:HTTPSでWebサイトを保護しますApr 10, 2025 am 09:38 AM

NGINXを通じてWebサイトのセキュリティを確保するには、次の手順が必要です。1。基本的な構成を作成し、SSL証明書と秘密鍵を指定します。 2。構成を最適化し、HTTP/2を有効にし、OCSPSTAPLING。 3.証明書パスや暗号化スイートの問題などの一般的なエラーをデバッグします。 4。let'sencryptの使用やセッションの多重化など、アプリケーションのパフォーマンス最適化の提案。

Nginxインタビューの質問:DevOps/System管理インタビューをAceNginxインタビューの質問:DevOps/System管理インタビューをAceApr 09, 2025 am 12:14 AM

Nginxは、高性能のHTTPおよびリバースプロキシサーバーであり、高い並行接続の取り扱いに優れています。 1)基本的な構成:ポートを聞いて静的ファイルサービスを提供します。 2)高度な構成:逆プロキシとロードバランシングを実装します。 3)デバッグスキル:エラーログを確認し、構成ファイルをテストします。 4)パフォーマンスの最適化:GZIP圧縮を有効にし、キャッシュポリシーを調整します。

nginxキャッシュテクニック:ウェブサイトのパフォーマンスの向上nginxキャッシュテクニック:ウェブサイトのパフォーマンスの向上Apr 08, 2025 am 12:18 AM

Nginxキャッシュは、次の手順を通じてWebサイトのパフォーマンスを大幅に改善できます。1)キャッシュ領域を定義し、キャッシュパスを設定します。 2)キャッシュ有効期間を構成します。 3)異なるコンテンツに従って異なるキャッシュポリシーを設定します。 4)キャッシュストレージと負荷分散を最適化します。 5)キャッシュ効果を監視およびデバッグします。これらの方法により、Nginxキャッシュはバックエンドサーバーの圧力を軽減し、応答速度とユーザーエクスペリエンスを向上させることができます。

Dockerを使用したNginx:コンテナ化されたアプリケーションの展開とスケーリングDockerを使用したNginx:コンテナ化されたアプリケーションの展開とスケーリングApr 07, 2025 am 12:08 AM

DockerComposeを使用すると、Nginxの展開と管理が簡素化され、DockerswarmまたはKubernetesをスケーリングすることは一般的な慣行です。 1)DockerComposeを使用してNginxコンテナを定義および実行する、2)DockerswarmまたはKubernetesを介してクラスター管理と自動スケーリングを実装します。

Advanced Nginx構成:マスタリングサーバーブロックとリバースプロキシAdvanced Nginx構成:マスタリングサーバーブロックとリバースプロキシApr 06, 2025 am 12:05 AM

nginxの高度な構成は、サーバーブロックとリバースプロキシを介して実装できます。1。サーバーブロックにより、複数のWebサイトを1つの場合に実行することができます。各ブロックは個別に構成されます。 2.逆プロキシは、リクエストをバックエンドサーバーに転送して、負荷分散とキャッシュアクセラレーションを実現します。

nginxパフォーマンスチューニング:速度と低レイテンシの最適化nginxパフォーマンスチューニング:速度と低レイテンシの最適化Apr 05, 2025 am 12:08 AM

NGINXのパフォーマンスチューニングは、ワーカープロセスの数、接続プールサイズの数、GZIP圧縮とHTTP/2プロトコルの有効化、およびキャッシュとロードバランスを使用することで実現できます。 1.ワーカープロセスの数と接続プールサイズを調整します:worker_processesauto;イベント{worker_connections1024;}。 2。GZIP圧縮とhttp/2プロトコルを有効にします:http {gzipon; server {risten43sslhttp2;}}。 3。キャッシュ最適化:http {proxy_cache_path/path/to/cachelevels = 1:2k

Nginxセキュリティ硬化:Webサーバーを攻撃から保護しますNginxセキュリティ硬化:Webサーバーを攻撃から保護しますApr 04, 2025 am 12:06 AM

NGINXセキュリティの強化は、次の手順を通じて達成できます。1)すべてのトラフィックがHTTPSを介して送信されることを確認する、2)HTTPヘッダーを構成してコミュニケーションセキュリティを強化するように設定します。これらの測定は、Nginxサーバーのセキュリティを効果的に改善できます。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。