使用docker部署Vue前端和.net后端，前端不解析后端容器名称

Question

我正在尝试在前端部署 Vue 应用程序，在后端部署 .net core api。使用 docker-compose 文件，我已经能够启动网络和容器，但我很难让它们通信。我对 docker 很陌生，但确实了解 Vue 应用程序 dockerfile 使用 Nginx 基础来提供 Web 应用程序，但它似乎可能会影响网络通信，因为前端容器不解析后端容器名称，尽管它应该因为它们与默认网桥驱动程序位于同一虚拟专用网络中。在前端容器中执行 bash shell 并对后端容器执行 curl 时，我确实得到了正确的响应。

我确实尝试将后端容器公开给主机，然后使用服务器 IP 从前端访问它，但这确实有效，但是我希望不必以这种方式公开我的 api，并希望让它工作如果可能，通过 docker 虚拟专用网络。

我在前端尝试的示例 url 遇到名称未解析错误：littlepiggy-api/api 或 littlepiggy-api:5000/api

前端 Dockerfile

FROM node:14.18-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY ./ .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

后端 Dockerfile

FROM mcr.microsoft.com/dotnet/aspnet:5.0 AS base
WORKDIR /app
EXPOSE 5000

FROM mcr.microsoft.com/dotnet/sdk:5.0 AS build
WORKDIR /src
COPY ["LittlePiggy.Api/LittlePiggy.Api.csproj", "LittlePiggy.Api/"]
RUN dotnet restore "LittlePiggy.Api/LittlePiggy.Api.csproj"
COPY . .
WORKDIR "/src/LittlePiggy.Api"
RUN dotnet build "LittlePiggy.Api.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "LittlePiggy.Api.csproj" -c Release -o /app/publish

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "LittlePiggy.Api.dll"] 

Docker 编写文件

version: '3'
services:

  front:
    container_name: littlepiggy-front
    image: josh898/angie-app-front:latest
    ports:
      - 80:80
    networks:
      - littlepiggy
    depends_on:
      - api

  api:
    container_name: littlepiggy-api
    image: josh898/angie-app-backend:latest
    networks:
      - littlepiggy

networks:
  littlepiggy:
    driver: bridge

Answer 1

您需要配置 Nginx 以将匹配 /api 路由的请求传递到后端服务。

如果你创建一个像这样的 nginx 配置文件，名为 nginx.conf 并将它放在你的前端目录中

server { 
    listen 80;

    location / {
        index index.html;
        root /usr/share/nginx/html;
        try_files $uri $uri/ $uri.html =404;
    }

    location /api/ {
        proxy_pass http://littlepiggy-api/;
    }
}

然后通过将前端 Dockerfile 更改为将其复制到前端容器中

FROM node:14.18-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY ./ .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

然后对 http://localhost/api/xxxx 的请求应该被传递到后端，对 http://localhost/index.html 的请求应该由 Nginx 容器直接处理。