Can't get two single page applications to run together on one server using nginx

问题

UPDATE: I have edited this post to provide a clearer understanding of the issue. The previous post has been overwritten by this update.

We have two single page applications that need to be accessible through the same domain and ports but at different locations.

Application1 is a public user facing application that should be loaded when visiting https://example.com.

Application2 is a public admin facing application that will require authentication and should be loaded instead of application1 if they visit https://example.com/admin.

Currently I have no problem loading the first application, however, I have tried all sorts of combinations with my nginx conf file to get the second application to load when visiting https://example.com/admin without success.

It is always loading the application1 app instead.

Application1 = /var/www/client/public
Application2 = /var/www/client/admin

/var/www/client
     /public (application1)
          index.html
          /dist
     /admin (application2)
          index.html
          /dist

This is the example.com.conf file. I have tried all sorts of combinations but this is me trying to keep it very simple.

server {
     listen 80;

     root /var/www/client;
     index index.html index.htm;

     server_name happyhourmenu.ca;

     location / {
          root /var/www/client/public;
          try_files $uri $uri/ =404;
     }

     location /admin {
          alias /var/www/client/admin;
          try_files $uri $uri/ =404;
     }
}

I have spent days on this, can't believe something that should be so simple has been holding me up this long.

回答1:

You need to add location within your server configuration. Assuming that path you need to access is /admin, and files are in directory app2

   location /admin {
        alias /app2; 
    }

So the configuration would be something like this:

server {
       listen [::]:443 ssl ipv6only=on; # managed by Certbot
       listen 443 ssl; # managed by Certbot
       ssl_certificate /etc/letsencrypt/live/domain.ca/fullchain.pem; # m$
       ssl_certificate_key /etc/letsencrypt/live/domain.ca/privkey.pem; #$
       include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
       ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

       server_name domain.ca;
       root /var/www/client;
       index index.html index.htm;
       try_files $uri $uri/ =404;

       location /admin {
           alias /app2; 
       }
}

server {
       server_name domain.ca;

       listen 80;
       listen [::]:80;

       if ($host = domain.ca) {
               return 301 https://$host$request_uri;
       }

       return 404;
}

Check further documentation: https://docs.nginx.com/nginx/admin-guide/web-server/serving-static-content/

回答2:

The issue actually had nothing to do with the conf file. It was solved with the help of /u/bakugo on a reddit post in the vuejs subreddit. I don't know if I am allowed to link to that post but here was his reply.

Like I suspected, the problem has nothing to do with nginx, the second index.html is loading /dist/build.js (which is the first app) instead of /admin/dist/build.js

Change the script URL to ./dist/build.js --/u/bakugo

Here is a working example of our conf file which is serving two separate single page applications, sharing one domain on the same server. The conf file is also setup to redirect requests over port 80 to port 443, and using SSL cert.

server {
    listen [::]:443 ssl ipv6only=on;
    listen 443 ssl;
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    root /var/www/client;
    index index.html index.htm;

    server_name example.com www.example.com;

    if ($host = www.example.com) {
        return 301 https://example.com$request_uri;
    }

    location / {
        root /var/www/client/public/;
        try_files $uri $uri/ /index.html =404;
        rewrite ^/admin$ /admin/ redirect;
    }

    location /admin {
        alias /var/www/client/admin/;
        try_files $uri $uri/ /index.html =404;
    }

    location /api {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass http://localhost:3001;
        proxy_ssl_session_reuse off;
        proxy_set_header Host $http_host;
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
        }
}

server {
    listen 80;
    listen [::]:80;

    if ($host = example.com) {
        return 301 https://$host$request_uri;
    }
    if ($host = www.example.com) {
        return 301 https://example.com$request_uri;
    }

    return 404;
}

回答3:

Since you use vue, you can just set publichPath in vue.config.js to do that, check here for detailed information. https://cli.vuejs.org/config/#publicpath

来源：https://stackoverflow.com/questions/50810022/cant-get-two-single-page-applications-to-run-together-on-one-server-using-nginx