如何使用 Nginx 在不同的 url 上运行两个 js 应用程序? [英] How to run two js apps on different url with Nginx?

问题描述

我想在我的 Nginx 服务器上运行两个不同的 js 应用程序.我的问题是我想在端口 3000 上的主 URL / 上启用 React 应用程序，在端口 1337 上启用不同的 js 应用程序.

I want to run two different js apps on my Nginx server. My problem is that I want to enable the React app on the main URL / on port 3000 and different js app on port 1337.

当我在主 URL 上设置 React App 时，它可以正常工作，但是在不同 URL 上的任何应用程序(如 /admin 加载第二个应用程序)都没有正确加载.我已经更改了路径，现在我在主 URL / 上有我的第二个应用程序，它运行正常，但是当我在 /admin URL 上运行 React 应用程序时，它无法正确加载文件.

When I set React App on the main URL it's working properly but any application on different URL like /admin that loads the second app it's not loaded properly. I have changed the paths and now I have my second app on main URL / and it's working properly but when I run React app on /admin URL it cannot load files properly.

如何使用 Nginx 连接不同位置的两个 js 应用程序?我正在使用 react-react-app 和 create-strapi-app.您可以在 IP:http://51.178.80.233/ 和客户端:http://51.178.80.233/client

How to connect two js apps on different locations using Nginx?? I am using react-react-app and create-strapi-app. You can check this on IP: http://51.178.80.233/ and client: http://51.178.80.233/client

工作示例在每个位置没有两行 root 行.

Working example works without two root lines on each location.

我在 sites-enabled/default 上的配置:

root /var/www/jozefrzadkosz-portfolio.pl;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name _;

        location /client {
                # First attempt to serve request as file, then
                #as directory, then fall back to displaying a 404.
                root /var/www/jozefrzadkosz-portfolio.pl/client;
                proxy_pass http://localhost:3000; #whatever port your app runs on
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }

    location / {
        root /var/www/jozefrzadkosz-portfolio.pl/strapi;
        proxy_pass http://localhost:1337;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

推荐答案

以下是在某些 URI 前缀下代理应用程序的一些注意事项，例如 /admin/.

Here are some considerations about proxying application under some URI prefix, for example, /admin/.

1. 使用正确的位置前缀和proxy_pass 网址参数.当你使用配置

1. Use correct location prefix and proxy_pass URL parameter. When you use configuration

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

request http://example.com/admin/some/path 将按原样传递给上游，即 http://localhost:3000/admin/some/path，这可能是错误的.如果您希望将此请求作为 http://localhost:3000/some/path 传递给上游，则在指定上游地址时必须使用 URI 部分:

request http://example.com/admin/some/path will be passed to upstream as is, i.e. http://localhost:3000/admin/some/path, which is probably wrong. If you want this request to be passed to upstream as http://localhost:3000/some/path, you must use an URI part when you specify an upstream address:

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

有关此行为的更多详细信息，请查看此答案.

Look at this answer for more details about this behavior.

应用程序生成的所有 URL(用于资产、页面等)必须是相对的或包含 /admin 前缀.否则它们将不会在我们的位置块中被处理.这是取决于应用程序类型的重要任务，请查看这个问题 用于反应应用程序(官方文档此处).不幸的是，我对 Strapi 应用程序一无所知.如果您不能影响应用程序 URL 生成机制，剩下的唯一方法是将响应正文中的 URL 替换为 ngx_http_sub_module(对我来说看起来很丑陋的解决方案).

All URLs generated by application (for assets, pages and so on) must be either relative or include /admin prefix. Otherwise they wouldn't be processed whithin our location block. This is non-trivial task which depends on application type, look at this question for react applications (official documentation here). Unfortunaly I know nothing about strapi applications. If you can't affect application URLs generation mechanism, the only way left is to substitute URLs in the response body with the ngx_http_sub_module (looks like quite an ugly solution for me).

这篇关于如何使用 Nginx 在不同的 url 上运行两个 js 应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！