I currently have the following NGINX configuration set up:
events {
worker_connections 1024;
}
http {
server {
listen 80;
server_name localhost;
location / {
root C:/test;
index index.html;
try_files $uri $uri/ /index.html;
}
location /display/outbound {
alias C:/test/display/outbound;
index index.html;
try_files $uri $uri/ /display/outbound/index.html;
}
location /display/outbound/api/ {
proxy_pass http://localhost:52000/api/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
# Setting MIME types for .js and .css files
types {
text/html html;
application/javascript js;
text/css css;
}
# Serving static assets
location /assets/ {
alias C:/test/display/outbound/assets/;
}
# Serving favicon
location /favicon.ico {
alias C:/test/display/outbound/favicon.ico;
}
}
}
The configuration has three main aspects:
- The route http://localhost returns a static HTML page with only an h1 element, which is functioning correctly.
- A Vue 3 Vite Single Page Application hosted at http://localhost/display/outbound. The files seem to be served properly as indicated in the network tab of dev tools without console errors, but only displays a blank white page.
- A reverse proxy to my API - This worked fine when serving the Vue app from http://localhost.
I'm struggling to figure out why the Vue app works when served from http://localhost, but not from http://localhost/display/outbound.
If anyone can provide guidance or suggestions on how to resolve this issue, it would be greatly appreciated.
Edit - My directory structure is as follows:
- C:/test - Root directory
- C:/test/index.html - Static HTML page accessible at http://localhost
- C:/test/display/outbound - Contains Vue 3 project with favicon and index.html, along with the assets subfolder
- C:/test/display/outbound/assets - Includes Vue 3 JS, CSS, and other necessary files
Edit 2 - Added screenshots of the DOM:
https://i.sstatic.net/0vJn6.png
https://i.sstatic.net/yb5b1.png
https://i.sstatic.net/lxFvv.png
Thank you in advance! If additional information is required, please do not hesitate to ask.