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

Question

当我在本地机器上运行我的 .net core3/angular spa 应用程序时，一切正常。但是，当我尝试将所有内容都放入 docker-compose 时，同时有 2 个服务，一个用于前端，一个用于 API，只有角度部分有效。当 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（角度应用）：

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

快速回答： 更新 Angular 代码以使用test.ang.curl（例如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>.