I am using the react for the frontend. I have a code which runs on port 3000.
Under that admin panel code is also there which I need to move to out of the project and run separately on different port let's say 3001. So on nginx config file I have created the location for both the project like this
Under server block
location /admin/ {
proxy_pass http://127.0.0.1:3001;
}
location / {
proxy_pass http://127.0.0.1:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
By this way when I open the localhost, my code is running properly.
Now if I type localhost/admin/ then it return 404.
For the nginx route confirmation, I have change the title of admin panel index.html so that it is clearly mentioned that whether my routes of nginx are working or not So after this when I hit the admin url then through inspect element I saw that title are changed but due to routes issue of main server it return 404.
I also wrote the alert hello world under index.html file of admin panel code so that it alert will generate when admin code is rendered.
After this when I Open the localhost/admin then alert will generate and then when I close the alert modal then page redirected to 404. I don't know why main code is overriding here.
What it seems like it pick the both the route at same time. So after hit the admin url instant index.html page is load and then routes load from 3000 port project instead of 3001. On 3000 port project there is no such route like this hence it return 404.
Anyone have any idea how to tackle this type of Issues.
Both project are running fine if run individually through the port number like localhost:3000/ or localhost:3001/admin/
Please suggest me that whether there is an issue from nginx side or from react side.
Any help or suggestion is really appreciated. Thanks in advance.
