How to configure nginx in a container to access a built vue app in a custom path location. NGINX returns 404

Question

I have a docker swarm setup with a parent nginx container that is open on 443 and 80 that proxies to a backend node app and a built vue cli application in a nginx container. Everything works great on that end. I want to add a 2nd vue-cli app also built with a nginx container with a path.

My parent nginx location is a simple proxy_pass

...
   location /admin { # this location does not proxy
            proxy_pass         http://admin:80;
            proxy_redirect     off;
            proxy_set_header   Host $host;
            proxy_set_header   X-Real-IP $remote_addr;
            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header   X-Forwarded-Host $server_name;
            proxy_set_header   Upgrade $http_upgrade;
            proxy_set_header   Connection "upgrade";
        }
   location /{ # this location works
            proxy_pass         http://ui:80;
            proxy_redirect     off;
            proxy_set_header   Host $host;
            proxy_set_header   X-Real-IP $remote_addr;
            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header   X-Forwarded-Host $server_name;
            proxy_set_header   Upgrade $http_upgrade;
            proxy_set_header   Connection "upgrade";
        }
... 

I am able to exec into the parent nginx service which is public facing and curl http://admin:80 and the html displays. I know the parent nginx service has access to the vue nginx service.

When I go to https://myurl.com/admin I get the standard 404 Not Found

My Dockerfile for the parent nginx

FROM nginx
COPY nginx.conf /etc/nginx/nginx.conf
COPY cert.crt /etc/ssl/certs/mywebsite.com.crt
COPY kk.key /etc/ssl/certs/mywebsite.com.key

My Dockerfile for the vue apps

FROM nginx
COPY dist/ /usr/share/nginx/html

My docker swarm services are all in a common overlay network on a single node.

ID                  NAME                MODE                REPLICAS            IMAGE                                                                         PORTS
hbd8mpwbxisw        admin               replicated          2/2                 registry.gitlab.com/mygitlabsite/adminui:2                
fmgx9qzlai9t        nginx               replicated          2/2                 registry.gitlab.com/mygitlabsite/nginx-config:4           *:80->80/tcp, *:443->443/tcp
q0qrhbthzdbu        ui                  replicated          2/2                 registry.gitlab.com/mygitlabsite/ui:2                     
bmjlip3k0iph        web                 replicated          2/2                 mynodeapp:1       

My admin Vue-CLI app I added to my vue.config.js baseUrl: '/admin', as well as in my router base: process.env.BASE_URL,

Any help appreciated

Answer 1

The default docker nginx conf would not work in this case. I had to create and add a nginx.conf to the admin service. The admin nginx was originally trying to get /usr/share/nginx/html/admin instead of /usr/share/nginx/html hence the 404

worker_processes 1;
events { worker_connections 1024; }
http {

    sendfile on;

    gzip              on;
    gzip_http_version 1.0;
    gzip_proxied      any;
    gzip_min_length   500;
    gzip_disable      "MSIE [1-6]\.";
    gzip_types        text/plain text/xml text/css
                      text/comma-separated-values
                      text/javascript
                      application/x-javascript
                      application/atom+xml;

    include /etc/nginx/mime.types;

    server {
        listen 80;

        access_log off;
        server_tokens off;

        root /usr/share/nginx/html;

        location / {
               try_files $uri $uri/ /index.html;
        }
    }
}

Dockerfile:

FROM nginx
COPY dist/ /usr/share/nginx/html/admin
COPY nginx.conf /etc/nginx/nginx.conf

Answer 2

In your Dockerfile for admin, that native nginx does not know how to handle a url like http://admin:80/admin/ , you can either add a config file to handle the case or strip the /admin on the proxy.

BTW better to have a trailing slash baseUrl: '/admin/'