0

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.

2
  • Why would you want to configure serving the admin pages on a separate port? The location block for / is sufficient and accessing localhost/admin should throw up the admin page. Isnt this how your other pages are accessed? Nov 20, 2020 at 12:01
  • Requirement is when page load then admin panel css and multiple js files are loaded on platform. I want to load all these files and admin portal when someone access it. That is the reason I have seperated from the project. Problem is under location /admin Nginx routes to admin code where first index html file is loaded. Then its routing create the trouble and by which all platform not render on the DOM.
    – Aks
    Nov 20, 2020 at 13:36

1 Answer 1

1

Try to stop the react applications and see if the message changes - and tbh i think you should see 502 if nginx was not routing properly

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.