How to set up proxying past NGINX for Create-React-App running on localhost:3000

Question

I have a React application created through create-react-app running on an Nginx Server. Of course it has the built in webpack server you can start by running npm start and it runs on localhost:3000 of course. Due to it being setup with Nginx, the react app is built using npm run build and sent to a location where Nginx serves it statically.

The issue is I don't want to build this project statically every time I make a change, so I want to do npm start and activate localhost:3000 and view my changes from here. I have no idea though how to setup Nginx to get to this localhost:3000 from the browser. It seems impossible.

I have used the "proxy pass" setting for location in Nginx and it doesn't work. Do I have to set up another .conf file and make another server entry and URL to do this? anyone have any ideas on how you can setup some url that you can bypass the production url setting that serves the static site and make it go to localhost:3000. This is a maddening problem.

Answer 1

yarn start and nginx cannot listen the same port, I have some idea for your case.

1. auto build your project, and use nginx proxy your static file.
2. change the port for yarn start, and use nginx proxy localhost:3000 to your customized port

the ngixn config file like this

server {
   listen 3001;
   server_name  tomcat.shaochenfeng.com;
   index  index.php index.html index.htm;

   location / {
     proxy_pass  http://localhost:3000;
     proxy_set_header Host $proxy_host; 
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   }
}