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

Your docker image is called registry.gitlab.com/mygitlabsite/adminui:2 (adminui instead of admin) - typo somewhere else? — Bennett Dams
– Bennett Dams, Commented Nov 20, 2018 at 19:39
The docker swarm dns service is based on the name. I am able to curl the admin:80 and get a response. — Trevor V
– Trevor V, Commented Nov 20, 2018 at 19:40

Trevor V · Accepted Answer · 2018-11-20 21:07:35Z

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

Siyu · Accepted Answer · 2018-11-20 21:09:07Z

-1

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

answered Nov 20, 2018 at 21:09

Siyu

12.2k4 gold badges47 silver badges59 bronze badges

1 Comment

Trevor V Over a year ago

Thanks! I did try the trailing slash but it didn't make a difference

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related