如果后端位于同一docker容器中，如何为VueJS应用程序设置axios baseURL

我将应用部署在一个docker容器中：

前端-VueJS（由Nginx提供服务）

后端烧瓶（gunicorn）

Dockerfile:

# Builder
FROM node:10-alpine as builder
WORKDIR /vue-ui
COPY ./frontend/package*.json ./
RUN npm install
COPY ./frontend .
RUN npm run build

#Production container
FROM nginx:alpine as production-build

WORKDIR /app
RUN apk update && apk add --no-cache python3 && \
    python3 -m ensurepip && \
    rm -r /usr/lib/python*/ensurepip && \
    pip3 install --upgrade pip setuptools && \
    if [ ! -e /usr/bin/pip ]; then ln -s pip3 /usr/bin/pip ; fi && \
    if [[ ! -e /usr/bin/python ]]; then ln -sf /usr/bin/python3 /usr/bin/python; fi && \
    rm -r /root/.cache
RUN apk update && apk add postgresql-dev gcc python3-dev musl-dev libxslt-dev libffi-dev


COPY ./.nginx/nginx.conf /etc/nginx/nginx.conf
RUN rm -rf /usr/share/nginx/html/*
COPY --from=builder /vue-ui/dist /usr/share/nginx/html
COPY ./backend/requirements.txt .
COPY ./backend/requirements.txt .
RUN pip install -r requirements.txt
RUN pip install gunicorn
COPY ./backend .
ENV DB_URL_EXTERNAL=postgres://logpasstodb/maindb
#ENV DB_URL_EXTERNAL=$DB_URL_EXTERNAL
EXPOSE 80 5432
#ENTRYPOINT ["nginx", "-g", "daemon off;"]
CMD gunicorn --chdir / -b 0.0.0.0:5000 app:create_app --daemon && \
      nginx -g 'daemon off;'

worker_processes 4;

events { worker_connections 1024; }

http {
    server {
        listen 80;
        server_name localhost;

        location / {
            root  /usr/share/nginx/html;
            index index.html index.htm;
            include /etc/nginx/mime.types;
            try_files $uri $uri/ /index.html;
        }
    }
}

当前端尝试向flask应用程序发送请求时，获得以下信息：

POST http://localhost:5000/login net::ERR_CONNECTION_REFUSED

Axios

baseURL

设置为

Axios.defaults.baseURL=http://localhost:5000/';。此外，如果将其更改为docker internal host
172.17.0.2
，也会出现同样的问题

最重要的是，如果我在部署docker容器的本地计算机上运行后端，那么应用程序（前端）可以成功连接到它

nginx.conf:

# Builder
FROM node:10-alpine as builder
WORKDIR /vue-ui
COPY ./frontend/package*.json ./
RUN npm install
COPY ./frontend .
RUN npm run build

#Production container
FROM nginx:alpine as production-build

WORKDIR /app
RUN apk update && apk add --no-cache python3 && \
    python3 -m ensurepip && \
    rm -r /usr/lib/python*/ensurepip && \
    pip3 install --upgrade pip setuptools && \
    if [ ! -e /usr/bin/pip ]; then ln -s pip3 /usr/bin/pip ; fi && \
    if [[ ! -e /usr/bin/python ]]; then ln -sf /usr/bin/python3 /usr/bin/python; fi && \
    rm -r /root/.cache
RUN apk update && apk add postgresql-dev gcc python3-dev musl-dev libxslt-dev libffi-dev


COPY ./.nginx/nginx.conf /etc/nginx/nginx.conf
RUN rm -rf /usr/share/nginx/html/*
COPY --from=builder /vue-ui/dist /usr/share/nginx/html
COPY ./backend/requirements.txt .
COPY ./backend/requirements.txt .
RUN pip install -r requirements.txt
RUN pip install gunicorn
COPY ./backend .
ENV DB_URL_EXTERNAL=postgres://logpasstodb/maindb
#ENV DB_URL_EXTERNAL=$DB_URL_EXTERNAL
EXPOSE 80 5432
#ENTRYPOINT ["nginx", "-g", "daemon off;"]
CMD gunicorn --chdir / -b 0.0.0.0:5000 app:create_app --daemon && \
      nginx -g 'daemon off;'

worker_processes 4;

events { worker_connections 1024; }

http {
    server {
        listen 80;
        server_name localhost;

        location / {
            root  /usr/share/nginx/html;
            index index.html index.htm;
            include /etc/nginx/mime.types;
            try_files $uri $uri/ /index.html;
        }
    }
}

您可以建议如何正确设置baseURL，或者这可能是Nginx confs的问题吗？
您已经公开了端口80和5432，但没有后端应用程序监听的端口5000

公开端口5000并将baseUrl设置为：5000。或者，您可以在NGINX配置中添加额外的映射

location /api/ {
    proxy_pass localhost:5000;
}

然后将baseUrl设置为localhost:80/api/