How to make proxy_pass on React Nginx app?

Question

Nginx

Launched a React app on port 3006

Doing proxying

location /crm/ {
        rewrite ^/crm/(.*)$ /$1  break;
        proxy_pass http://127.0.0.1:3006/;
    }

Proxying happens but React can't find the files it needs to work


It looks for files in the path https://my.site , and according to the proxy it should look for empty https://my.site/crm/ ....

How do I fix it so that the files can be found and everything works?

Tried

sub_filter 'src="/'  'src="/crm/';
sub_filter_once off;

But doesn't work. gzipis in modeoff

gzip off;
gzip_comp_level 5;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

When I open http://my.site:3006the application it works
When I open https://my.site/crmthe application it doesn't work

Full nginx config /etc/nginx/conf.d/my.site.conf
Root folder /var/www/html

server {
    listen 443 ssl;
    server_name my.site www.my.site;

    root /var/www/html/;
    index index.html;

    ssl_certificate /var/www/html/ssl/ssl-bundle-21.crt;
    ssl_certificate_key /var/www/html/ssl/HSSL-123456789p4cc9.key;
    
    gzip off;
    gzip_comp_level 5;
    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

    if ($allowed_country = no) {
        return 403;
    }

    location ~ ^/api {

        client_max_body_size 50M;

        try_files $uri /api/public/index.php;
        index index.php;

        location ~ \.php$ {
            fastcgi_split_path_info ^(.+\.php)(/.+)$;
            fastcgi_pass unix:/run/php/php8.0-fpm.sock;
            fastcgi_index index.php;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            fastcgi_intercept_errors on;
            include fastcgi_params;
        }
    }

    location ~ ^/files {
        try_files $uri /api/public$request_uri;
    }

    location ~ /crm/ {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_pass http://127.0.0.1:3006;
    }

    location / {
        proxy_pass http://127.0.0.1:5000;
    }
}

server {
    listen 80;
    server_name my.site www.my.site;

    if ($allowed_country = no) {
        return 403;
    }
    
    location / {
        return 301 https://$host$request_uri;
    }
}

Answer 1

The construct rewrite ^/crm/(.*)$ /$1 break;removes /crm/ from the URI
This is how it will be proxied:

location ~ /crm/ {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_pass http://127.0.0.1:3006;
    }

Result:

GET /crm/test.css HTTP/1.0
Host: example.com
X-Real-IP: 192.168.254.254
X-Forwarded-For: 192.168.254.254
X-Forwarded-Proto: https
Connection: close
user-agent: curl/7.68.0
accept: */*

But this is still not an option, since Nginx must return the statics on its own. To do this, you need to specify alias or root, not proxy_pass