How to run two js apps on different url with Nginx?

Question

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.

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.

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

Working example works without two root lines on each location.

My config on 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;
    }

How about using subdomain? Create a dns A type record with name client and point to your IP. create a config file in sites-enabled folder. — Sameer Reza Khan
– Sameer Reza Khan, Commented Jan 30, 2020 at 21:19

Ivan Shatsky · Accepted Answer · 2020-01-31 05:12:40Z

1

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

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 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.
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).

answered Jan 31, 2020 at 5:12

Ivan Shatsky

16.2k3 gold badges28 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ivan Shatsky Over a year ago

These are not two different approaches, these are two necessary conditions :) If all of your apps are working normally than they are already generating proper URLs (probably relative since you do nothing to change them).

Collectives™ on Stack Overflow

How to run two js apps on different url with Nginx?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related