docker - 如何在容器中配置 nginx 以在自定义路径位置访问构建的 vue 应用程序。 NGINX 返回 404

Question

我有一个 docker swarm 设置，其父 nginx 容器在 443 和 80 上打开，代理到后端节点应用程序和 nginx 容器中构建的 vue cli 应用程序。在这方面一切都很好。我想添加第二个 vue-cli 应用程序，该应用程序也是使用带有路径的 nginx 容器构建的。

我的父 nginx 位置是一个简单的 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";
        }
... 

我可以 exec进入父级 nginx面向公众的服务和curl http://admin:80并显示html。我认识家长nginx服务可以访问 vue nginx服务。

当我去 https://myurl.com/admin我得到标准 404 Not Found
我的 Dockerfile对于父 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

我的 Dockerfile对于 Vue 应用程序

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

我的 docker swarm 服务都在单个节点上的公共(public)覆盖网络中。

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       

我的 admin我添加到我的 vue.config.js 中的 Vue-CLI 应用程序 baseUrl: '/admin',以及在我的路由器中 base: process.env.BASE_URL,
任何帮助表示赞赏

Answer 1

在这种情况下，默认的 docker nginx conf 将不起作用。我必须创建一个 nginx.conf 并将其添加到 admin服务。 admin nginx 最初试图获取 /usr/share/nginx/html/admin而不是 /usr/share/nginx/html因此 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