I'm trying to configure nginx to serve two independent Vue.js web-apps (let's call them app1 and app2). Applications are served as static html files on separate servers:
server {
server_name app1;
listen 9101;
location / {
root html\app1;
index index.html;
}
}
server {
server_name app2;
listen 9102;
location / {
root html\app2;
index index.html;
}
}
I configured the main server to act as reverse proxy:
server {
server_name apps;
listen 80;
location ^~ /app1 {
proxy_pass http://localhost:9101/;
}
location ^~ /app2 {
proxy_pass http://localhost:9102/;
}
}
The desired effect would be to run apps based on provided url (e.g. run app 1 when going to localhost/app1).
The problem is that html files locate their resources through root prefixed relative paths. For example both app1/index.html and app2/index.html will try to fetch their js files using the /js/app-*.js.
How can I configure nginx to recognize which app the request is coming from and route it to valid server?
EDIT: To clarify, what I'm trying to achieve:
- Client goes to http://example.com/app1
- html/app1/index.html gets loaded.
- Every request sent from html page to / gets routed to app1/ (so link to /js/script.js in html code gets actually fetched from /app1/js/script.js)
- Same goes for app2.
Apps are for internal use only (server is accessible through intranet).