0

I am running a Node React app on localhost:3000, which I am reverse proxying with Nginx and exposing on localhost/web/. However, there are issues with the files generated by the app, because they are not referenced correctly.

For example, some .js files are generated in localhost:3000/static/js, but the links are not correctly referencing the relative path (see code below). I think it is possible to fix this with a rewrite, but the way I have it now is not working properly. How should I rewrite so that all relative links will be prepended with /web/ ?

Generated html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <meta
    name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <!--
    manifest.json provides metadata used when your web app is installed on a
    user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="/manifest.json" />
    <!--
    Template...
    ...
    -->
    <title>React App</title>
</head>
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
    Template
    ...
    -->
<script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script></body>
</html>

Here is my Nginx sites-available snippet:

server {
    listen 80;
    server_name localhost;
    return 301 https://$server_name$request_uri;
}

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

    include snippets/self-signed.conf;
    include snippets/ssl-params.conf;

    access_log /var/log/nginx/site.access.log;
    error_log /var/log/nginx/site.error.log error;

    add_header "Access-Control-Allow-Credentials" "true";
    add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS";
    add_header "X-Frame-Options" "SAMEORIGIN";

    location /web/ {
        proxy_set_header        Host            $http_host;
        proxy_set_header        X-Real-IP       $remote_addr;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header        Upgrade         $http_upgrade;
        proxy_set_header        Connection      'upgrade';
        rewrite                 ^(.*)$ /web/$1 break;
        proxy_pass              http://localhost:3000/;
    }
}
simernes
  • 121
  • 1
  • 5
  • You want nginx to rewrite your HTML? You could do that yourself. It would be a lot better performance than trying to do it dynamically on every request. – Michael Hampton May 03 '19 at 13:49
  • It is HTML that is generated by a very common JavaScript framework called React. Is it not a recommended approach? But also in general, yes it would be nice so that the app could work when reverse proxying to various locations. – simernes May 03 '19 at 13:52
  • Nobody said you couldn't edit the generated HTML. Of course it's best practice to not put such things in a (virtual) subdirectory anyway. – Michael Hampton May 03 '19 at 13:57
  • Thank you very much for your answer. Could you please direct me to where I can understand why putting it in a virtual subdirectory is not best practice? But again, I'm just trying to understand why my rewrite here isn't working. – simernes May 03 '19 at 14:05
  • 1
    All the reasons not to do it wouldn't fit in this comment, and it's highly opinionated anyway. If you really want to use a subdirectory, then read the comments in the original index.html that create-react-app created: "Learn how to configure a non-root public URL by running `npm run build`." – Michael Hampton May 05 '19 at 01:32

0 Answers0