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 つの点に注意してください。

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

例えば：

* / を 192.191.1.1 に一致させます。
* /api を 192.191.1.2 に一致させる
* /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 を応援していただければ幸いです。

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