Nginx static site fetching resources from root instead of subdirectory

Question

I'm trying to serve both an API and frontend static site from the same EC2 instance. I'm using nginx and my server block as follows with the API being in port 8001 and static files to be served to /sub/:

 server_name abc.def.com www.abc.def.com; root /usr/share/nginx/html; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; location / { proxy_set_header X-Real-IP $remote_addr; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_pass http://localhost:8001/; } location /sub/ { alias /var/www/subweb/; index index.html; } 

index.html

<script src="/vendor.aea0bbda027e3c98f5c1.js"></script> 

However what happens is my index.html tries to fetch the resources (javascript file) from root instead of /sub/.

How can I fix that so that it points to the right location?

*UPDATE - as advised, I have switched the order of locations but it's still not working as intended:

server_name abc.def.com www.abc.def.com; root /usr/share/nginx/html; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; location /sub/ { alias /var/www/subweb/; index index.html; } location / { proxy_set_header X-Real-IP $remote_addr; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_pass http://localhost:8001/; } 

Answer 1

Change the order of locations.