Ytukyg

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

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

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/'