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 バッチ挿入ループの詳細なサンプルコード

推薦する

オペレーターが知っておくべき 18 個の Nginx プロキシ キャッシュ構成のヒント (どれを知っていますか?)

アプリケーションや Web サイトのパフォーマンスが成功の重要な要素であることは誰もが知っています。...

ByteDance インタビュー: JS を使用して Ajax 同時リクエスト制御を実装する方法

序文正直に言うと、最近とても混乱していると感じています。テクノロジーと人生について。また、将来の発展...

4 つの主要な SQL ランキング関数 ROW_NUMBER、RANK、DENSE_RANK、NTILE の使用方法の紹介

1. ROW_NUMBER()定義: ROW_NUMBER() 関数は、select によってクエリ...

フロントエンド プロジェクトのデフォルトのスクロール バー スタイルを変更する (概要)

スクロールバーのデフォルトスタイルを変更する必要があるプロジェクトを多数作成しましたが、プラグインを...

Vue3 がコンポーネント通信に mitt を使用する手順

目次1. インストール2. プロジェクトにインポートしてマウントする3. 使用Vue2.x はコンポ...

MySql5.7.21 インストールポイント記録メモ

ダウンロードしたバージョンは、Zip 解凍版、Windows システムです。長い間 Windows ...

Linux で 1 つのファイルの内容を別のファイルの末尾にコピーする

問題の説明:たとえば、ファイル 11 の内容は次のとおりです。こんにちはファイル22の内容は次のとお...

さまざまなブラウザに対応するためにCSSで指定フォント@font-faceを導入する際の問題

Web ページを作成するときに、特定のフォントを使用したい場合は、 @font-faceを介して参照...

ウェブレッスンプラン、初心者向けレッスンプラン

指導トピックウェブページ適用グレード高校2年生授業時間1 クラス教科書分析焦点: 静的および動的ウェ...

CSS でインラインブロック要素間のギャップを削除するいくつかの方法の詳細な説明

最近、モバイルページを制作する際には、レイアウトにインラインブロック要素がよく使われますが、インライ...

MySQLのトランザクションとデータ一貫性処理の問題を分析する

この記事では、セキュリティ、使用方法、同時処理などを通じて、MySQL トランザクションとデータの一...

MySQL 8.0.23 無料インストールバージョンの設定詳細チュートリアル

最初のステップは、MySQL 8.0.23の無料インストールバージョンをダウンロードすることです。 ...

WindowsでiTunesのバックアップパスを変更する方法

0. 準備: • iTunesを閉じる• タスクマネージャーでiTunesから始まるサービスを終了し...

シンプルなビデオ連射機能を実装する JavaScript CSS3

この記事では、最も単純なビデオ連射機能をシミュレートするデモを作成します。アイデア:再生する動画と同...

js のループメソッドとさまざまなトラバーサルメソッド

目次forループwhileループdo-while ループループのネストトラバーサルメソッド~のために...