Nginx rewrite proxy pass (For node react app)In Nginx, how can I rewrite all http requests to https while maintaining sub-domain?Nginx reverse proxy + URL rewriteNginx rewrite rule with proxy passPHP app breaks on Nginx, but works on ApacheNginx PHP index.php rewrite not allowing proxy pass to '/writing'Nginx Passenger Node Application URI Rewritenginx reverse proxy hide login query also on 301 redirect or full qualified urlCodeIgniter nginx rewrite rules for i8ln URL'snginx + node app + vuejs appNginx reverse proxy to many local servers + webserver duty
A case where Bishop for knight isn't a good trade
is it correct to say "When it started to rain, I was in the open air."
Can multiple outlets be directly attached to a single breaker?
Will the volt, ampere, ohm or other electrical units change on May 20th, 2019?
Should generated documentation be stored in a Git repository?
Holding rent money for my friend which amounts to over $10k?
Why is it harder to turn a motor/generator with shorted terminals?
What information exactly does an instruction cache store?
How to cope with regret and shame about not fully utilizing opportunities during PhD?
How to continually let my readers know what time it is in my story, in an organic way?
Adding labels and comments to a matrix
How to make a not so good looking person more appealing?
complicated arrows in flowcharts
Why does lemon juice reduce the "fish" odor of sea food — specifically fish?
Can a tourist shoot a gun for recreational purpose in the USA?
How to describe a building set which is like LEGO without using the "LEGO" word?
Substring join or additional table, which is faster?
Is this possible when it comes to the relations of P, NP, NP-Hard and NP-Complete?
How to not get blinded by an attack at dawn
Why was my Canon Speedlite 600EX triggering other flashes?
Does "Software Updater" only update software installed using apt, or also software installed using snap?
Do not cross the line!
The meaning of the Middle English word “king”
Is there any good reason to write "it is easy to see"?
Nginx rewrite proxy pass (For node react app)
In Nginx, how can I rewrite all http requests to https while maintaining sub-domain?Nginx reverse proxy + URL rewriteNginx rewrite rule with proxy passPHP app breaks on Nginx, but works on ApacheNginx PHP index.php rewrite not allowing proxy pass to '/writing'Nginx Passenger Node Application URI Rewritenginx reverse proxy hide login query also on 301 redirect or full qualified urlCodeIgniter nginx rewrite rules for i8ln URL'snginx + node app + vuejs appNginx reverse proxy to many local servers + webserver duty
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
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/;
nginx rewrite node.js npm
asked May 3 at 13:24
simernessimernes
1011
add a comment |
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/;
nginx rewrite node.js npm
asked May 3 at 13:24
simernessimernes
1011
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 3 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 3 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 3 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 3 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 runningnpm run build."
– Michael Hampton♦
May 5 at 1:32
add a comment |
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/;
nginx rewrite node.js npm
asked May 3 at 13:24
simernessimernes
1011
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/;
nginx rewrite node.js npm
nginx rewrite node.js npm
asked May 3 at 13:24
simernessimernes
1011
asked May 3 at 13:24
simernessimernes
1011
asked May 3 at 13:24
simernessimernes
1011
asked May 3 at 13:24
simernessimernes
1011
asked May 3 at 13:24
simernessimernes
1011
1011
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 3 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 3 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 3 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 3 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 runningnpm run build."
– Michael Hampton♦
May 5 at 1:32
add a comment |
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 3 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 3 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 3 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 3 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 runningnpm run build."
– Michael Hampton♦
May 5 at 1:32
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 3 at 13:49
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 3 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 3 at 13:52
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 3 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 3 at 13:57
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 3 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 3 at 14:05
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 3 at 14:05
1
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 5 at 1:32
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 5 at 1:32
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "2"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fserverfault.com%2fquestions%2f965749%2fnginx-rewrite-proxy-pass-for-node-react-app%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Server Fault!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fserverfault.com%2fquestions%2f965749%2fnginx-rewrite-proxy-pass-for-node-react-app%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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 3 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 3 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 3 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 3 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 5 at 1:32