I have a React app that runs on https://localhost:3000.
I have a domain like https://example.com/some/path.
When I enter https://example.com/some/path into my browser, I'd like it to redirect to https://localhost:3000. So the way I've seen this possible is using a reverse proxy and I'm trying to nginx setup to do so.
However I keep facing in an issue that I need include the port number when I go to the full url for example: https://example.com:3000/some/path.
How do i prevent this from happening? i.e. I'd like to just enter https://example.com/some/path.
My nginx conf file looks like this:
#user nobody;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 443 ssl;
server_name example.com;
ssl_certificate cert.pem;
ssl_certificate_key cert.key;
location /some/path {
return 301 $scheme://localhost:3000$request_uri;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
server {
listen 3000 ssl;
ssl_certificate cert.pem;
ssl_certificate_key cert.key;
server_name localhost;
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains";
location / {
proxy_pass https://localhost:3000;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
include servers/*;
}
And in my hosts file I have the line:
127.0.0.1 example.com
Even if I keep it simple and have only one server section with location like:
location /some/path {
proxy_pass https://localhost:3000;
}
That kind of works - however looking at the console the assets themselves don't load https://example.com/static/js/bundle.js when it needs to be https://example.com:3000/static/js/bundle.js
Any help would be appreciated.