序文

この記事は、プロジェクトのフロントエンド展開で発生した問題を記録するために使用されます。これには、問題の考え方、ソリューションのアイデア、およびプロジェクトから得られるメリットが含まれます。参考までに、正しいデプロイプロセスに関する記事も書きました。パゴダを使用して、Vue2+Nodejsフルスタックプロジェクトをパッケージ化してTencentCloudServerにデプロイします（2022年の乳母レベルの詳細なチュートリアルの最新バージョン）

記事があいまいな場合は、より多くの人を誤解させないように指摘してください。！

文章

最初devServer.proxyは、サーバーのプロキシアドレスをサーバーアドレスに単純に変更してから、npm run buildパッケージ化されたdistファイルを実行してオンラインで展開しました。

devServer: {
    
    
  proxy: {
    
     // 配置跨域
    '/api': {
    
    
      target: 'http://xxx.xxx.xxx.xxx:8889/api/',
      changOrigin: true,
      pathRewrite: {
    
    
        '^/api': ''
      }
    }
  },
 }

ウェブページを開いてログインしてみてください。まったくジャンプできないことがわかりました。エラーは次のとおりです。著者がnginxをよく知らないため、
ここに画像の説明を挿入
表示されるエラーは404 Not FoundHeです。そこで、私はNginxの公式Webサイトにアクセスして中国語のドキュメントを表示しました。nginx

Nginxは、ロシアのIgor Sysoevによって作成された軽量のWebサーバーであり、高性能のHTTPおよびリバースプロキシサーバーであるだけでなく、IMAP / POP3/SMTPプロキシサーバーでもあります。

では、リバースプロキシサーバーとは何ですか？次のコンテンツはBaidu百科事典からのものです

リバースプロキシサーバーはユーザーとターゲットサーバーの間に配置されますが、ユーザーにとって、リバースプロキシサーバーはターゲットサーバーと同等です。つまり、ユーザーはリバースプロキシサーバーに直接アクセスすることでターゲットサーバーのリソースを取得できます。。同時に、ユーザーはターゲットサーバーのアドレスを知る必要がなく、クライアント側で設定を行う必要もありません。リバースプロキシサーバーは通常、Webアクセラレーションとして使用できます。つまり、リバースプロキシをWebサーバーのフロントエンドとして使用して、ネットワークとサーバーの負荷を軽減し、アクセス効率を向上させます。

等？これは、動作と同じように聞こえませんかdevServer.proxy。しかし実際には、これらはプロキシのクラスではありません。devServer.proxyフォワードプロキシであり、nginxリバースプロキシです。

フォワードプロキシサーバーとリバースプロキシサーバーはクライアントと実サーバーの間にありますが、クライアントの要求をサーバーに転送してから、サーバーの応答をクライアントに転送しますが、それでもいくつかの違いがあります。 2。次のスクリーンショットは、フォワードプロキシとリバースプロキシを最終的に明確に説明した人からのものです。、私は皆に見てもらうことを強くお勧めします、それは非常に詳細です！！！
ここに画像の説明を挿入
本文に戻ると、なぜエラーが報告されるのですか？

vue.config.jsで構成されたdevServer.proxyは、開発環境のバックエンドサーバーにプロキシ要求するローカルサービスにすぎないため、コンポーネントやその他のリソースをパッケージ化するためだけに、プロジェクトをdistファイルにパッケージ化します。プロキシサーバーがパッケージ化されていないため、プロジェクトのリクエストパスが不完全であり、対応するリソースにアクセスできません

この問題を解決する方法は？リソースにアクセスするには、別のプロキシサーバーをロードしてロードする必要があります。オンラインで展開する最も一般的な方法は、リバースプロキシにnginxを使用することです。nginx構成ファイルを変更して追加するproxy_passだけで、xxx.xxx.xxxx.xxxはサーバーアドレスを表し、8889は私のバックエンドのアクセスポートです。

location ^~/api/ {
    
    
     proxy_pass http://xxx.xxx.xxx.xxx:8889/api/;
 }

上記で、問題は解決されました。

補足：この構成はnginxのリバースプロキシとしてカウントされますか？先輩と話し合った後、先輩はさまざまなサービスやシステム研究に従事している兄に尋ね、これがリバースプロキシであることを確認しました。

ここに画像の説明を挿入

この記事があなたに役立つと思うなら、ブックマークしてそれを好きになることを忘れないでください！！

Vueプロジェクトがオンラインでパッケージ化およびデプロイされている場合のdevServer.proxyプロキシの障害を解決するにはどうすればよいですか？nginxリバースプロキシを使用する

Vueプロジェクトがオンラインでパッケージ化およびデプロイされている場合のdevServer.proxyプロキシの障害を解決するにはどうすればよいですか？nginxリバースプロキシを使用する

序文

文章

おすすめ