c# - 无法在 docker 容器内访问带有 dotnet/angular spa 应用程序的 API，但可以在 docker 容器外访问

Question

当我在本地机器上运行我的 .net core3/angular spa 应用程序时，一切正常。但是，当我尝试将所有内容都放入 docker-compose 时，同时有 2 个服务，一个用于前端，一个用于 API，只有 Angular 部分有效。当 angular 调用 API 时，无法到达端点。
这是我的 docker-compose

version: '3.4'
services:
  test.ang.c:
    image: ${DOCKER_REGISTRY-}test.ang.c
    build:
      context: ./test-ang 
     # dockerfile: JrTech.Angular.Docker/Dockerfile
  test.ang.angular:
    image: ${DOCKER_REGISTRY-}test.ang.angular
    build:
      context: ./test-ang
      dockerfile: ./ClientApp/Dockerfile
      args:
        - skip_client_build=true
    ports:
      - "4200:4200" 
      - "49153:49153"
   
    volumes:
      - ./test-ang/ClientApp:/app

test-ang/中的 Dockerfile

FROM mcr.microsoft.com/dotnet/core/aspnet:3.0-buster-slim AS base

WORKDIR /app
EXPOSE 80
EXPOSE 443
# EXPOSE 4200
#EXPOSE 5001
# FROM node:10.15-alpine AS client 
# ARG skip_client_build=false 
# WORKDIR /app 
# COPY ./ClientApp . 
# RUN [[ ${skip_client_build} = true ]] && echo "Skipping npm install" || npm install 
# RUN [[ ${skip_client_build} = true ]] && mkdir dist || npm run-script build

FROM mcr.microsoft.com/dotnet/core/sdk:3.0-buster AS build
# RUN npm update
WORKDIR /src

COPY ["./test-ang.csproj", "."]
RUN dotnet restore "./test-ang.csproj"
COPY . .
WORKDIR "/src/test-ang"

# RUN echo ls 
RUN dotnet build "../test-ang.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "../test-ang.csproj" -c Release -o /app/publish

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

ClientApp 中的 Dockerfile( Angular 应用):

FROM node:10.15-alpine AS client
EXPOSE 4200 49153
USER node
RUN mkdir /home/node/.npm-global
ENV PATH=/home/node/.npm-global/bin:$PATH
ENV NPM_CONFIG_PREFIX=/home/node/.npm-global
RUN npm install -g @angular/cli@8.1.0
WORKDIR /app
CMD ["ng", "serve", "--port", "4200", "--host", "0.0.0.0", "--disable-host-check", "--poll", "2000"]

启动文件

            app.UseSpa(spa =>
            {
                // To learn more about options for serving an Angular SPA from ASP.NET Core,
                // see https://go.microsoft.com/fwlink/?linkid=864501

                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {   // This starts up npm with server
                    // spa.UseAngularCliServer(npmScript: "start");
                    // spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
                    spa.UseProxyToSpaDevelopmentServer("http://test.ang.angular:4200");
                }
            });

fetch-data.component.ts

@Component({
  selector: 'app-fetch-data',
  templateUrl: './fetch-data.component.html'
})
export class FetchDataComponent {
  public forecasts: WeatherForecast[];

  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    http.get<WeatherForecast[]>(baseUrl + 'weatherforecast').subscribe(result => {
      this.forecasts = result;
    }, error => console.error(error));
  }
}

Answer 1

快速解答:
使用 test.ang.c 更新 Angular 代码以访问 api网址如 http://test.ang.c/api/values .你应该没事的。

长答案:
UseProxyToSpaDevelopmentServer仅打算在开发期间使用，而不是在您将其部署到 docker 之后使用。 IsDevelopment已经在处理这个，所以你不必担心。

在 docker 上工作时有两个网络:
1. 在 docker 内部(docker network ls 命令会告诉你)
2. 主机网络。
docker run -p <host port>:<docker port> <container name>
当您在 docker 网络中时，您必须使用 <docker port>像 80/4200 要从本地计算机访问，您必须使用 <host port> .