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

Question

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

我确实尝试将后端容器暴露给主机，然后使用服务器 IP 从前端访问它，但确实有效，我希望不必以这种方式暴露我的 api并希望尽可能通过 docker 虚拟专用网络运行。

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

前端Docker文件

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;"]

后端Docker文件

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.conf 的 nginx 配置文件，并将其放在你的前端目录中

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 的请求应该由 Nginx 容器直接提供服务。

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

Using docker to deploy Vue frontend and .net backend, frontend not resolving backend container name

nginx

docker

vue.js

docker-compose