Nginix 作為同一域上兩個 nodejs 應用程序的反向處理

Question

我知道它已被問過多次，但我找不到任何解決方法。

最近我設置了一個 Ubuntu 服務器，為兩個 nodejs 應用程序提供服務。 這兩個應用程序駐留在同一個域“mydomain.com”上，但在不同的端口上。 一個應用程序是 kyestonejs 應用程序，第二個應用程序是 nextjs 應用程序

我正在嘗試使用 Nginix 來反向代理這兩個應用程序。 我已經通過了很多教程，但從未找到正確的答案。

我想實現的是使用nginx通過以下方式進行反向代理：

(nextjs)example.com --> localhost:3001

(keystone) example.com/admin --> localhost 3000

nextjs 應用程序運行良好，而 keystonejs 則不行。 它返回一個 404 頁面。 我的理解是，當我添加位置 /admin 時，它會改變路徑並且應用程序無法加載靜態文件，但我可能是錯的。

這是我的 Nginx conf 文件。

server {
    listen 8080;
    listen [::]:8080;
    server_name example.com;
    return 301 https://example.com$request_uri;
}


server {
    listen 443;
    listen [::]:443 ssl;

    ssl on;
    ssl_certificate /mypath/example.com/fullchain.pem;
    ssl_certificate_key /mypath/example.com/privkey.pem;
    include /mypath/options-ssl-nginx.conf;
    ssl_dhparam /mypath/ssl-dhparams.pem;

    server_name  example.com;

   location / {
        proxy_pass   http://localhost:3001;
    }


    location /admin {
        proxy_pass   http://localhost:3000/;
    }

}

兩個應用程序都在一個專用文件夾中運行，因此結構是

└── my-app
    ├── backend
    │   ├── auth.ts
    │   ├── keystone.ts
    │   ├── package.json
    │   ├── package-lock.json
    │   ├── README.md
    │   ├── Schema
    │   │   ├── Blog
    │   │   │   ├── linkSchema.ts
    │   │   │   ├── postSchema.ts
    │   │   │   └── tagSchema.ts
    │   │   └── userSchema.ts
    │   ├── schema.graphql
    │   ├── schema.prisma
    │   ├── schema.ts
    │   └── tsconfig.json
    └── client
        ├── next.config.js
        ├── package.json
        ├── package-lock.json
        ├── pages
        │   ├── api
        │   │   └── hello.js
        │   ├── _app.js
        │   └── index.js
        ├── public
        │   ├── favicon.ico
        │   └── vercel.svg
        ├── README.md
        └── styles
            ├── globals.css
            └── Home.module.css

有沒有可能我應該以這種方式運行兩個 nodejs 應用程序？ 在此先感謝您的幫助

Answer 1

好吧，我在評論中提到的sub_filter方法是您別無選擇的最后機會。 無法保證，有時根本無法獲得所需的結果。 上述答案給出了替換集的一般示例，主要用於 HTML/CSS 內容。 對於您的配置，它看起來像

location /admin {
    proxy_pass http://localhost:3000/;
    sub_filter_types text/css application/javascript;
    sub_filter_once off;
    sub_filter 'href="/' 'href="/admin/';
    sub_filter "href='/" "href='/admin/";
    sub_filter 'src="/'  'src="/admin/';
    sub_filter "src='/"  "src='/admin/";
    sub_filter 'url("/'  'url("/admin/';
    sub_filter "url('/"  "url('/admin/";
    sub_filter "url(/"   "url(/admin/";
}

您的特定應用程序可能不需要其中一些替換，這取決於其 HTML/CSS 結構。 另一方面，它可能需要一些額外的替換規則，尤其是對於使用 fetch 請求等的 javascript 代碼。考慮以下 JS 代碼：

fetch('/data/dataset.json').then((response) => {
    // do something
});

要正確重寫給定的代碼，您需要一個額外的替換規則：

sub_filter "fetch('/" "fetch('/admin/";

當fetch方法將 URL 作為在其他地方組成的變量時，情況可能更糟：

fetch(url).then((response) => { // "url" is some variable assigned elsewhere
    // do something
});

在這里，您可以使用以下替換規則（也適用於前面的示例）：

sub_filter "fetch(" "fetch('/admin' +";

然而，它可以通過多種方式發出異步請求（使用XMLHttpRequest 、 jQuery.ajax等）並且每個復雜的 web 應用程序都需要單獨的方法。 我想你已經明白了。