Nginx は、複数の単一ページ アプリケーションの静的リソースを同じサーバーにデプロイします

サーバー構成はポート 80 のみを開きます。現在、ルート パスのリソース構成があります。ここで、静的リソースの新しいセットを追加する必要があります。つまり、同じサーバーの下にパス マッチングの新しいセットを追加する必要があります。

次のようにnginxを直接構成します。次のコードは単なるデモです

{
    server {
        listen       80;
        server_name  localhost;
        
          location /  {
              root /root/static; #根服务资源
              index index.html;
              try_files $uri $uri/ /index.html;
          }
          
          location  /news { 
            alias  /home/www/news/dist/; # news服务资源
            index  index.html;
            try_files $uri $uri/ /index.html;
        }  
    }
}

ルートとエイリアスの違いについては、インターネット上に多くの情報があります. 興味がある場合は、自分で調べることができます. 簡単に言えば、最終的な要求がルート + ロケーションまたは直接のエイリアスであるかどうかです.

ニュース プロジェクトは単一ページのアプリケーションであり、ルーティング モードは履歴であるため、フロントエンド ルーティングにアクセスすると、要求はサービス リソースに送られます。これは、try_files の役割の説明です. ファイルまたはファイルが順番に一致するかどうかをチェックし、最初に成功した一致の結果を返します. 一致がない場合は、内部リダイレクトが実行されることに注意してくださいここでは、リクエストの例は {host}/news/index.html ではなく {host}/index.html です。場所は追加されないため、try_files の最後のパラメーターを /news/index に変更する必要があります。 html.

最終的な構成は

{
    server {
        listen       80;
        server_name  localhost;
        
          location /  {
              root /root/static; #根服务资源
              index index.html;
              try_files $uri $uri/ /index.html;
          }
          
          location  /news { 
            alias  /home/www/news/dist/; # news服务资源
            index  index.html;
            try_files $uri $uri/ /news/index.html;
        }
          
    }
}