Vue プロジェクトを使用して複数のプロキシを構成する際の注意事項

Vue プロジェクトを使用して複数のプロキシを構成する際の注意事項

Vue プロジェクトの開発プロセスでは、ローカル デバッグの利便性のため、通常、vue.config.js で devServer を設定してローカルでサーバーを起動します。このオプションでは、プロキシ プロパティを設定して、ローカル (例: /api/action) に向けられたリクエストをバックエンド開発サーバー (例: http://xxx.xxx.xxx/api/action) にプロキシします。

開発サーバー: {
        ポート: 8081、
        プロキシ: {
            '/api/アクション': {
                ターゲット: 'http://192.168.200.106:81',
                変更元: true、
                ws: 真、
                安全: 偽
            }
        }
    },
​```

この構成では、次の 2 つの点に注意してください。

重複するインターフェース アドレスがある場合、一致度が最も低いものが最後に配置されます。

例えば:

  1. * / を 192.191.1.1 に一致させます。
  2. * /api を 192.191.1.2 に一致させる
  3. * /api/action を 192.191.1.3 に一致させる

次のように書くと:

プロキシ: {
            '/': {
                ターゲット: 'http://192.191.1.1',
                変更元: true、
                ws: 真、
                安全: 偽
            },
    '/api': {
                ターゲット: 'http://192.191.1.2',
                変更元: true、
                ws: 真、
                安全: 偽
            },
    '/api/アクション': {
                ターゲット: 'http://192.191.1.3',
                変更元: true、
                ws: 真、
                安全: 偽
            }
        }

すると、/、/api、/api/actionへのすべてのリクエストは192.191.1.1にプロキシされます。

その理由は、ここでのマッチングは実際には通常のマッチング プロセスであるためです。/api を要求すると、まず最初の構成項目を読み取り、構成内の / を使用して要求内の /api とマッチングします。要求された /api には構成項目 / が含まれていることがわかり、マッチングは成功します。要求は 192.191.1.1 に直接プロキシされます。/api/action のマッチングについても同様です。

つまり、その一致ルールは、構成項目のアドレスを使用して、リクエストのアドレスと一致させることです。リクエストのアドレスに構成のアドレスが含まれている場合、一致は成功します。それ以外の場合は、次の構成項目を選択して一致を続行します。

したがって、要求アドレスと一致する構成アドレスの文字数が少ないほど、一致度は低くなります。 上記の例では、設定内のアドレス (/) の 1 文字のみがリクエスト アドレス (/api) と一致するため、一致度は低くなります。

したがって、正しい書き方は次のようになります。

プロキシ: {
            '/api/アクション': {
                ターゲット: 'http://192.191.1.3',
                変更元: true、
                ws: 真、
                安全: 偽
            },
    '/api': {
                ターゲット: 'http://192.191.1.2',
                変更元: true、
                ws: 真、
                安全: 偽
            },
    '/': {
                ターゲット: 'http://192.191.1.1',
                変更元: true、
                ws: 真、
                安全: 偽
            }
        }

このようにして、3つのアドレスへのリクエストは、対応するアドレスに正しくプロキシされる。

複数のアドレスが同じターゲットをプロキシする場合、それらをマージすることができます

実際のアプリケーションでは、バックエンドはマイクロサービス モードで開発されるため、開発フェーズでは、異なるサービスを異なるアドレスにプロキシする場合があります。サービスの数が多い場合、プロキシの数も大きくなります。

プロキシ: {
  		'/api/アクション': {
                ターゲット: 'http://192.191.1.3',
                変更元: true、
                ws: 真、
                安全: 偽
            },
              '/api/action2': {
                ターゲット: 'http://192.191.1.4',
                変更元: true、
                ws: 真、
                安全: 偽
            },
              '/api/action3': {
                ターゲット: 'http://192.191.1.3',
                変更元: true、
                ws: 真、
                安全: 偽
            },
              '/api/action4': {
                ターゲット: 'http://192.191.1.4',
                変更元: true、
                ws: 真、
                安全: 偽
            },
              '/api/action5': {
                ターゲット: 'http://192.191.1.5',
                変更元: true、
                ws: 真、
                安全: 偽
            },
              '/api/action6': {
                ターゲット: 'http://192.191.1.6',
                変更元: true、
                ws: 真、
                安全: 偽
            },
              '/api/action7': {
                ターゲット: 'http://192.191.1.5',
                変更元: true、
                ws: 真、
                安全: 偽
            },
              '/api/action8': {
                ターゲット: 'http://192.191.1.6',
                変更元: true、
                ws: 真、
                安全: 偽
            },
              '/api/action9': {
                ターゲット: 'http://192.191.1.7',
                変更元: true、
                ws: 真、
                安全: 偽
            },
			 '/api': {
                ターゲット: 'http://192.191.1.2',
                変更元: true、
                ws: 真、
                安全: 偽
            },
			 '/': {
                ターゲット: 'http://192.191.1.1',
                変更元: true、
                ws: 真、
                安全: 偽
            },              
        }

構成されたプロキシの数が 10 を超えると、開発環境でコンパイルおよびパッケージ化するときに次のエラーが報告されます。

ここに画像の説明を挿入

エラーを解決し、コード サイズを削減するために、同じターゲットを持つ構成項目をマージすることができます。上記からわかるように、これは実際には通常のマッチング プロセスなので、通常の構文を使用してマージできます。

プロキシ: {
  		'/api/アクション|/api/アクション3': {
                ターゲット: 'http://192.191.1.3',
                変更元: true、
                ws: 真、
                安全: 偽
            },
              '/api/action2|/api/action4'': {
                ターゲット: 'http://192.191.1.4',
                変更元: true、
                ws: 真、
                安全: 偽
            },
             
              '/api/アクション5|/api/アクション7': {
                ターゲット: 'http://192.191.1.5',
                変更元: true、
                ws: 真、
                安全: 偽
            },
              '/api/アクション6|/api/アクション8': {
                ターゲット: 'http://192.191.1.6',
                変更元: true、
                ws: 真、
                安全: 偽
            },
              '/api/action9': {
                ターゲット: 'http://192.191.1.7',
                変更元: true、
                ws: 真、
                安全: 偽
            },
			 '/api': {
                ターゲット: 'http://192.191.1.2',
                変更元: true、
                ws: 真、
                安全: 偽
            },
			 '/': {
                ターゲット: 'http://192.191.1.1',
                変更元: true、
                ws: 真、
                安全: 偽
            },              
        }

もちろん、正式に導入された場合でも、バックエンドは統合エージェントとして機能する必要があります。

上記は私の個人的な経験です。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue で異なるプロキシを構成して、異なるバックグラウンド操作に同時にアクセスします。
  • Vueプロジェクト構成のクロスドメインアクセスとプロキシ設定方法
  • Vue 構成マルチプロキシ サービス インターフェース アドレス操作
  • webpack+vue-cil での ProxyTable 設定インターフェース アドレス プロキシ操作
  • VueCli4 プロジェクトでリバース プロキシを設定する方法
  • Vue (2.x, 3.0) はクロスドメインプロキシを設定します
  • Vue cli3 はプロキシプロキシの無効なソリューションを設定します
  • Vue 構成ファイルでプロキシ v2 バージョンを実装する方法

<<:  MYSQLでプロシージャの名前を変更する方法の詳細な説明

>>:  MySQL バッチ挿入ループの詳細なサンプルコード

推薦する

VirtualBox Centos7 の NAT+ホストオンリーネットワークの落とし穴のまとめ

目次1. 問題の背景2. 仮想マシン ネットワーク カードの接続方法は何ですか? 2.1 NAT 2...

Quickjs は JavaScript サンドボックスの詳細をカプセル化します

目次1. シナリオ2. 基盤となるAPIを簡素化する2.1 自動的に破棄を呼び出す2.2 VM値を作...

nginx + php の「入力ファイルが指定されていません」の解決策

本日、ローカル開発環境で突然「入力ファイルが指定されていません」というエラーが発生してしまいました。...

LinuxにPython 3.6をインストールして落とし穴を避ける

Python 3のインストール1. 依存環境をインストールするPython3 はインストール プロセ...

MySQLがデータの削除を推奨しない理由

目次序文InnoDB ストレージ アーキテクチャInnodb テーブルスペースインドストレージディス...

iPhone デバイスの WAP ページでフォントサイズが大きい問題の解決策

JavaScriptコントロールを使用したくない場合は、次の方法を試してください。 Safariブラ...

9999px に別れを告げる新しい CSS 画像置換テクニック (背景表示と画面外へのテキストの移動)

-9999 ピクセルの画像置換技術は、ここ 10 年近く人気があります。テキスト要素を画像に置き換え...

Java を Mysql バージョン 8.0.18 に接続する方法の詳細な説明

JavaとMysql 8.0.18バージョンの接続方法については、参考までに具体的な内容は以下のとお...

MySQL 8.0.11 Mac 用インストール ガイド

MACはmysql8.0をインストールします。具体的な内容は次のとおりです。 1. ダウンロードアド...

2013年のウェブデザインUIの最もホットなトレンド最も人気のあるUIデザイン

時は経つのが早く、わずか 6 日後には 2013 年が歴史になります。今年は、いわゆるトレンドが多す...

CSS3+HTML5+JSでブロックの縮小・拡大アニメーション効果を実現

最近、あるプロジェクトに取り組んでいたとき、自分のプロジェクトでは CSS3 のアニメーション技術を...

Centos6.6 で php7 + nginx 環境をインストールする方法

この記事では、centos6.6 で php7 + nginx 環境をインストールする方法について説...

MySQLストアドプロシージャにおけるカーソル(DECLARE)の原理と使い方の詳細な説明

この記事では、例を使用して、MySQL ストアド プロシージャにおけるカーソル (DECLARE) ...

一定期間の日ごと、時間ごとの統計データを取得するMySQLの詳しい説明

毎日の統計情報を取得するプロジェクトを実行する際、プロジェクト ログを分析する必要があります。要件の...

画像比較を実現するjQueryプラグイン

この記事の例では、画像比較を実現するためのjQueryプラグインの具体的なコードを参考までに共有して...