Prevent source files(bundle.js) access from browser URL

Troubleshooting
1

I have react application in NGINX server. Using the source tab from browser end user able to access all the available bundle.js files:

The js files should be access from react application. not by the url:

Tried to change the location properties with regular expression, internal. but its stops my application too

My config:

location / {
	root   html/mysite;
	index  index.html index.htm;
	try_files $uri /index.html;
}

location ~* \.bundle\.js$ {
	deny all;
	return 403;  
}

location ~ ^/([^/]+)$ {
	deny all;
	return 302 /;  
}

Within \mysite directory

index.html
index.js
12321.bundle.js
3243242.bundle.js
2

Can you share your full configuration? Normally when serving a node.js application, you would have a proxy_pass directive that would route the traffic to a local listener for the node application. Unless you want to serve static files alongside the node.js application, you should be able to just have a proxy_pass statement in the location / block, and not define the root, index or try_files directives. This will stop NGINX from attempting to serve any static files and just proxy all the request to the node.js app running locally.

3 

#user  nobody;
worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;   

    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;
    #gzip  on;

    server {
        listen       8082;
        server_name  localhost;       
		
		location ~ ^/([^/]+)$ {
			#deny all;
			return 302 /;  
		}

        location / {
            root   html/mysite;
            index  index.html index.htm;
			try_files $uri /index.html;
        }
		
		location ~* \.bundle\.js$ {
			#deny all;
			#return 403;
		}
		
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}
4

Based on that config, I assume you are unable to access to your node.js app via nginx at all, correct? As I mentioned in my previous post, you are going to need to use proxy_pass to have nginx proxy the traffic to the node.js app. Assuming the node.js app is running locally, a simple config below should get it up and running:

 #user  nobody;
worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;   

    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;
    #gzip  on;

    server {
        listen       8082;
        server_name  localhost;       

        location / {
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

             proxy_pass http://127.0.0.1:<node app port>;
             proxy_redirect off;
       }
}

Here is some documentation that goes over how to use NGINX with a node.js app:

5

Thank you for your reply. In my NGINX server there is only one application which is React application(Node). My NGINX server path and post is same for node application

6

NGINX is not a node.js server, but it is used as reverse proxy in front of a node.js application. If you look at the first blog post I shared, you can see that the nginx config is setup to route traffic to a node.js app running on localhost(127.0.0.1) on port 3000(ie proxy_pass http://127.0.0.1:3000/;). You will need to start a node application on the nginx node, and then configure nginx to proxy traffic to the application.

7

You are absolutely right for Node application. But my application like static files( html, css and js). When we build react application it serves a static bundle files.

In my cloud server I will just run NGINX. With in html folder I keep my static files.