I have MERN Stack and I want my Node to only communicate with my frontend and how can I do it?

So, I have two different instances that are running. One is hosting Node and the other one is hosting React. My DB is on Atlas. And I am using AWS EC2 service.

I want to make sure that Node is only communicating with my React app. I was trying to restrict the IP address that it only accepts my React App IP. But, I realized that clients receive my frontend from the server and render it on their own PCs. So, it won’t work.

I was thinking of only accepting my frontend domain name and it looks like it is not ideal and I could not have found any related documents.

What would be an industry standard in this case? Both React and Node have given Domain names.

Hi @gihihikikiaihi, welcome to the forums!

If you have a “front-end” server, that serves your front-end, it should also act as a proxy, in the sense any calls the client-side makes goes thru this server, which sends it off to the nodejs server.

If this is your setup, then you usually are able to “lock down” your nodejs server to only accept connections from the IP of your front-end server. You also might be able to lock down your nodejs server from being accessible “outside of the cloud”, thus only allowing other ec2 services to access it, either only the front-end one, or other ones within your AWS project.

The domain name is just an “alias” for your actual IP in this scenario, so the actual ec2 instance IPs is probably more sensible.

PS. I don’t use AWS, rather I use Google Cloud, and this setup is available and supported, so I assume it exists in some form within AWS.

1 Like

Thank you for the answer! I was trying to use AWS to allowing only the React IP address. I am a newbie and I am lost here. So, if I set up a proxy on React App, does this fix the IP address in each clients? Let’s say

My React Hosting instance’s IP address is -> 1.1.1.1
and I am trying to use this outside of this IP address (client A) which is -> 2.2.2.2

When I go on my React App from A, I am using 2.2.2.2 IP address, not 1.1.1.1 - So the app will not be able to connect to my Node. So, if I use proxy then it will only have one IP address regardless of the clients’ IP Address?

Thank you so much for your help man. !

I want to make sure your not using the Create React App (or similar) dev server as your “front-end server” during deployment, as this isn’t production grade. Usually a front-end server/proxy is something that is quick and scalable like nginx. As the main job is to route http calls, and serve the compiled front-end itself.

If your already getting confused about using nginx, or this setup in general I recommend just serving your compiled React code from your nodejs instance. This will cut down on complexity as you end up with only 1 server to deploy and manage. This wont scale as well if you end up needing to deploy often, or scale different parts of the stack, but these issues shouldn’t matter if you aren’t handling thousands of requests per second.

I recommend stepping back and verifying what your trying to achieve, and if what your doing right now (have two servers communicate securely between each other) is something you want to manage right now, as managing just 1 server is usually hard enough when starting out. Managing multiple in a whole other game, and this assume you even need multiple servers. (you gotta pay more too)

Usually when working locally you have the Create React App dev server proxy requests to your actual api server (nodejs in this case), this is done so you get live-reloads and other nice features. But once the time comes to deploy, you compile your React code to static files (html,css,js) that can be served from anywhere, as long as when it makes http requests it gets to the same api endpoints.

1 Like

I am using NGINX for both React and Node. And, that is how I have linked up with my Domains.

Ok if your already using nginx to serve the compiled front-end React code, that code should be requesting data from its own IP. So for example your http call should be:

fetch('/api/my/data');

this will have the webpack call nginx, and nginx needs to route the call(s) to your nodejs back-end.

1 Like

I am so sorry to keep bothering you and thank you so much for the help. So, that code I should put it on config file for nginx correct?

That code is just an example call from React using the fetch api.

You will need to configure nginx to redirect your http calls from React to your nodejs server. I recommend reading about how to configure nginx in their docs and looking up examples for your use-case (I think you’d call it a basic reverse proxy)

Again, if configuring Nginx becomes to much of a pain just don’t use it because I think its overkill most of the time, and is more expensive to run (2 servers instead of 1)

1 Like

Thank you so much!!!

1 Like