angular - 如何将rest api容器的url配置到另一个具有Angular cli代理的容器中
问题描述
我有 Web 应用程序,它是用 Angular 7 编写的,带有代理和 .NET Core 2.2 作为 WebAPI。我的问题是本地一切正常,但我无法从 Codker 容器内的 WebAPI 发出任何请求,因为我得到了
craftsmen.client_1 | [HPM] Rewriting path from "/api//CraftOffer/GetManyWithFilters/0/5?category=0" to "/Public//CraftOffer/GetManyWithFilters/0/5?category=0"
craftsmen.client_1 | [HPM] GET /api//CraftOffer/GetManyWithFilters/0/5?category=0 ~> https://localhost:5000
craftsmen.client_1 | [HPM] Rewriting path from "/api/CraftOffer/GetCategories" to "/Public/CraftOffer/GetCategories"
craftsmen.client_1 | [HPM] GET /api/CraftOffer/GetCategories ~> https://localhost:5000
craftsmen.client_1 | [HPM] Error occurred while trying to proxy request /Public//CraftOffer/GetManyWithFilters/0/5?category=0 from localhost:4200 to https://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)
craftsmen.client_1 | [HPM] Error occurred while trying to proxy request /Public/CraftOffer/GetCategories from localhost:4200 to https://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)
如何能够从 Docker 容器内的客户端发出对 WebAPI 的请求?
我已经尝试过:
- 将内部目标更改proxy.conf.json
为https://craftsmen.webapi:5000
-ASPNETCORE_URLS
从 http 更改为 https
- 将内部目标更改proxy.conf.json
为https://127.0.0.1:5000
当前 proxy.conf.json
{
"/api/*": {
"target": "https://localhost:5000",
"secure": false,
"logLevel": "debug",
"changeOrigin": true,
"pathRewrite": {"api" : "Public"}
}
}
Angular 应用程序的当前 Dockerfile
# source https://mherman.org/blog/dockerizing-an-angular-app/
# base image
FROM node:12.2.0
# install chrome for protractor tests
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
RUN sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
RUN apt-get update && apt-get install -yq google-chrome-stable
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY package.json /app/package.json
RUN npm install
RUN npm install -g @angular/cli@7.3.9
# add app
COPY . /app
# start app
CMD ng serve --host 0.0.0.0
码头工人-compose.yml
version: '3'
services:
craftsmen.webapi:
build:
context: .
dockerfile: BackEnd/src/Craftsmen.WebApi/Dockerfile
ports:
- "5000:5000"
volumes:
- webapi:/webapi
networks:
- craftsmenservices_network
craftsmen.client:
build:
context: ./FrontEnd
dockerfile: Dockerfile
volumes:
- 'FrontEnd:/app'
- '/app/node_modules'
ports:
- '4200:4200'
networks:
- craftsmenservices_network
depends_on:
- craftsmen.webapi
links:
- craftsmen.webapi
craftsmenservices_network:
driver: bridge
volumes:
webapi:
FrontEnd:
当前用于 WebApi 的 Dockerfile
FROM microsoft/dotnet:2.2-runtime AS base
WORKDIR /app
ENV ASPNETCORE_URLS https://*:5000
FROM microsoft/dotnet:2.2-sdk AS build
WORKDIR /src
COPY BackEnd/src/Craftsmen.WebApi/Craftsmen.WebApi.csproj src/Craftsmen.WebApi/
COPY BackEnd/src/Craftsmen.Infrastructure/Craftsmen.Infrastructure.csproj src/Craftsmen.Infrastructure/
COPY BackEnd/src/Craftsmen.Core/Craftsmen.Core.csproj src/Craftsmen.Core/
COPY BackEnd/src/Craftsmen.Contract/Craftsmen.Contract.csproj src/Craftsmen.Contract/
COPY BackEnd/src/Craftsmen.Database/Craftsmen.Database.csproj src/Craftsmen.Database/
RUN dotnet restore src/Craftsmen.WebApi/Craftsmen.WebApi.csproj
COPY ./BackEnd .
WORKDIR /src/src/Craftsmen.WebApi
COPY BackEnd/src/Craftsmen.WebApi/entrypoint.sh .
RUN dotnet build Craftsmen.WebApi.csproj -c Release -o /app
RUN chmod +x ./entrypoint.sh
CMD /bin/bash ./entrypoint.sh
我希望能够从 Angular 客户端向 WebApi 发出成功的请求
解决方案
快速回答
您不能在 docker 容器内使用 localhost。你可以使用:
- 本地ip
- 公共IP
- 公共区域
肮脏的解决方案:使用 ip 而不是 localhost
当您使用 docker-compose 时,所有 docker 应用程序都在同一主机中,因此请在您的 linux shell 中执行此操作:
hostname -I
获取 ip 并在proxy.conf.json中使用它而不是 localhost
长答案
另外,要强调的是:docker-compose ant docker networks仅用于开发目的。
推荐阅读
- bash - 如何按“块”文本拆分解析的文本?
- r - 上传到 Shiny 并将其分配给环境以供进一步使用
- c# - Puppeteer 中 LaunchAsync() 的线程安全
- c# - 基于下面的哈希方法写一个UnHash方法
- c# - 引用同一列 NHibernate 的两个多对一关系
- react-hooks - 使用 React 测试 useSubscription apollo hooks
- azure-active-directory - Get information about invitation of B2B user in Microsoft Graph
- node.js - 通过在nodejs中创建单独的http服务器来监听媒体(图像/视频)是否更好?
- powerbi - 从 2 个表 Power BI 中获取最新状态
- html - DataTable JQuery 导出 PDF 以错误的方向显示阿拉伯数据