如何使用NGINX配置Angular和vuejs dockerized应用程序

Question

我在配置第二个应用程序运行时遇到了困难。我的客户端工作正常，但是我无法使用vuejs创建我的管理应用程序来运行。

我有为客户端应用程序提供服务的nginx配置，为我的管理员提供了第二个nginx配置应用。如何配置管理应用程序以指向管理员当我尝试访问它时，它会将我重定向到http://admin:8000/admin/而不是localhost：8000

admin
FROM node:alpine as develop-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .

# build stage
FROM develop-stage as build-stage
RUN npm run build

# production stage
FROM nginx
EXPOSE 8000
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
RUN mkdir -p /admin/html
COPY --from=build-stage /app/dist /admin/html

server {
    listen 8000;

    location / {
        root /admin/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

主要的Nginx配置

upstream client {
    server client:3000;
}

upstream admin {
    server admin:8000;
}


server {
    listen 80;

    location / {
        proxy_pass http://client;
    }

    location /admin {
        rewrite /admin/(.*) /$1 break;
        proxy_pass http://admin;
    }

}

Answer 1

NGinx在配置上应用优先级，这意味着您的“ /”就像通配符一样工作，在“ location /”之后什么也不会到达。

尝试一下

upstream client {
    server client:3000;
}

upstream admin {
    server admin:8000;
}


server {
    listen 80;

    location /admin { # <-- this first
        rewrite /admin/(.*) /$1 break;
        proxy_pass http://admin;
    }

    location / { # <-- always at the end, behave as wilcard
        proxy_pass http://client;
    }
}