作为前端开发,每次调试接口,把代码发到测试服务器,是很费时费事的一件事情。
为了提高效率,想到了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 === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) { return alias.address; } } } }
所以,这里贴出来一个动态生成nginx.config的工具
function buildNginxConfig(config) { 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 === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) { return alias.address; } } } } var cwd = process.cwd().replace(/\\/g, '/') + '/app'; var protocol = /https|443/.test(config.ip) ? 'https' : 'http'; var servers = [{ browserIp: 'localhost', 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('\n'); 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 サイトの他の関連記事を参照してください。

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

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

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

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

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

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

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


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

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

VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター

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